Sneaking Out – Narrative spaces [ATLR II EX2]

Mahnoor Shahid – 3162358

Siyue Yasmine Liang – 3165618

Jin Annie Zhang – 3161758

 

Narrative Spaces – Sneaking Out [ATLR II EX2]

Our narrative revolves around you quietly trying to sneak out of the house at night without waking up your parents. But your parents have secretly set up traps around the house that play loud alarm sounds when triggered. The setting of the installation is supposed to represent the entryway in a house. You have to try your best to stay quiet and avoid these alarms while exiting. If sounds are played you have to stop them by replacing other objects on sensors or using other methods. As the interaction starts, your pet dog wakes up and starts barking for food. Your first challenge is to give the dog food within 30 seconds before your parents wake up!

Interaction Steps

The installation has a challenging procedure that the player has to overcome.

  1. The first challenge is to stop the dog from barking by giving him food within 30 seconds (before the parents wake up).
  2. You have to grab the food bowl from the table and the place is on the mat to stop the barking.
  3. The food bowl is on a light sensor, so when the bowl is taken off the table, the light sensor triggers an alarm sound.
  4. Now, the player has to find another object and cover the light sensor with it to stop the alarm
  5. They can take a painting off the wall and place it on the sensor.
  6. As they move towards the door, there is a light beam from a flashlight that is shining on a light sensor, if the player crosses it, an alarm will trigger so they must walk over the light beam
  7. Near the door, there is a safe that the player has to open to get the car keys.
  8. The code has three numbers that are hidden around the room.
  9. The player has strategically walk around the room and search for them without triggering the light beam alarm.
  10. The number can be found behind the painting, on the dog bowl, and near the table lamp.
  11. Once the code is found and correctly entered, the safe is unlocked and the player can grab the keys and sneak out!

 

img_0551

Max Patches

Dog bowl switch and light sensor alarm trigger

This max patch had one digital switch and one analog light sensor.

The dog barking starts at the beginning of the game. When the dog bowl is placed on the mat, the digital switch closes, and the dog sound stops.

The dog bowl was on top of a light sensor. When the dog bowl is moved, an alarm sound triggers since the lamp is shining on it. The person has to replace the bowl with something else.

screen-shot-2019-03-02-at-3-52-10-pm

img_0552 img_0553

img_0559img_0560

Diagram

screen-shot-2019-03-03-at-8-54-45-am

Light Beam “Alarm System”

 

This match patch has one analog light sensor. By default, the flashlight is shining on the sensor which keeps the alarm sound off. When a person passes through the light beam,  the light sensor receives no light and plays the alarm sound. The person in the game has to make sure not to block the light beam to avoid alarms. 

 

screen-shot-2019-03-02-at-3-52-27-pmimg_0556img_0562

Diagram

 

screen-shot-2019-03-03-at-8-58-47-am

Atmosphere Sound

 

To give a night time atmosphere, we had a cricket chirping in the stereo sound.

screen-shot-2019-03-02-at-3-52-38-pm

Keypad and servo motor lock

The player has to find the code numbers 5,9 and 4 and enter them in that specific order. When the correct order of the code typed into the keypad, the servo motor rotates 90 degrees, ending up in a horizontal position. This unblocks the hole and allows the person to open the box cover.

img_0555

Diagram

52893703_598235304026028_697358107386314752_n

Code for the lock system

53402093_550578475455012_2811071587179036672_n52898571_1510892335711456_2756912212785233920_n53080030_1649022798574699_3012932284132098048_n53039170_2038104896482007_7479415096188338176_n

52974088_364063727514860_7948233389549551616_n

Props

  • lamp
  • dog bowl
  •  conductive fabric (digital switch)
  • dog mat
  • flashlight
  • 2 light sensors
  • painting
  • stickers

Audio Files

  • Dog barking (Barks for 30 seconds, then “Who’s there” dialogue starts).
  • Crickets
  • Alarm ringing
  • Buzzer sound when the code entered is incorrect.

 

 

Playing with Fire

team

Dimitra Grovestine, 3165616

Melissa Roberts, 3161139

Kiana Romeo, 3159835

Concept

This project is a physical experience of a German children’s story, Die Gar Traurige Geschichte mit dem Feuerzeug. The story is about a girl who is left home alone with her two cats, plays with matches, and accidentally sets herself on fire.

The juxtaposition between the project and the story lies in the fact that the user must play with fire in order to experience the story, and the moral of the story is not to play with fire. Through the manipulation of objects related to the children’s tale (a cat, a matchbox, a picture of a little girl, a pair of shoes, a casket, and a shoe-box house) the experiencer navigates through the story without ever reading it.

Though the story is narrated, and that narration is triggered by some objects, the story is not exposed to the user. The narration is in the story’s original language: German, meaning the user hears the story being told, but doesn’t understand what’s being said. The German narration, the images pasted onto the inside of the roof, and the cues on the objects hint towards the story, encouraging user interaction.

concept_housefront     concept_houseback

Continue reading “Playing with Fire”

Pub Trivia

Tyra D’Costa | Shiloh Light – Barnes | Omar Qureshi

Pub trivia is a decentralised trivia game that is targeted towards groups of friends or pub – goers who want to play trivia, where trivia is not being offered. This means there is no single command screen that  has exclusive control over the data or processes of the game, the game will b dynamic as players communicate data between each other. Our trivia game requires each member to Join a team, they can do this individually or collaboratively. Once all the players have joined the game the questions will begin and the console will log the players score, the top three players, and which players have guessed wrong or correctly. The trivia game we put together focuses on music and orchestral music facts from the early 1800’s to the late 1900’s.  Ideally, the player would have a multitude of topics and themes to choose from, but for the sake of demonstration our project we chose to focus on the topic of a random non fiction book we were given. This documentation seeks to display the key concepts and functionality required to develop a decentralised trivia style game app, or webpage.

See the code here: https://github.com/qureshiomar/atelier-ii-book

We decided to use Pubnub to develop the backend because its Data Stream Network (DSN) and real time data transfer capabilities are particularly useful when trying to get the players device to communicate effectively between each other. We also used P5.js to develop the backend functionality because it is what we are most familiar with and it is fairly simple to build the functions and structures that were necessary. For the front end development we formatted with HTML and CSS. We did this because we wanted to separate the  the visual aspects of the code and the functional aspects to avoid errors, and organise the code more effectively. We started with front end development, which consisted of Illustrator mockups, and the p5.js DOM library. We then began to develop a loose wireframe of pure HTML buttons, labels, and inputs – which would serve as a playground environment to test whether PubNub would be a viable option to move forward.

 

screen-shot-2019-02-12-at-7-22-05-pm

We concluded with a simple PubNub system of sending messages on one channel to join a game, and another channel to answer questions. This meant that each channel could receive a different object storing specific information. Each time a player answers a question, for example, a message is sent to all other users containing the players name, and the letter that they have selected (A,B,C,D). The computers will then continue to receive answers until the total number of answers is equal to the total number of players. Once the last answer arrives, the computers will then remove all the elements from the screen and generate the so-called results screen. From there, a simple three second timer returns all players to the question screen. The computer will continue to select questions from the array until the number of questions is equal to the variable. Overall the the development process went relatively smoothly, except for one problem we faced which restricted the ability to have a dynamic player number. We wanted the ability to invite a dynamic number of players into the game depending on the circumstance, but due to us not being able to integrate with PubNub “presence” features, we ended up having to go with a fixed “numberOfPlayers” variable. If we decided to continue with this project, we will focus on integrating a dynamic player account feature, as well as improving General bug fixes and UI elements.

CSS Reference:  ferrysdayoff et al,. Jun 11, 2018, 10:16:47 PM. “Styling HTML Forms”. [Web Article] Retrieved from:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

  • Explains how most of the CSS was done. Including how to align buttons and input bars, edit button properties and add svg files to code.

Javascript Reference: Berhanu, Yaphi. May 23 2017. “How to Make a Simple Javascript Quiz. [Web Article]. Retrieved from: https://www.sitepoint.com/simple-javascript-quiz/

  • Explains the basic functionality, problem solving tasks, and features that need to be developed in order to create a trivia game. For example, we learned that we would need to use a loop to fill in the answer choices for the current question.

CSS Reference:  ferrysdayoff et al,. Jun 11, 2018, 10:16:47 PM. “Styling HTML Forms”. [Web Article] Retrieved from:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

Javascript Reference: Berhanu, Yaphi. May 23 2017. “How to Make a Simple Javascript Quiz. [Web Article]. Retrieved from: https://www.sitepoint.com/simple-javascript-quiz/
Pub nub Reference: 
Pub nub. Aug 30th, 2016 at 4:57PM. “Solutions Home”. [Webpage]. Retrieved from: https://support.pubnub.com/support/solutions/articles/14000043857-here-now-
screen-shot-2019-01-23-at-7-03-57-am
Inspiration + Ideating   
kahoot pubtrvia

Once we chose “The story of Orchestral Music and its Times” as our story to base the project on, we contemplated the different interactive forms in which players could express their knowledge of orchestral history. Inspired by quiz games such as Pub Trivia, Kahoot, and HQ Trivia, we decided on a real-time multiplayer trivia game. From there we went back-and-forth between simply asking question after question and displaying result at the end, or showing a continuous real-time results screen containing information about players current score. We ended up going with the continuous option to keep players engaged and competitive with one another.

 

KARATE – Experiment 5 – Book++

bannerkarate

Team members: Dimitra Grovestine (3165616), Salisa Jatuweerapong (3161327), Siyue Liang (3165618)

January 17, 2019

 

INTRODUCTION

Our group picked the book Karate: Questions And Answers.  It introduces the history, development, impacts and the essential practices of karate.

DESCRIPTION

KARATE is a virtual karate simulator, inspired by Donald S. Bitanga’s non-fiction book, Karate: Questions and Answers. This hybrid game, installation, and performance piece prompts a meditative approach to the typically fast-paced sport.

The physical set-up consists of a modified bo staff (attached phone holder) and a single projection on the wall depicting a traditional Japanese dojo. Inside this virtual space lives our Karate Sensei, who bows before demonstrating a standard set of practice moves (katas). In front of the sensei is a floating virtual bo staff, which is mapped to the real-world bo staff. The player, standing in front of the wall projection, uses the physical bo staff to follow along and mimic Sensei’s movements in order to “learn their inner self and find peace within.”

The simulator is powered by Unity, and takes input from a smartphone gyroscope. 

*some Karate facts presented as truths should be taken with a grain of salt

Continue reading “KARATE – Experiment 5 – Book++”

How do astronauts go to the bathroom in space?

Brian Nguyen – 3160984

Nik Szafranek – 3173634

 

Team Roles

Brian – Creative and Development

Nik – Creative, Design and Asset Creation

Concept

Our project is a three player space survival co-op game. Players each have a role they must play on the space station in order survive until help arrives. Player 1 is the engineer of the ship, and must repair problems inside the ship. Player 2 is the pilot of the ship, they must steer the ship out of the way of asteroids and other space junk. While they are dodging the asteroids, items inside the ship will be affected by the thrust. This makes player 1’s job of acquiring items directly linked to player 2’s performance. Player 3 takes on the role of being the antagonist of the players. They control the path the asteroids will spawn on and their goal is to destroy the ship before help comes.

Inspiration

 

Our book inspiration is from How Do You Go To The Bathroom In Space. The book answers questions regarding daily functioning while in space written by a former astronaut. We brainstormed many different ideas based off this topic such as a toilet building game, reverse magic 8-ball style game, and even an AR experience. But settled on a Kings Quest inspired point and click game, which is where player 1 is heavily influenced. From then on we bounced ideas on how this make this an interactive, multi-user experience. Where eventually we ideated to create a space survival game, stemming from works such as Spaceteam, Keep Talking and Nobody Explodes, and Don’t Starve. Our original concept is different from our final due to time constraints. In the original concept, player 3 would be someone at Mission Control providing troubleshooting info from a manual. Similar to how the book itself is structured.

 

The order of events originally planned was as follows:

  1.    Start
  2.    Asteroid
  3.    Air filtration breaks
  4.    Waste full
  5.    Solar Panel hit by small meteorite;
  6. a)    X amount of time before power level too low.
  7. b)   Low power lights
  8.    Sensors scrambled; Pilot can’t see Engineer
  9.    Magnetic storm/Solar Flare; no contact with mission control for 1 hr
  10.    Pipe leak
  11. A)   Hole starts to grow because items are pulled into it.
  12. B)   Pipe breaks
  13. C)   Hull integrity damage
  14.    Toilet clogged
  15.   1 thruster is broken
  16. A)   restart
  17.   Film
  18.   Film on camera runs out
  19. A)   Replace film
  20. B)   Swap out film
  21.   Thermostat breaks
  22.    X amount of time before it is too hot
  23.    Certain equipment won’t work if too hot
  24.    Easier to miss keys; image distortion
  25.    Die of heat stroke

Pliers

PDA/Walkie Talkie

Gag items

Duct Tape

Water

Air Tank

Space suit

Electrical Gloves

 

Planning

We chose p5.js for the project because we were both comfortable using it and could develop the project quickly enough for the timeline. In hindsight, it might of been easier to learn and use Unity to build the point and click adventure game as there are no available libraries to aid in the creation. Clicking on objects in p5 takes a little extra time to setup the collision detection and classes, essentially we had to create a 2D game engine from scratch.

Implementation & Issues

The final implementation consists of three p5 sketches connected through PubNub. Assets were made with Affinity Designer. Player 1 uses p5.scenemanager.js to handle switching between rooms. Every room is split up into their individual js file for organizability.  

Networking Diagram

Data

  • Game over state – Boolean
    • Used for all players to determine when the game is over
  • Thrust direction – “up” or “down”
    • Used by player 1 to shift around items on the screen when player 2 moves the ship
  • Ship position
    • Displayed on player 3’s screen of where the ship is
    • Updates only when player 2 stops moving as a balancing decision, during movement it will not update.
  • Asteroid X Position
    • The x position of where to spawn the next asteroid, set by player 3 and then used by player 2.

Demo & Code

Github Repo w/ Commented Code

https://github.com/notbrian/Atelier2-Book

 

Link to live links

https://notbriann.com/Atelier2-Book/player1/player1.html

https://notbriann.com/Atelier2-Book/player2/player2.html

https://notbriann.com/Atelier2-Book/player3/player3.html

Starfish Generator

 

20190124_111837-1

Samantha Sylvester, 3165592

Michael Shefer, 3155884

Rosh Leynes, 3163231

Assignment 1

Nick Puckett

Atelier II

Thursday, January 24th, 2019

Github: https://github.com/MiShefer/Starfish

Google Drive: https://drive.google.com/open?id=1_zDgL0qcprlQB0LUa1fZlISaExyAZ8yk

About:

Our goal was to create a UI based starfish creator. Starfish come in many different shapes and sizes as we learned from our book. There are tons of different species, each with their own unique traits such as colour, shape, and texture. Starfish are found in mainly tropical places but are not limited to them, they can be found as deep as 6’000ft. To simulate the variety of starfish and what makes them unique we developed an interactive system that constructs a starfish based on the choices made by different users. Additionally, a scientific name would accompany each attribute such as texture, colour, and shape and would result in a name for the starfish upon creation.

Sam:

I had a lot of fun doing this project, I learned so many new things. Working with a variety of software and different logics that I’ve never used before to form a final product was really challenging yet rewarding. Illustrator was interesting to use, it’s amazing how quickly you can learn something when under pressure and a time limit. I find myself thinking in illustrator now when I need to design something quickly. Making the starfish bodies and shapes was really cool! I was a little confused about how svg filetypes work but we made it work in the end. I also originally wanted to have ocean pictures in the end but the layering of the code and issues with masks and colours prevented us from figuring that out in time. It would also have been nice to incorporate sound into it too. 

Another idea I had for this project was based on something I learned from our starfish book. When a starfish loses a limb, it has a regenerative ability that allows it to grow back. So I thought what better animal to play tug of war with, then a starfish? Five screens, one for each arm with one person per a screen pulling the starfish in five different directions. (Poor starfish)

Something to improve on:

  • Design aesthetic, Adobe Illustrator has never been my strong suit

Something to add:

    • The scenery, or ocean backgrounds

Thoughts:

    • Trying to figure out masking and the layering of images within the code.
    • Browser windows seem to be getting confused and aren’t updating

Michael:

As we were working with ideas, our original set environment to work in was Unity. Although it was new to us, we were interested to explore its potential to create an interactive system based off choices and reactions. As we further developed our concept we settled on working in P5 as it was more familiar to us and basic inputs from a variety of choices were more simple to translate to a final screen with cell arrays.

To construct the actual generated starfish, we had to create the assets such as the shape and textures ourselves. Implementing all the assets together as an image with a mask proved difficult especially in a system that was based off a variety of choices. Since image masking only works by calling which particular image it is supposed to overlay, we struggled with working around it before settling on the solution of creating many if statements that contained more than one condition. Although the final result of the code proved to be convoluted and made debugging complicated, the front-end displayed well and even updated in real-time without the need to constantly refresh.

Rosh:

When we started this project I was completely open-minded to whichever approach we took. Preferably, a challenge always. Once we settled on p5js, I was really into the idea of doing the back end logic/programming. It was a bit selfish of me to take on a lot of this responsibility but it was a great learning opportunity.

My portion of the project began with drawing out the workflow of the program. By using barebones sketches and annotations, I devised a way for three interfaces to send messages to a listener, and have a choice selected from a database. To be honest we limited the number of options to save programming on us. After a very poorly done version was made to work on one device, we imported PubNub and brought our project online. The program made to operate on one device was then turned into four separate scripts, and with some refining, this became our final piece.

Sketches and Brainstorming:

plan-1 plan-2

 

The Outrageous L.A. Quiz Game!- Book++ Project

TEAM MEMBERS

Ermar Tanglao

Joseph Eiles

Kiana Romeo

CODE

https://github.com/ErmarTanglao/quiz_game

DESCRIPTION

Our project “The Outrageous LA Quiz Game” is a quiz game based upon the book we chose titled Outrageous LA in which three players compete against each other in order to gain the most points through answering eight different questions. Each outlandish question presents the player with four different answers. Once the player selects an answer, they are locked into it and cannot change their answer; if the player answers correctly then they are immediately rewarded with a point that is tracked through a number on the player controller. Once every player has answered, the game host then proceeds to the next slide or question through their host controller.

On a technical level the quiz is comprised of sixteen different slides, eight for each question and another eight for the answer to the corresponding question. The quiz show is comprised of five different controllers with each controller having its own independent code. Three controllers are designated for each player, one controller is designated to the host so that he/she can select the next slide or reset the game, while the last part of the code controls the question and answer slides.

screen-shot-2019-01-28-at-3-45-55-pm question2

RATIONALE OF CODING LANGUAGE (P5.js)

The programming language we used for the project was P5.js. We used this language because we were the most comfortable writing code with it and learning another programming language or using another software could possibly be difficult to learn. For the way we presented our work we decided to have it be projected from a projector because it would act like a screen for the players to look at in a manner akin to Jeopardy and Who Wants to be a Millionaire.

Image result for who wants to be a millionaire

Image result for jeopardy

CONTEXT

img_6917    img_6918

The book our group chose was Outrageous LA, a book highlighting all the weird and quirky aspects of Los Angeles in the 1980’s. It was full of fun facts and interesting images that one would not only not normally associate with LA culture, but also facts that are definitely not widely known. The ridiculousness and randomness of the book really gave us a lot of wiggle room in terms of coming up with a concept. This made us want to create a way to test people on these random facts, but to make it interesting instead of just making a simple test or an informational program.
answer8

We aimed to make our project as fun as possible and so we came up with the idea of a game show. We examined many older game show themes to come up with a way to format our quiz game and decided on a Who Wants to be a Millionaire type concept in which all the questions appeared on the screen and the player would have to choose the right one. We also paid great attention to the aesthetics of the project and tried to make them as 80’s themed as possible. The only issue with that was it turned out quite unattractive and so we decided to use a more late 80s/ 90s theme for the question slides and buttons. In all, we aimed to make a colourful, nostalgic and fun experience for our players.

answer3 answer1

ISSUES

Within our project we had a few problems. The first had been getting the slides to communicate with both the game host’s controls as well as the players’. For a while, when the host’s controls were clicked it either affected the player or the question slides when it was meant to change both. This was easily fixed by changing the channel name to the same thing on each page of code.

As well as that, we had issues with getting the buttons to revert back to their original colour when the question was reset and getting the points to change only when the correct answer was selected.

NEXT STEPS

An issue that was never solved was that the buttons did not work on iOS devices. This would ultimately cause issues if a large group were to try to open the controllers on their iOS devices and would therefore be our next steps in making the project more cohesive. Furthermore,  we would add more to the game like music, make the question slides themselves interactive and also make it so that points accumulated based on speed of choice and not only if anyone got it right. A stretch goal would be to make it on Unity so that the game show would be immersive as if you were actually on set of a game show!

Experiment 1: Mushrooms, Ferns and Grass

Francisco Samayoa, Isaak Shingray, Annie Zhang
Nick Puckett
Atelier II
January 28, 2019
Project Description

Our project – Mushrooms, Ferns and Grass – was inspired by the book of the same name. It is essentially an interactive painting with an ever changing aesthetic. With the user’s input, the painting shifts, adds glitch effects, changes textures, and switches colours. All with an audio track playing in the background: Pass the Hours by Toronto’s own, Mor Mor. It is supposed invoke emotion, similar to that of a psychedelic trip. With each development, the experience feels like a descent down the rabbit hole. With a name like that, how could we not be inspired by Lewis Carroll’s Alice in Wonderland?

The project was created using p5.js and utilizes PubNub. One computer is running the sketch, while two other computers are controlling the effects on screen, similar to an installation in a public space. One input is translating the background image from left to right using the mouseX and mouseY coordinates. Another input is changing the colour tint on screen using the arrow keys. The secret is in the arrangement of each function. Since we are not clearing the screen after every function, the result is an amalgamation of several functions all coalescing into one surreal painting. This was not intentional at first, but through careful experimentation we were able to birth a new creation. One better than our previous ideas.


Rationale

At first we had our sights set on using Unity. It seemed like a long shot, but we felt the end justified the means. Should we use Unity, we would have a immersive 3D environment that fully utilized the book to its fullest potential. Imagine being able to walk around and interact with different mushrooms and trees. However, we hit various walls due to our inexperience. Around the halfway mark, we decided to switch over to p5.js. It was better to use what we already knew, since we realized we bit off more then we could chew. While we couldn’t create a 3D environment, we decided to approach it differently. We had a canvas to “paint a picture” essentially. From there we delegated the tasks and merged our works together into one, surreal interactive painting. In the end we simply experimented with different functions, and the result is something we’re proud of.


Photos & Video

img_1775img_1779

img_1778img_1786
img_1791

img_1796

img_1799

img_1805

img_1800


Code

https://github.com/avongarde/Atelier-II/tree/master/Assignment%201


Project Context

Van Hemert, Kyle. “These Psychedelic Paintings Were Made Entirely From Code.” Wired, Conde Nast, 10 July 2018, www.wired.com/2013/10/psychedelic-digital-paintings-made-entirely-with-code/.

This project helped guide our aesthetic for the final product. If you see the pictures of Ferris' project, they are in most ways similar to ours. The glitchy effect was caused by using a Perlin noise function, whereas we opted for more basic methods like offset functions and stacking objects in different orders. If we were to continue working on our project, we would incorporate a Perlin noise function for a more surreal effect.

“Human/AI Collaboration.” Deep Dream Generator, deepdreamgenerator.com/.

We stumbled upon this website on our quest for inspiration. The infamous Deep Dream Generator, built by a team of programmers from Google. Google's AI neural network was notorious for creating artwork that sold for thousands of dollars. The realm of possibility for AI collaboration is immense. The website offers a variety of styles to tap into, like the Deep style or more psychedelic Dream style. If we hadn't proceeded with Unity or p5 we would've utilized the website's tools to bring our vision to fruition. Based on our initial Alice in Wonderland theme, we would've experimented with the Dream style.

Experiment 5 – A Little Birdie

Team Members

Melissa Roberts

Donato Liontino

Description

We chose to use the book “The Doubleday First Guide to Birds” for our project. We decided we wanted to code a simple video game. Since our book had no narrative to follow, we had a lot of room to interpret it as we like.

We centered our game about bird watching. The game is to be played by four people, each player controls their own character on the screen, which is represented by a pair of binoculars, and their objective is to collect birds from the “play area” and to trade them with each other.

screenshot-23

The game is played with each character looking at the same computer monitor. Upon startup of the page, they can see a stylized game board that is divided into four quadrants which represent the domain for each player’s icon to move in. Four species of bird can be seen flying around the laptop screen:

the scarlet tanager (red)                            the bluejay (blue)

screenshot-16 scarlet_tanager screenshot-18 bluejay

the tree swallow (green)                            and the meadowlark (yellow)

screenshot-15 tree_swallow screenshot-17 meadowlark

Each player uses their own smartphone as a controller, connecting to the webpage for their user by scanning the associated QR code. The object of the game is to collect all 4 of your bird species, at which point you receive a “winning” message, and the rest of the players receive a “losing” message.

img_2920  img_2919

Continue reading “Experiment 5 – A Little Birdie”

ATLR II Experiment 1: The Suede Game

Mahnoor Shahid – 3162358

Andrew Ng-Lun – 3164714

Denzel Arthur – 3157183

PROJECT DESCRIPTION

The SuedeGame is a 3 player puzzle game. The players are storekeepers who have to find separated parts of their leather items. The separated items are a watch, a duffle bag, and a journal. They have to assemble the found objects corrected according to the item they belong to before the store opens.

When they come close to a  part, a video starts on the monitor showing information related to leather products or sewing.

screen-shot-2019-01-27-at-10-01-21-pmscreen-shot-2019-01-27-at-9-59-27-pmscreen-shot-2019-01-27-at-9-59-41-pm

 

PROJECT CONTEXT

We based our game concept on Leather in Three Dimensions by Rex Lingwood. It is a craft book that demonstrates interesting leather crafting techniques for the beginner and the expert. The book includes instructions and diagrams of how to shape, fold and cut the leather. Based on this, we thought of a basic matching game where the player would have to collect and assemble the corrects parts of a leather object and assemble them correctly. The three products are a leather watch, leather duffle bag, and a leather journal book. In our initial concept, the players would have had to select the correct parts from a table. Later we changed the environment to a leather store where the players have to find hidden parts of the products and assemble all three of them before the store opens.

Data synchronization in unity and pubnub:

https://www.pubnub.com/blog/realtime-data-synchronization-image-switcher-with-unity-pubnub/

We used the Pubnub Unity SDK to synchronized our game across three laptops in real time. This tutorial shows a Unity Build in WebGL hence we chose to use laptops instead of other devices for a better game view.

RATIONAL FOR SELECTED ENVIRONMENT

To develop our suede game, we used Unity to build the leather store game system. Unity excels at creating 3D environments and has easy compatibility with other 3D models. This gives us the opportunity to create our own content from other applications and merge them together in Unity such as using Blender to create 3D models and input them into the game environment. Unity is not only compatible with model applications but can also talk to online networking platforms like pubnub. By using pubnub, we can connect several users together to play the game on several screens with live updates. Furthermore, the beauty of unity, it allows us to fully customize the game components, whether they are the UI menu, interactive buttons, lightings/camera direction, and other features, but also when developing the game, it gives us an interface to work with which makes editing much easier.

3D MODELS

screen-shot-2019-01-27-at-10-15-09-pmscreen-shot-2019-01-27-at-10-15-18-pm screen-shot-2019-01-27-at-8-43-10-pm screen-shot-2019-01-27-at-8-15-10-pm screen-shot-2019-01-27-at-8-14-18-pm

PROCESS

Although the initial real-time synchronization involving Unity SDK and pubnub on WebGL was a success, we had difficulty connecting the finished game to Pubnub. Eventually, the game was connected to pubnub but we were unable to test it with multiple players.

Process Video links:

https://drive.google.com/drive/folders/11_SH5KMMDsDYE7ZhNzaCtiurWqvKd4gX?usp=sharing

BACK UP SKETCH

We created a back-up sketch in p5.js related to modifying shapes. The idea of the sketch was to drag small circles on the outline of the circular shape and match it to the static shape. It was meant to be a multiplayer, interactive game. So far, the players can drag their mouse along the x-axis to change the radius of the circle. Their interactions can be seen on other devices in real time through the help of Pubnub. We are still working on the dragging to manually modifying the shape.

download-1 screen-shot-2019-01-24-at-4-29-58-pm

CODE LINKS

P5 sketch:

https://github.com/mahnoorshahid/gameTestLeather

Unity scripts:

https://github.com/WUNISTUDIOS/Suedegame

Unity build:

https://drive.google.com/drive/folders/1GI70aqiFZAJCGr0wbisNIMfpn5M_34X1?usp=sharing