OCAD University · Digital Futures · 2020

Virus
v/s
Vaccines

A 4-player multiplayer racing game built in p5.js

💉 Play the Game ▶ Watch Video
OCAD University · Digital Futures · 2020

About The Project

Part of the Creation and Computation Course, guided by Prof. Kate Hartman and Prof. Nick Puckett.

Built in November 2020, when COVID vaccines were being developed at lightning speed. As humanity anxiously waited for the golden elixir, this game brought fun and frolic to those in isolation.

Four players race to load vaccines into syringes. Click your syringe to fill it the first to complete theirs wins the vaccine race! 🏆

Illustrated crowd wearing masks

Play It Live

Open all four links with friends simultaneously and race to fill your syringe first!

HOW TO PLAY

The Rules of the Race

Gameplay diagram
💉

Click to Load

Select your player and click your syringe to fill it with vaccine fluid 10 clicks to complete!

🏁

Race to Win

First player to fill their syringe wins the vaccine race and gets a congratulatory message!

🦠

Dodge the Chaos

New viruses invade the screen with every click, mirroring the real-world race against an evolving pandemic.

BEHIND THE SCENES

Design & Development

🦕

Characters

Cute dino healthcare workers a tribute to frontline staff worldwide. Each character's colour matches their vaccine fluid for easy visual association.

Adobe Illustrator · After Effects
⌨️

p5.js Library

Built on p5's web editor using keyPressed and if/else functions. Each click loads vaccine and spawns more viruses, escalating the chaos as the race heats up.

p5.js · JavaScript
🌐

PubNub API

Publish/Subscribe model powers all multiplayer sync in real time. Player 1 holds pub & sub keys collecting clicks from all four players and broadcasting everyone's progress live.

PubNub · WebSockets · Real-time
IT'S NOT A BUG, IT'S A FEATURE

Known Quirks

👆

Click outside the canvas during preload clicking inside during the loading gif can add unwanted points.

⌨️

Open together with friends every player must press a key individually; there's no shared start trigger.

🔄

Reset only restarts positions the virus count on screen doesn't reset, only the game state and virus positions do.

Beware of Bugs documentation
THE BIGGER PICTURE

A Race Against Time.

Multiplayer games proved extremely effective at connecting people during lockdown building a shared digital space for those spending time in isolation.

Inspired by a PubNub voting example, the team transformed colour accumulation into a vaccine-loading race. Every click fills the syringe and unleashes more viruses, mirroring the real race against time.

The winner is greeted with a congratulatory message, while everyone else is thanked for participating because in a global health crisis, every effort counts. 💙

EXPERIENCE THE GAME

Watch It In Action

p5.js · PubNub API · November 2020