Press in Case of Winter

Press in Case of Winter – Emilia Mason

Press in Case of Winter is part of an idea I had almost a year ago. I come from Nicaragua, a country in the tropics, therefore, I am not a big fan of cold weather. Last December I bought myself a “Christmas Palm Tree”, painted the leafs in different colors and the stem in gold, and decorated it with colorful Christmas lights.

img_0030  img_0065

The project consists a button for one to press when in need of tropical music and colors. I wanted to bring the tropics to a room as soon as someone comes in. Play happy/tropical music from Latin America and show bright colors.

Context:

The concept  is inspired by two ideas:

1. Beat the Seasonal Affective Disorder (SAD) or more commonly known as “winter blues” transforming my apartment into a tropical and colorful paradise. Studies have shown happy and upbeat music has a positive effect on one’s mood.

  1. An appropriation of Christmas. I had never thought of the fact that we use real and fake pines as Christmas trees, decorated as if it is winter. Nicaragua is part of the southern hemisphere, December is the beginning of summer and temperatures oscillate between 26 to 30 degrees during Christmas season. I wanted to use a local tree for my Christmas celebration.

The idea is very simple:

When coming in the apartment press the button to warm up your mood. Pressing the button will start a random song from the songs and animation indicated in the P5.Js folder uploaded to Cyberduck.

Codes 🙂

P5.Js Code (Link to Github)

The code is simple:
-Specify the variables for the different songs, all songs and the variable colors for all the frames used for the simple animation.
-Function Preload for the songs and animation.
-Function Setup for canvas and setting up the serialport.
-Function Pressed for button.
-Function Draw for animation.

Arduino Code (Link to Github)

Button input code:
Press for on and press for off.

Circuit Diagrams:

buttoninput_fritzing_breadboardview

buttoninput_fritzing_schematicview_schem

Process Journal:
My idea began a little too ambitious for my skills.

The initial idea was to connect a weather API (taking the weather from Nicaragua) and two Spotify playlists (one for sunny days and another for rainy days). Depending on the weather in Nicaragua the Spotify playlists were going to play either a hyper tropical song or a more relaxed tropical song when the button was pressed. This way I would be able to bright and warm my day here in Toronto and I would also have an idea of how the weather was in Managua (the city I am from).

Since this seemed a little too complicated I decided to start from a very simple idea and start building up from there.

img_9425-1

Step 1: Build and Code the Arduino.
I thought this was very simple, I used an example I found on the internet and I only changed the pin number. I was only going to use 1 button as an input.

screen-shot-2017-11-13-at-12-24-08-am

Step 2. Code P5.Js to preload sound
For this, I used the P5.Js manual and the help of our friend in the rainbow train.

screen-shot-2017-11-12-at-11-18-52-pm

Those resources were very helpful but I still had issues preloading several files of sound and making them random everytime the page would load.

At first, I was trying to make an array to randomize the 3 songs I started testing with. In theory, this was very simple but I was having trouble making it work.

screen-shot-2017-11-07-at-4-43-45-pm

Then, I remembered that Yiyi and Jad did something similar in the past assignment so I asked Yiyi if it would be ok to use her code as an example.

screen-shot-2017-11-12-at-11-24-01-pm

I went to their project’s GitHub and used their code as an example to modify my code. I must say this was very helpful.

screen-shot-2017-11-08-at-4-56-24-pm

Having done the basic for my code, which was to make p5 preload the songs, I wanted to make sure I could connect the P5 code and the Arduino. My plan was that once I had the P5 and Arduino running I would start adding more songs and images and/or GIFs.

Once I had added my p5.serialport.js library to the HTML file and opened p5.serialcontrol and connected the Arduino I realized I am a genius who never wrote a command on the P5 code of what to do with the Arduino.
Orlando from the second year was in the studio and he helped me a little (in Spanish).

img_9426

After that, I was able to write the function pressed and function serial event.

ALAS! The Arduino and P5 were connected and I actually had a reading on my console. But I had a big problem, I had a lot of noise.
screen-shot-2017-11-08-at-5-31-06-pm

That day I had my office time with Kate and she recommended soldering my button and fixing the wires to get rid of the noise.

So, I spent the rest of that day trying to understand WHY ON EARTH I had so much noise.

img_9352-1 23514523_10214722742245113_973481933_o

I tried different buttons, pins, solid and stranded wires, regular breadboard, mini breadboard, no breadboard, and soldering everything I could.

NOTHING.WORKED. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

At this moment I was starting to stress A LOT  because  I still hadn’t done the playlists on Spotify or had any images/GIFs/Animation show on the screen. The worst part was that the console was reading so much noise and my buttons were hardly working. And I still needed to build a box for the button. I was really concerned about this because my plan was to have a small box that I could stick to the wall next to my door but since my button and board was not working I had no idea what size the box should be.

Finlay and Roxanne H. saw me hyperventilating and were generous with their time. They helped me realize the problem was not with the wires, board, feather, pins, buttons or the USB cable. IT WAS THE ARDUINO CODE!
I fixed it and the noise was gone!

screen-shot-2017-11-13-at-12-24-36-am

That was frustrating, to say the least.

Having my button and code working, after two days lost and wasted. I was finally able to work on the images. I downloaded lots of GIFs to use but I was recommended to work with animations instead. Since I was running out of time I decided to do the easiest animation possible using the P5 Play library and making frames the size of the screen in different colors.

Then I proceeded to make the box:

When I had all the basic pieces I tested everything together and failed:

I changed the button AGAIN and it was FINALLY working!

What would I do to make this better?
1. Not use the arcade button. Find another type of button, a less finicky one.
2. Make a small box and stick it to a wall instead of having it next to the computer.
3. Use a projector. After I presented I realized that what I wanted to accomplish was an experience not just pressing a button.
4. Connect to Spotify playlists and weather API.

References:

Yiyi’s and Jad’s code for assignment 2: https://github.com/JadRabbaa1/phonelessxmas/blob/master/phonelessxmas1/libraries/sketch.js

https://www.mayoclinic.org/diseases-conditions/seasonal-affective-disorder/symptoms-causes/syc-20364651

http://munews.missouri.edu/news-releases/2013/0514-trying-to-be-happier-works-when-listening-to-upbeat-music-according-to-mu-research/

https://www.arduino.cc/en/Tutorial/InputPullupSerial

https://www.youtube.com/watch?v=Pn1g1wjxl_0

http://p5play.molleindustria.org/examples/index.html?fileName=animation.js

https://github.com/antiboredom/p5.gif.js/tree/master

https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/

https://developer.spotify.com/web-api/tutorial/

Bablebop

Project title: Bablebop

game-screen-1

Team:
Roxanne Baril-Bédard
Dikla Sinai
Emilia Mason

Project description:
Bablebop is a smartphone and human interaction game in which the players must elect who will be the next ruler of the planet. The game randomly assigns a character to each player, based on the character’s personalities they will vote and try to convince the other players to give them a crown. Each crown counts as one vote. The player with the most crowns wins the game and becomes the ruler of Bablebop.

Instructions:
1. Wear the phone in a pouch around your neck.
2. Press “Start to play” button
3. Read about your character. You must act according to your character’s personality.
4. Start campaigning: You have 4 minutes to convince everyone you talk to give you a crown. You can concord with other members of your species to take the win as a team.
5. These are elections and you have to vote. Give a crown to those you think to deserve it.
6. Give dirt to those who don’t deserve to rule Bablebop.

Input: Tapping Device Screen
Output: Changing screens, button blinking

Characters:
Blobs: The Blobs can see it all and use what they see to compliment everyone. You will have to use your compliment power to win this election. Make everyone feel extra good to get the most amount of crowns possible. Don’t fall for tricks and compliments, give crowns to those who you think to deserve them and dirt to the ones you think are lying.

Blarks: The Blarks are very manipulative and charming. You will need to convince everyone you deserve to win this election. Get the most amount of crowns possible. Lie if you have to. Don’t fall for tricks and compliments, give crowns to those who you think to deserve them and dirt to the ones you think are lying.

Blims: The Blims are very smart. You can read in between the lines and know not to trust anyone. Don’t fall for tricks and compliments, give crowns to those who you think to deserve them and dirt to the ones you think are lying.

Game story:
22851432_10155839844936306_1495889050_o

 

Code:
https://github.com/metanymie/bablebop

Problems faced

-It was hard to try to find a way to have a full-size image as the functions width and height did not fill the window. Ultimately, we settled for having slightly squished images in every browser with the windowWidth and windowHeight function, and sized the buttons with fractions of width and height of said window, in order not to have them difform.

Consequently, it works only on windows that are higher than wider.

Another hurdle was understanding how timers work, how to make a round last a certain amount of time and how to create a loop that can take note of time passing since a change in state.

We still have a bug in relation to browsers and operating systems. On Android in Chrome, it skips one screen because it reads a second tap. We tried to fix it by putting a timer so it will take a certain time before it could register a second tap but that completely broke it for IOS so right now in Android still skips a frame. We chose to go with the code that allowed iOs to work best being that most people in the class have iPhones.

-The code would be simpler if we understood how to make objects and for loops. As of now, it is almost 500 lines.

Another challenge was animating and putting a sense of feedback in the buttons. We managed to draw ellipses on top of the button to give a pressed look, but we also tried to have the buttons pulsate in the last quarter of the round and could not figure out the way to have the animation (successive drawing of the image bigger and smaller) be played slow enough that it is visible to human eyes.

Finally, we thought it would be best to optimize for mobile in order not to be resource hungry was a challenge too, because the images we were loading we so big that sometime they just wouldn’t load. We also implemented state loops in order for the images not to redraw themselves every frame.

Design Files:

22851319_10159468874355057_1592211101_o

screen-shot-2017-10-29-at-11-21-33-pm

screen-shot-2017-10-29-at-11-23-33-pm

screen-shot-2017-10-27-at-12-45-07-pm

Photographs and Videos:

Bablebop 1
https://www.youtube.com/watch?v=-uq6cvdcQeY&t=310s

Bablebop 2
https://vimeo.com/240372836

Bablebop 3
https://vimeo.com/240380977

screen-shot-2017-10-29-at-11-30-22-pm
screen-shot-2017-10-29-at-11-31-17-pm
screen-shot-2017-10-29-at-11-32-17-pm
img_9125

Journal:

October 16th
Dikla and Emilia are paired to work together on this assignment.
During their first meet up they decide their project will consist of dancing lessons using 20 screens. Ten of the screens will be giving directions on how to move your upper part of the body and the other 10 screens will give instructions on how to move your lower part of the body.

October 19th
Dikla and Emilia have a video call and decide to change the main topic of the project.
After reading some news from Nicaragua, we decided to focus on Sexual Abuse and Rape.

October 20th
Roxanne joined our project and we discussed what we could make regarding our new topic.

We started our meeting brainstorming and agreed on the next points:

Main topic: Sexual Abuse and Rape.
Possible points of the game: How easy it is to destroy someone
                                                Predators exist everywhere
Abuser – Survivor: Asymmetrical games

The Just World Hypothesis

Possible inputs: Camera picking up movement.
Characters: Predators: 2, Preys: 2, Bystanders: 2
Predators silence bystanders and Preys give trust tokens
We were trying to find a way to have the game’s procedural rhetoric make a point about the social dynamics surrounding sexual abuse. The idea that bystanders, making up to 80% of the players, would have to take a side, was explored.

References mentioned during the meeting.
screen-shot-2017-10-26-at-3-01-32-pm

screen-shot-2017-10-26-at-2-59-35-pm

screen-shot-2017-10-26-at-2-59-22-pm

 

October 22nd
Change game dynamic to Pacman’s logic. We tried to define the mechanics of the game.
At this point we wanted the characters to give possible powers to each other.

Define Steps:
Step 1: Code randomizes what character each screen gets.
Step 2: Once every screen has a character user must tap for instructions.

Reference:
screen-shot-2017-10-26-at-3-40-59-pm

October 23rd
Roxanne started working on Code
Dikla started illustrations
Emilia began description of characters, story, and instructions

We discussed making a special background animation to set the mood of our game, the background would go from night to day and day to night to let the users know the times. We will be using a projector for this. We were thinking of having night and day phases because it would be related to different characters and the time they each could use their specific powers.

We also created a design guideline to define color scheme and type of illustration.
screen-shot-2017-10-27-at-12-43-23-pmAt some point, we discussed the idea of using the phone’s camera as an input and have each player take a selfie and use that photo as the image of each character. For aesthetic reasons, we chose to design the three characters.

Presentation of the game to Nick during class time:
As we were explaining, we realized we needed to simplify our idea.

Suggestions from Nick:
-Simplify
-Make a storyboard, wireframe or user flow to get a better idea of our game
-More interactions on the screen than in person.
-Divide our information and instructions in Public info and Private info for the users.

October 24th
Our game idea went through another iteration. We figured that because of the time, we needed to simplify the gameplay loop a lot, being that we only had 5 minutes or so to play.
We managed to define the game logic and the steps.

23030693_10155776548899437_818215451_o

22879118_10159468428200057_2061618194_o22850418_10159468428190057_1340428421_o
22850307_10159468428210057_173971432_o22879322_10159468428215057_1336796356_o

Steps:
Step 1: Log into Website
Step 2: Grab your phone and put it in the ziplock bag
Step 3: Press button to randomize what character you got. Your identity is a secret.  Button in the middle “Press here to get your character”
Step 4: Screen gives card with secret character. Image and name of the character “Tap for more info”
Step 5: Tap gets you a new card with character’s information.
There is 1 card per character:
-Blobs
-Blarks
-Blims
“Instructions: Wear the phone around your neck and wait to hear the instructions from the game managers.”

Step 6: Give the instructions in person:
During the next few minutes, your job is to convince others to give you crowns. You will use your character’s personality to do so.
All of you can vote, you can give either crowns or dirt, use your judgment wisely when giving a crown or dirt.

Step 7: Screen will be showing two buttons for players to press. We decided to use Blarks, Blobs, Blims and Bablebop as names to avoid any language. English is not our first language and we decided to incorporate this experience of having problems pronouncing words.

During this day we also discussed the behavior the users would have. We were having doubts regarding if they would like to play or not, this is why we decided to give the users the ability to give crowns and also dirt. We thought having two options would be an incentive for users to engage. We talked about the personality of our classmates and that they would enjoy giving/getting crowns but would also laugh when giving or receiving dirt.

October 26th:
The code needed debugging. Roxanne spent a good amount of time making sure the game worked on IOS and Android. We were facing some difficulties with Android devices.

The timer was set for the code and tested it on different phones.

We also develop character’s information and instructions. The process of iteration regarding the story was very helpful to make sure the instructions made sense.

This day we also made the “phone necklaces”. We tested different bag sizes and discussed the length for the string.

Why using ziplock bags and strings to make “phone necklaces”:
-Allows players to use their hands while trying to convince other players to give them crowns.
-Allows players to make their vote secret.
-Made the interactions more fun and personal.

October 27th
This day we decided the amount of time the users would have to convince other players to give them crowns (4 minutes).

Roxanne tested different ways to make sure the two buttons were working and were giving feedback that they were being pressed.

Observations during gameplay:
-Players were pressing the “Start to Play” button before time. They were eager to play and weren’t engaging with the character personalities a lot. Similarly, the players didn’t really register and interact with other members of their species.
-Some players didn’t want to put their phones in the “phone necklaces”.
-Some players were giving crowns and dirt.
-Some players were cheating and giving themselves crowns (you can see this happening in the videos).
-One player’s device didn’t run the game.
-Most of the players were laughing very loudly.
-Groups were organically made, one person would try to convince and others would vote.
-Some players did not make any groups and were mingling with the other players.
-Some players felt uncomfortable with the “phone necklaces”.

Takeaways for future iterations:
-Clear instructions in the game for players to read and then explain it to them IRL.
-Find a way for players not to cheat.
-“Phone necklaces” should be in the shape of the mobile device, some phones were placed horizontally in the ziplock bags and it made it hard for the players to vote.
-String for “phone necklaces” should be smaller for some players and longer for others. Some players were very short and taller players found it difficult to vote on their devices.
-More animation and screen candy would be nice.
– Maybe integrating rules for team wins, having players of each species collect crowns together, in order to have more of a team play and less of a free for all.

Project Context:

Video games of the Oppressed:
http://www.electronicbookreview.com/thread/firstperson/Boalian
Just-world Hypothesis:
https://psychcentral.com/encyclopedia/just-world-hypothesis/
Werewolf Card Game: https://www.playwerewolf.co/rules/
Secret Hitler Game: http://secrethitler.com/
Spent Game: http://playspent.org/
Pacman: http://www.freepacman.org/welcome.php

 

 

SLEEPY CARDBOARD PLAYHOUSE

Madlibs 1

PROJECT NAME: SLEEPY CARDBOARD PLAYHOUSE

Name of group members:
Jad Rabbaa
Roxanne Henry
Emilia Mason

Project description
Our project is an art installation consisting of a playhouse made for grownups to help them reconnect with their inner child. In this space, they will be able to go on a journey mentally in their childhood and fall asleep just like when they were a kid.

The installation works with a proximity sensor that will sense once a person is asleep inside the playhouse. Once the person is asleep the speakers/speaker will play the song Twinkle Twinkle Little Star.

Circuit diagram
Circuit diagram with a speaker.
Input: Proximity sensor
Output: speaker

proximity-and-speaker_bb

 

Circuit diagram without a speaker
In this diagram, we removed the 1-tone speaker because we will be using a set of 2 big speakers. To do that, we needed to use the USB cable as an output to connect the feather to the speakers through a 3rd party software “Gobetwino” previously installed on the computer.

Schematic diagram

schematic-proximity-and-speaker-for-sleepy-bed


Code: https://github.com/rh11lp/experiment1/blob/master/experiment1.ino

The proximity sensor polls once every 500ms to detect if there is an obstruction between 110 and 85 cm. (Since the proximity sensor is in the roof, this distance is the approximate distance of an obstruction if there is a human lying down on the floor). The goal is that we don’t want the proximity sensor to trigger an event unless the person is lying down (not when they’re entering or positioning themselves in the house).

Once the person is settled, the event Serial.println is triggered, and it prints the instruction “#S|PLAYSONG|[]#

We capture the time at this moment and begin to count down the length of the song.

We also toggle the variable speakerInProgress to true so that we don’t continue to send the instruction to GoBetwino.

GoBetwino picks up the instruction through Serial communication, and executes the program VLC, which plays a mp3 file that contains the song  “twinkle twinkle little star”.

Once the time is up for the song, we toggle speakerInProgress to return to false, so that we can go back to a state where we can send instructions to GoBetwino.

If the person is still sleeping in the cardboard house, the song will repeat.

If the person has meanwhile left the house, the song will not play until someone else settles down to sleep.

Sketches
Finite State Machine
To formulate timer by plotting out the variable cases.

22279346_10159376815670057_1517827803_o 22279055_10159376605385057_654208813_o

Design Files
1st ATTEMPT:
CRIB MADE FROM CARDBOARD (which we didn’t eventually adopt)

screen-shot-2017-10-05-at-4-16-40-pm

screen-shot-2017-10-05-at-4-16-50-pm

screen-shot-2017-10-05-at-4-16-29-pm

2nd ATTEMPT (final):
Cardboard Playhouse: the design of this installation which we agreed to develop is supposed to give the visitor a feeling of DIY child-like impression, so we built the design by hand on the go.

Photographs

img_8650

22250982_10159433866970344_1221790906_ofullsizerender-7 img_8688

Videos
Test 1:
http://vimeo.com/237020450

Test 2:
http://vimeo.com/237020653

Fritzing Circuit:
http://vimeo.com/237020745

Prototype Cardboard Crib
http://vimeo.com/237020832

Finite State Machine
http://vimeo.com/237021137

Sleepy Cardboard Playhouse
http://vimeo.com/237021672
http://vimeo.com/237021248

It Works!
https://vimeo.com/237109819


Process journal
Day 1: September 25th

Madlib materials:

Input: Proximity Sensor
Output: Speaker
Material: Cardboard
Adjective: Sleepy

Day 2: September 29th
Our project will be a cardboard rocking crib for a baby. As the crib moves from one direction to another, the sensor will identify them if the crib is moving or not and that movement will allow the music to play or stop.

During this day we decided to incorporate a mp3 or MIDI file for the music coming out of the speaker (Twinkle Twinkle little star) and Nick suggested that for MP3 we might need an extra hardware or possibly a third party software depending on the code and circuit.

Day 3: October 2nd
To avoid the complication of using MP3, we realized the melody can be a coded version of the notes to play from arduino. We investigated the possibility of using a midi file uploaded to arduino. We tried and we realized the arduino doesn’t play music files and the space available on is certainly not enough.

After we talked to Kate about how our project was going, she suggested we should amplify or extend the properties of our assigned material (cardboard) in a way that references to our assigned adjective (sleepy).

screen-shot-2017-10-05-at-10-20-02-pm
Music melody of Twinkle Twinkle little star in code.
Copied from Github: https://gist.github.com/baojie/4522173
screen-shot-2017-10-05-at-10-20-15-pm

screen-shot-2017-10-05-at-10-24-39-pm
The melody code uses the function delay() to give the music a short pause between the notes.
When incorporating the melody code, the input of the proximity sensor is affected by this delay() function which was stopping it from being accurate and triggering the corresponding function of playing music on time.

Day 4: October 3rd
After lots of brainstorming our inner child came to life. We decided to change the idea we had about the baby crib. Our new project consists of a nostalgia cardboard playhouse for adults that will be a safe and comfortable place to sleep. This installation will reminisce old childhood memories for everybody because who hasn’t played cardboard playhouse to sleep in.

Code:  The code was not working this morning, but after some thorough debugging, we made some changes and added a line of code that reads the number of milliseconds.

Research: This day we looked for information on asynchronous timers and since this is a single core processor and there can only be one active task at the same time. Instead of stopping in the middle of a task, we decide to make a sophisticated timer using a finite state machine to plot out the variable cases.

Materials: We looked for large boxes to make our playhouse big enough for a grownup. We built the cardboard playhouse using a glue gun, tape, and plastic but made sure it looks like a cardboard house from childhood made by kids.

We measured the height of the playhouse, which is = 120cm.
We placed the sensor where it should be (the top of the house) and ran the code to make sure of the distance: The sensor reads “proximity = 120”
.
This information was added to the code being the maxDistance when it is empty. When someone is inside and hasn’t slept yet the proximity reads between 0 and 85. When someone is actually sleeping, the proximity reads between 85 (shoulder) and 110 (head). We thought that the music should only play if, and only if the person is laying down.

Day 5: October 4th
We thought the note melody on the small speaker is, on one hand, inaudible and on the other not very soothing, which calls for the use of a more complex and soothing melody and this is only possible through a mp3 file saved on the computer.
We added a line of code to allow the arduino circuit to communicate with the computer through a 3rd party software (gobetwino) and play the music once the proximity is the right value (between 85 and 110).

Day 6: October 5th
We finalized the construction of the cardboard playhouse while taking into consideration that we should hide the circuit really well.
We made sure the blog is on point and translating the process and the actual installation.



Project Context
Cardboard houses are as old as cardboard boxes. Every child has experimented his construction skills through building houses from cardboard And blankets to sleep in and create a comfort zone.

Emilia, Roxanne, and Jad are interested in refreshing stressed student’s memories and bring back childhood memories. They created the cardboard playhouse which invites every student to reconnect with his inner child and find his inner peace to have a rest after a long week of no sleep.

References
http://www.pbs.org/parents/crafts-for-kids/cardboard-houses/
http://mikmo.dk/gobetwinodownload.html
http://benology.bur.st/arduino/xxOther/Gobetwino%20manual.pdf
https://sites.google.com/a/divinechildhighschool.org/electronics/Home/Arduino-Lessons/using-gobetwino-to-control-windows-through-arduino
http://www.orangefreesounds.com/twinkle-twinkle-little-star-song/