The Bird Race

screen-shot-2020-09-29-at-9-52-32-pm

Description

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

screen-shot-2020-09-30-at-2-55-45-amscreen-shot-2020-09-30-at-2-55-40-am

screen-shot-2020-09-30-at-2-55-13-am

screen-shot-2020-09-30-at-2-55-23-am

The Game 

Final product: https://ocadu.techsmithrelay.com/9SzH

screen-shot-2020-09-29-at-10-10-48-pm

Hero image.

 

screen-shot-2020-09-29-at-10-20-19-pmscreen-shot-2020-09-29-at-10-18-25-pmscreen-shot-2020-09-29-at-10-18-37-pm

screen-shot-2020-09-30-at-12-01-09-pmscreen-shot-2020-09-30-at-12-02-16-pm

Improvements

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.

Code:

– Shared: https://editor.p5js.org/saaimb01/sketches/Fy-E6fCvQ

– Player 1: https://editor.p5js.org/saaimb01/sketches/FEcW9xJxH

– Player 2: https://editor.p5js.org/saaimb01/sketches/jE0ygNiFt

Merry Tales

banner2

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.

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2020-09-28-230227

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:

screenshot-2020-09-29-120007

screenshot-2020-09-29-120038

A canvas in the early stages:

screenshot-2020-09-29-015244

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

screenshot-2020-09-28-222300

Relationship between players:

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2020-09-28-225153

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.

6

7

 

 

Techsmith link: here

Code and p5.js demo link: here

Access toProject development

 

 

HERMIT GRAB

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

screen-shot-2020-09-28-at-8-50-50-pmscreen-shot-2020-09-28-at-8-51-09-pm

 


Interaction

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.

 


Assets

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

 


Development

development-map1-export

Development Overall

development-map

 


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

Github: https://github.com/ocadryan/HermitGrab

 


Wireframe Planned Game

1

  • 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)

09/28/2020


Reference

Pantodraw

“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.

Pantodraw

pantodraw_headline

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

visual_development_map2

>>>Have A Closer Look.

>>>Check Our Process Video.


User Interaction

workflow


Final Work

pantodraw_video

Video Documentation

CodeBase


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. 

DIGF-2014(20FA)

Assignment #1: Chat++ 

By:

Emily Flood(#3169786)

Jiayi Chen (#3175402)

Ruby Tran (#3177952)

 

Flower Garden Sandbox

By: Neetu Sajan (3188193) , Nazheef Rahman (3179193), Isabella Del Nibletto (3175624)

The multiplayer interaction we had created has a theme of flowers. Each player interacts with a game that involves flowers. Player one controls the flower growth. When they click on the screen, a flower will grow, and if they click again more flowers will start to appear and grow. Player two controls the weather. By clicking on their screen, rain will begin to fall, but when they click their screen again, the sun will appear. Player two also has a bee attached to their cursor. When the bee moves around the screen it will “pollinate.” The background of both multiplayer interactions is hand drawn and done with watercolour, which adds a nice contrast to the code. Both multiplayer interactions were coded on p5.

Headline Image:

screenshot-103

Screenshot of Interactions:

screenshot-104

Screen Recording via Tech Smith:

https://ocadu.techsmithrelay.com/3pKg

Project Development:

screenshot-105

Book Inspiration:

screenshot-106

Link to Book:

https://archive.org/details/b31353368/page/n11/mode/thumb

Editor:

Player 1 (flowers): https://editor.p5js.org/neetusajan/present/8-f63w6DC

Player 2 (rain): https://editor.p5js.org/neetusajan/present/8-f63w6DC

 

 

 

 

 

 

Egg in a Basket

We’re often told, don’t put all your eggs in one basket. But what if we only had one basket? What if all we had was a single egg?

Header images: Wikipedia, & Work Place Safety North

The book Illustrations of the Nests and Eggs of Birds of Ohio (Internet Archive) does exactly as its title says; shows the various birds and their nests and eggs with beautiful illustrations. It is a remarkable visualization of the diversity within nature; of how beautifully different we all are.

In spite of these differences, we are all intangibly connected. The actions one takes individually – no matter how big or small – are experienced collectively. “Egg in a Basket” is a representation of this. We all only have one home, one nest, one basket. We only have one egg, one chance, one life. And we must work collectively to protect it.

Using websockets and device rotation data, our game involves tilting and rotating your phone to keep an egg balanced within a nest/basket. Each ring in the nest represents a player connected to the game. Each ring is animated using audio from the connected players microphone. Creating a visual representation of the presence of others. Although you cannot hear them, you can see they are connected and are impacting the egg on your screen. Players must work together to keep the egg centred, safe in it’s basket. A metaphor of how we all must work together, no matter how far apart, in order to ensure our collective survival.

 


 

The Book

 

bird-egg-book
Images from Illustrations of the Nests and Eggs of Birds of Ohio, via Internet Archive.

 


 

The Concept

  • The original concept consisted of multiple players, all connected.
  • The Egg moves based on tilting and rotating the device.
  • As more players join, the rotation data from each device is averaged. This average is where the egg is positioned.

 

p2p-releationship
Player-to-Player Relationship

 

eiab_concept
Game Play Wireframe

 


 

The Prototype

  • For the prototype, in order to keep a reasonable project scope, we decided to limit game-play two players.
  • We used vintage paper textures from our chosen book as a background.
  • Using an illustration of an egg from the book, we colourized it blue to represent life and our planet.
  • We planned on converting the game from 2D to 3D and did studies of Egg movements in Maya and Unity.

 

eiab_prototype
Prototype Design

 

Egg Movement Study in Maya || https://www.youtube.com/watch?v=igi4weyCEwA

 

screen-shot-2020-09-28-at-5-18-21-pm
Working Prototype || https://ocadu.techsmithrelay.com/FBhW

 


 

The Final

  • We found that even with a limitation of 2 players, game-play was still not ideal due to the send/receive limitation on PubNub connections.
  • We decided to try a different technology, websockets. This allowed for a real-time stream of data across connected players.
  • This decision provided a much better experience as the egg moves and rings animate smoothly from the constant feed of data.
  • Code can be accessed at GitLab:
    https://gitlab.com/nicolevella_ocad/egg-in-a-basket-ws
  • Demo can be played here (mobile device required, 2 players min.):
    https://thawing-beach-36393.herokuapp.com/

 

eiab-final-demo
Egg in a Basket Live Demonstration || https://ocadu.techsmithrelay.com/lrjK

 


 

Next Steps

  • Although we are pleased with the final results, we believe this concept can be pushed further.
  • We plan to revisit this to further gamify the experience.
  • We will add a countdown clock, tied into the Doomsday Clock.
  • While the egg is in the center of the ring; nothing happens. All is good.
  • As the Egg nears the edge of the screen, cracks begin to appear.
  • The ring colours will transition between blue and red, depending on the proximity of the Egg to the edge of the screen.
  • If the egg falls out of the basket of rings, the countdown begins and the plays have 100 seconds (as of this writing, the current time to midnight on the Doomsday Clock) to position the egg back in the basket.
  • Failure to do so results in the end of the world re: the Egg breaks.

 

eiab_v2
Egg in a Basket v2.0

 

Example of Egg Cracking

 


 

Nicole Vella (3174687)
Serena Chow (3167001)
DGIF2014: Assignment 1; Chat++
Nicholas Puckett
09/28/2020

Where’s Bird-o?

DIGF-2014 – Atelier I: Discovery

Experiment 1
By: Arashjot Kaur, Karen Quach, Zhiwei Luan

Our multiplayer game is based on the book  “The Blue Book of Birds of America” with the book we create a bird watching type game. The game is played with 2 players with one of the players being the ‘host’; the host will start the game when both players are ready. Once the game starts the scene will load and a random bird will be given to each player, after a bird is found another bird will be given, find as many birds within the time limit, players with the most birds found wins.

gameplay
The game currently

The game has a total of 15 possible birds to find within the two minutes.

wireframbirdo
Both players will see the same scene, the only difference between the 2 players is the bird they will find. The host will be able to start and restart the game, which is any one of the players.
wheresbirdoplan
If we had more time, we would’ve like to improve the UI of the game.

To create the game we used p5.js, the photos were edited on photoshop, with filters.

Project Development

img_20200907_114205birdsss

 

screenshot-267

wechatimg18

Codes

Player 1 – http://https://editor.p5js.org/MonoRain/sketches/o2JvjuII4

Player 2 – http://https://editor.p5js.org/MonoRain/sketches/vlwJ2AgO1

Host – http://https://editor.p5js.org/MonoRain/sketches/XKFGxhdkQ

Process work 1 – http://https://editor.p5js.org/3178741/sketches/_ht1vtYQB

Process work 2 – http://https://pastebin.com/iYVvs3va

Code Demos

Process Work 1 Demo – http://https://ocadu.techsmithrelay.com/EA0e

Where’s Bird-o Demo – http://https://ocadu.techsmithrelay.com/khWr

The Condor

 

hero-the-condor

The Condor is a new method for communicating. Our goal is to present an offering that is geared toward taking time to slow down and connect with others through symbolism and poetry. Users can experience the joy of poetry and abstract thinking while being gently persuaded to take a breath and enjoy the present moment.

Watch the walkthrough.  Or visit the website.

Our influence comes from the Birds on the Wing  a Victorian children’s book  about birds. The book references the strength and freedom of the Condor, who battles the storm to get to it’s nest. By applying this theme to our own experience, not as birds but as artists and designers, we concluded that the Condor is a good representation of expecting to have to work hard to get where we are going and constantly push ourselves to do better than we were before.

Our multiplayer experience had many iterations and we had to pivot the functionality to better suit our time constraints and coding abilities. Tae has been instrumental in organizing the home page of our site, and performing an exploratory foray into Unity. Doris’s talents as an artist gave her the confidence to take on responsibility for all the graphics, diagrams and characters from the book. Marquessa has built the in-game code, future projection prototype in XD, and the copy.


The Book

screen-shot-2020-09-28-at-9-46-46-pm screen-shot-2020-09-28-at-9-47-17-pm screen-shot-2020-09-28-at-9-47-07-pm screen-shot-2020-09-28-at-9-46-55-pm


Player Interaction Diagram

2

We simplified the interaction for this project. We do believe that it is possible to incorporate many users into the experience. 

 


Iterative Process

To start the experiment we decided that it would be good to at least try to explore different avenues of what is possible.

Unity Experiments:

team1 team2
During this experiment, Tae focused on  creating a mechanism to move a bird character with the arrow keys. Although we quickly found that the time constraint was to restrictive to build a matching character to our book.
We thought that Unity would integrate with Javascript in a way that more suitable to our level of coding experience, but that proved to be an incorrect assumption. However, we still took the opportunity to experiment with Unity as a direct result of this assignment. We still consider this to valuable experience regardless of failure.

 

 

HTML, JS, CSS Experiments:

The group decided that we were going to go with the 3rd concept from our previous assignment, a slow communication experience. We started out with something that looked like this:

 

screen-shot-2020-09-24-at-8-51-56-pm

We took the bird characters from the book and linked them to the individual canvases. (With a moderate amount of success.)

 

 

 

screen-shot-2020-09-24-at-2-57-05-pm

In this photo, we are beginning to organize the canvas and background.

 

 

Our initial work in progress looked something like this video. While we appreciated the abstract birds, the location, pace of the scrolling text, and a few other tweaks weren’t quite right.

screen-shot-2020-09-28-at-3-04-07-pm

 

After the feedback, we modified the canvas to be more aesthetically positioned. We also played with the grid, size, and pattern.

 

 

hero-the-condor

It took the full experiment to get here. But through much discussion, videos, phone-a-friends, and successes – we made it!

We are very proud of the result. It has a very strong visual language and relates to our own experience through this experiment. We are all the Condor.

Quick demo video here.

 


Future Projections

1

 

Our goal was to create a shared canvas that users could bring sections of the poem into the experience, which could then be reordered to create a new meaning and message to an old poem.

As of right now, we were not able to accomplish this goal. With more time and a better understanding of how to express our ideas in code – we believe that we could produce something like this XD prototype.

 


P5 Web Editor Link for Experience:

Pastebin Link for Homepage:

 

Made by:

Tae Nim (3170229)
Marquessa MacKenzie (3174722)
Doris Gao (3175995)