The Bird Call

The Bird Call

Sara Hosseini (3186250)

Kyle Shoesmith (3177832)

Giulia Zefilippo (3179987)

1st

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: 

2nd

Concept Diagram

3rd

First version (with basic mechanics).

4th

Collision Testing with filler objects (coding from p5.play library).

5th

Camera (p5.play 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).

6th

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

https://editor.p5js.org/lemonsquares/sketches/1QcaMvVQw

Screen recording of the Project:

Player 1: https://ocadu.techsmithrelay.com/6Z3Y

Player 2: https://ocadu.techsmithrelay.com/aEBB

Wireframe – Planning of the Bird Game

7th

Book Inspiration:

Birds in Legend, Fable and Folklore

https://archive.org/details/birdsinlegendfab00inge/page/n9/mode/2up

8th 9th

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

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

planting-process

game

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: https://ocadu.techsmithrelay.com/LG5J

 

DESIGNING THE GAME

Design Elements : S P R I T E S

sciencemansciencewomanwork-table

Design Elements : T I L E S

tile-sheet-world1

Design Elements : F L  O W E R S

staticettbutterflpngcampanulpngaclimbing-rosesdimorphothecatirispngtea-rosetdianthusgloxinipngajapanesepngdaisypng

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.

process

Deciding on the Map

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

20200928_231845alternate-map-design

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

references

lilly-of-the-valley

azaleastatice

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.

CODE: https://github.com/Rhepa/labplant/tree/master

 

 

 

 

 

 

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)

 

 

 

 

 

Hello world!

Welcome to OCAD University Blogs. This is your first post. Edit or delete it, then start blogging! There are tons of great themes available for you to choose from. Please explore all of the options available to you by exploring the Admin Toolbar (when logged in) at the top of the page, which will take you to the powerful blog administration interface (Dashboard), which only you have access to.

Have fun blogging!