The Bird Race



The book “The bird book : illustrating in natural colors more than seven hundred North American birds, also several hundred photographs of their nests and eggs” is about birds and their corresponding eggs with their descriptions.  It provides information about birds in a way that displays the authors passion for birds while writing the book. This type of exhibition for animals is rarely shown in this day and age, especially for birds.

In order to preserve the authors passion I decided to make this game based around two of the fastest birds displayed in the book; the gyrfalcon and golden eagle.

This game uses keyboard inputs to move both players’ birds which are gyrfalcon and golden eagle respectively. This game challenges each player to increase their clicking speed in order to reach the finish line first.

The Book




The Game 

Final product:


Hero image.





If there was more time to complete this assignment I would increase the overall quality and content of this game. At the moment this game lacks depth to it but if I made the visuals nicer, added possible animations, added obstacles, etc. the game would be significantly better.


– Shared:

– Player 1:

– Player 2:

Audio -Visual Orchestra

Audio-Visual Orchestra

DIGF-2014-001 Atelier I: Discovery

Atharva Jadhav

Kanav Arora 

Dharini Kapoor 



Final Codes: 

KeyboardController: Shared Space: 

Concept and Description of the Project: We spend most of our time chatting in groups, during video calls, even sharing visuals in the form of images and different filters and emoticons. Something that can be equally fun and creative to do especially when you have a lot of people together in a shared space (online or offline) is to have everyone take part in an impromptu orchestra. Since everyone is communicating from home mainly using group video calling with a screen in front of them. Just like how the textbook/novel shows how to program sounds in a commodore 64 console, the idea is to program a musical instrument/soundboard and a visual shared space using p5.js.  It will have different sounds linked to different button inputs or different areas on the screen and would also allow users to play with some other variables like pitch to produce unique sounds. The sounds and the type of sounds will trigger a visual on the screen, the visual and the audio will be seen and heard by everyone taking part and all the sounds and visuals from different computers would create an audio visual orchestra. The sounds can be customised in p5.js so arrangements with custom sounds can also be made. The major task was to be to have a foundation for the music and the visuals so that the whole thing does not seem overly ‘random’ even if everyone is pressing random buttons. This problem was solved by mapping the position of the visual object to the keys played by the player. The instruments will be like controllers whereas the visuals will be part of a shared space.

The project consists of one working instrument (player 1) and a shared space that receives and plays the notes. People can play on the piano controller and can listen to everyone’s audio collectively being played in the shared space. The Shared space also features a visual game where the aim is to play music with friends in ways that does not let the floating shape out of bounds. If the shape is out of bounds its game over but with a chance of still recovering the game but if the shape is lost out of bounds the game is over for real.

The shared space and piano are programmed using p5.js. 

Player Interaction and Screenshots :






Final Project Video : 

In the video the shape is being controlled by one player as he is playing notes to keep the shape in bound, another player joins mid-game (indicated by the change in shape and speed) and it becomes a fight to keep the shape in bound, the subsequent players have two roles: they could help keep the shape in bounds(working together) or try to force the shape out of the bounds (working against each other).

Development and UIThe First process: included creating two basic working piano prototypes out of which would be finalised to be the controller for the shared space.The prototypes were built on P5.js.

Source code prototype1: 

Source code prototype2: 


 Prototype 1: 

Prototype 2:

The Second process :includes one working instrument (player 1) and a shared space that receives and plays the notes. People can play on the piano controller and can listen to everyone’s audio collectively being played in the shared space. The shared space and piano are programmed using p5.js. The final instrument was based on prototype 1.

Source code:

Piano Controller  Code: 

P5.js Code: 


 The Third process: includes creating a shared space which would be considered as Orchestra’s shared space where the sound is being played on the shared space after the input is given on the controller and the value of the key of the notes is being shared, which will be used to generate visuals.

 Source Code:

Shared Space code : 

P5.js Code:


Shared Spaced Video:

The Fourth process: The last and final process consisted of producing meaningful visual interaction in our little audio focused project, There were problems in getting multiple shapes to correspond to different players so we went with having one shape being controlled by multiple players and based the game on how hard it would be to controller a single shape through the canvas with multiple controllers while simultaneously trying to create music. So the final game consists of controlling one shape with other players and making meaningful music out of this chaotic struggle of keeping the shape in canvas bounds. When a new player joins in the shape changes and more the players the faster and harder the challenge. The game is really fun when a conscious effort is being made to keep the music…”musical”. Two roles assumed by the players in this game:

  • Working together to keep the shape in bound 
  • Working against each other to throw the shape out of bounds

Wireframe for planned game:


The planned game was going to be a complete orchestra of audio reactive shapes with new shapes coming with new players and reacting to their sounds. With different sounds from each controller setup interacting with a corresponding shape in a group visual party session in different arrangements.

Textbook used:


Make your Commodore 64 sing by Bogas,Ed






Caterpillar Crunch

Group Members: Michael Sinn, Sana Yasamani-Khiabani , Evan Switzer



Caterpillar crunch is a 2 player game based on the book “Latin American insects and entomology” written by Charles Leonard Hogue. The game is also influenced from the game classic called “snake”. Both players play as their own caterpillar and it’s a competitive based game. The objective of the game is to move the caterpillar (WASD is to move) around the map and eat every leaf and grape and reach a certain size before the other player. If the player moves off the map they will lose and the game is over. The player’s caterpillar has to eat within a certain amount of seconds or else their caterpillar will diminish in length. If the caterpillar does not eat and has reached their shortest length, they will lose and the other player wins.

Interaction Images:


Relationship Diagram:


Project in use (Make sure to have sound on)


Project Development

Troubleshooting multiplayer interactions

Adding the win checking function and commenting all of the code in the project

Book used

Code Link



Merry Tales


Sarah Boo, Ziqi Guo, Cam Saunders

Storytelling often assumes the interactive structure of a speaker and a listener, or in the case of a text, an author and a reader. It often uses linear narratives to describe a pre-planned universe, and detailed sentences to express a coherent sequence of events. In Merry Tales, the user is invited to let go of these conventions and explore storytelling as a collaborative and improvisational experience, using spatial relationships between decontextualized illustrations to create ambiguous narratives.

The book ‘A picture-book of merry tales’ contains many stories of a character called Owlglass as he goes on in his life and grows from his experiences. The interaction mechanism of Merry Tales allows two players to create their own collaged ‘picture- book of merry tales’ using the very illustrations from the book. While these characters and objects may have had certain relationships and histories in the original text, they are given the chance to live new ones as the players create their own unique arrangements together.


When the game starts, random objects and characters begin to appear one by one from the bottom of the canvas, moving across the screen continuously. The two players then guide the illustrations around by moving them left or right and ‘dropping’ them onto the canvas. The collaborative play comes into effect under the limitation that each player is only able to manipulate one direction of movement, but both can drop the illustrations. All the while, the illustrations continue to scroll across the screen with their own momentum. The resulting interactions may ebb and flow between tug of war, turn taking, and harmonious chaos, as players respond to each other’s actions and the slowly growing collage. It should be noted that technically, the experience is playable by one player, but they will only be able to cover one half of the canvas.


screen shots of the interaction:

Starting the game:



A canvas in the early stages:


After some collaborative collage storytelling (what does it mean?):


Relationship between players:


Wireframes of the planned game:

Firstly, we would like to be able to add the option to save the canvas at any point as a downloaded image file, as well as the ability to clear the canvas.

Secondly, the random order in which the objects and characters appear to the players (as well as the unpredictable whims of the players themselves) facilitate fairly unrepeatable story compositions, so it would be nice to be able to capture noteworthy arrangements when they appear.





Techsmith link: here

Code and p5.js demo link: here

Access toProject development





Ike Moore, Christina Chen and Khrystyna Gandabura


In this game, all the players are in the same body of water. By pressing players produce food to feed the fish. Different players are able to make different coloured food. After which, fish can follow/swim towards the food and when they eat they will grow in size. As well as, fish can have a baby after becoming 2.5 times their size.

Players can move elements in the water by dragging with their mouse.











Book used:





Game development:

screen-shot-2020-09-24-at-8-25-05-pm screen-shot-2020-09-24-at-9-56-09-pm

random01 random02







The Bird Call

The Bird Call

Sara Hosseini (3186250)

Kyle Shoesmith (3177832)

Giulia Zefilippo (3179987)


Project Description 

It is a social interaction/experience game involving two species (Raven or Dove) of birds interacting with each other. It is a sandbox/open-world game where each player individually controls a single species of bird, which can move around using arrow keys. The players are incentivized (when they see a bird call appear in a certain direction) to find the other players in the forest and interact with them. However, the map is large, and with random spawn points, it is difficult to find other players. Fortunately, all players have a call function (spacebar), also known as a bird call. If you see a bird call (either a coo or caw) in a certain direction, you can follow that direction until you get closer and find the other player. If you or the other player start distancing yourself, you will not be able to see their call function.

Project Development: 


Concept Diagram


First version (with basic mechanics).


Collision Testing with filler objects (coding from library).


Camera ( library) was added to each player for them to explore a 5000 x 5000 scene.

We added assets / sprites (tree and bushes) that cycle through an animation loop and are randomly placed throughout the canvas with colliders (only on the trees).


We tracked the location of each player / bird to determine their location value in the canvas and compared the distance between players. We also added a random spawn point for each player on the scene and each time a player moves, their location is sent over PubNub.

With this information, we were able to attach their location direction and announce it with a “bird call” sprite and send it to each player, but the distance which the player is able to view the call of another player is also limited. This guides the player to follow the “bird call” in a certain direction and meet up with the closest player.

An interval timer was added to the bird call to prevent spamming and the life span of the “caw” sprite was increased so each player has more time to view the bird call on the screen.

Final version: 

P5 Web editor / Coding

Screen recording of the Project:

Player 1:

Player 2:

Wireframe – Planning of the Bird Game


Book Inspiration:

Birds in Legend, Fable and Folklore

8th 9th


headline-image“The hermit crab always takes for his habitation the shell of another animal, often that of the common whelk.” (Jordan, David, Kellogg, Vernon, 175)

Hermit Grab is a game where players take the role of a tiny hermit crab on a beach. These crabs must first race, then fight over a single shell. The main idea for this game has its roots in a video by the BBC regarding how hermit crabs trade over shells, those unfortunate enough to be the same size as other crabs will find themselves in a sort of fight over a new home. This idea fostered the creation of our game, here we decided to pursue what it would be like to represent the idea of resource scarcity. This theme was inspired by how our pollution has been affecting multiple areas of the Earth, especially in the Ocean; a place where we have not only rising sea levels but also in acidity. This catastrophic change in the Ph of the water as negatively impacted marine life, making it hard for animals that rely on Calcium Carbonate (i.e Mollusks, Crabs, and various Shellfish) for their carapace to thrive and even survive. Hermit Grab places users in this position of survival as these crabs are not only fighting for a home but also their lives.


The Book




interaction-diagram233 23333 2333


Players’ Relationship

sprite-001There are two players that they are in a competitive relationship. They compete to get the only one shell. The player with the shell at the end of the game wins.



sprite-0002.              shelled-crab(From left to right, up to down: Background; Hermit crab; Shell; Hermit crab with shell)




Development Overall



Rules of the game:

  • There will be 2 players
  • Players can move the crabs by pressing the arrow keys
  • When you touch the shell, you will get the shell
  • The player who does not have the shell needs to touch the player who has the shell, in order to get the shell
  • 60s each round, the player who has the shell at the end will win the game

Link to the video: 


Code link



Wireframe Planned Game


  • We would like to add more players to the game, so the competition will be more complex and interesting.
  • Add more rounds to the game, instead of only one round. Players’ scores will be count on the main page.
  • Add more function keys to the game. For example, set key “D” as grabbing the shell, key “W” as throwing some obstacles, etc.


Submitted by:

Weiqi Wu (3175842)

Ryan Boyd (3180091)

Alfonso Gabriel Benitez (3178921)



Uncle Fargo’s Lab

Project by Rhepa Kamal , Quinxinrui Zhu, Iris Andrici

Story and goal of the game

The game is about two scientists in the forest continuing their uncle Fargo’s lost research after discovering the map to his lab. 

In this game, the players are meant to plant flowers together but the lab has two separate locations only connected by one crafting machine. The two players must collaborate to finding the seeds in their lab and combining the seeds in each area to finally get all ten flowers within the Glossary.

Stylised animation of the Story for Game

further DELVING into the concept



If We Had One More Week…

we would have definitely implement more features such as inventory system and a crafting system. We really wanted to create a crafting system where players can combine potions to create seeds, but it was challenging for us. We also wanted to include more aesthetics and animation to make the game feel more engaging.Eventually add more flowers and puzzles, and even NPC’s where you have to complete quest to acquire the seeds. 

In terms of interaction, it would be awesome to include dialog that triggers in certain events, such as when the player fails to combine the correct potion and include a chat box which was difficult for us to include.

Game being played:



Design Elements : S P R I T E S


Design Elements : T I L E S


Design Elements : F L  O W E R S


Design Elements : U I

general-box        trash      watering-can

Design Elements: G L O S S A R Y

page2   page8   page6

We wanted to more directly implement our book into the game. That is why we used the references for the flower sprites we made to use as Easter eggs throughout the game and in the glossary the player can access at all times.


Deciding on the Map

Map we used for testing
Original map concept
Re-creating the original concept in Unity


Alternate Ideas When Unity Didn’t Work

20200928_231815Small humanoid pests begin to bother you. Person on main screen sees the scenario while four people on their phone cannot. Player on screen must draw in symbols what is happening so the person with the specific superpower can do their action within a time limit (raising it high or shaking it a lot). Goal, grow your plants and don’t get them eaten by pest. Possible power: rain, sun, shade, pesticide.

reference book




final words and links to sources

We worked very hard on getting to the place we have. Even though unfortunately our best version of the game is not polished and buggy, we are happy with how the project turned out and will try to improve it further when we have time throughout the year.









“We are aware that all leaves are beautiful to the thoughtful and careful observer of nature; the examination of each leaf reveals beauties that to the ordinary observer would pass unnoticed.”

— Beautiful Leaved Plants.



Hi, we are Emily Flood, Jiayi Chen, Ruby Tran, and we are from group #5. The game we want to introduce today is pantodrawwords (“Pantodraw”). It is a web-based multiplayer interactive game. There are two roles in our game: painter and player. The main activity of this game for the painter is to draw the given illustration from the book: Beautiful Leaved Plants, while players need to guess what the correct image that the painter is drawing from three choices, and this process is time-limited. Users are going to use Microsoft Teams as the communication tool and using Microsoft Whiteboard to interact.

Concept Development

Earlier for this assignment, we decided to create a virtual game of charades. One player acts out a word, on video, and the other players will try to guess what it is. They can enter their answers through the chat and they will show up on the game’s webpage. As we went through the book, we found that plants and their relative terms are really hard to act out. Instead, we believed that illustration is a better way to express and also a good way to introduce those beautiful plants on our lovely earth to more people. Basically, the gameplay was inspired by Beautiful Leaved Plants

p4-1 p4-2 p4-4 p4-3

Visual Development


>>>Have A Closer Look.

>>>Check Our Process Video.

User Interaction


Final Work


Video Documentation


Challenges & Issues

  • We spent a lot of time working on switching around image groups for both painter and player page. The painter and players are on different pages but they are playing synchronously so we need to make sure they have the same information.
  • We do not have enough time to complete the game as a whole. For example, our page does not have any responses if players choose the wrong illustration. Our timer worked on p5 editor but somehow did not work when we put out HTML files together. We ended up using an mp4 video to present.
  • Some issues could only be found after play-testing. 

A Bigger Picture

  • Refining our visual presentation (ie. user interface).
  • Refining our coding (including timer).
  • Enlarge our image library for more games, also increase the difficulty.
  • Try to include a whiteboard on our webpage rather than using a third-party application.
  • Improve users’ interactive experience by having more functionalities, such as emotes.
  • Also add background music.
  • Have a more thoughtful introduction to our plants with more materials. 
  • May have the user choose their library’s category. 


Assignment #1: Chat++ 


Emily Flood(#3169786)

Jiayi Chen (#3175402)

Ruby Tran (#3177952)