Experiential

Canadian Cancer Society Experiential

Vue, WebSockets, Matter.js, JavaScript

The Expand Project logo

About the project

This interactive installation was part of the Canadian Cancer Society’s "Expand" campaign, aimed at queer youth to raise awareness about smoking. The project was showcased in three major cities—Toronto, Montreal, and Thunder Bay—and featured a virtual Plinko game displayed on a large TV screen. Users could scan a QR code to launch a mobile app, where they chose stressors linked to smoking, then flung them as virtual pucks onto the screen, trying to hit a moving target. The experience highlighted the struggles of quitting smoking in a fun and engaging way.

  • role
    Senior Developer
  • year
    2022
  • agency
    Art & Science

The mobile experience for losing and winning

Mobile Gameplay

Users could engage with the installation by scanning a QR code, which launched a mobile application designed to mirror the Plinko experience. Through the app, users selected specific stressors that commonly cause queer youth to smoke, represented as circular pucks. These pucks were flung from their phones onto the screen, where they interacted with the Plinko board in real time, thanks to websockets and 2D physics. The user’s goal was to land the pucks into a moving target at the bottom of the screen. Whether they succeeded or failed, the app would provide immediate feedback on their phones, either showing a win or a loss screen.

This experience aimed to raise awareness of the underlying stressors that lead to smoking in the queer community, while also encouraging participants to think about the challenges smokers face when trying to quit.

The TV screen view for gameplay

Game Board

Matter.js was used for the 2D physics simulation, making the Plinko pucks behave realistically as they bounced around on the screen. The use of websockets ensured real-time communication between the user's mobile device and the on-screen Plinko game, creating a seamless experience.

Additional care was taken to ensure the installation was fully self-sufficient in remote cities. Automated boot systems were developed to ensure the TV and computer powering the experience could restart autonomously after a power outage. Remote networking capabilities were also built into the system, allowing for off-site maintenance, software updates, and troubleshooting, ensuring continuous operation without needing physical intervention.

Get in Touch

Interested in working together?
Find me on LinkedIn or drop me a message using the form.