top of page

/ Wake them up!

Experiments with Code 1:
Multiscreen Interactions

CLASSROOM PROJECT

OCAD University

Mentors: Kate Hartman & Nick Puckett

TEAM

Manisha Laroia

Rittika Basu

DURATION

2 weeks | 2019

EXPERIMENTS WITH CODE

p5js

/ ABOUT

Wake them up! is an interactive experience with a family of Sleepy Monsters displayed across multiple screens, that wake up with pre-programmed, randomly assorted mobile user-interactions. The experience consisted of many virtual ‘Sleepy Monsters’ and the participant’s task was to ‘Wake them up’ by interacting with them. The experiment was an attempt to assign personalities and emotions to smartphones and create delight through the interactions.

/ PROJECT CONTEXT
Moving to grad school thousands of miles away from home started-off with excitement but also with the unexpected irregular sleep patterns. Many of the international students were found napping on the softest green couch in the studio, sipping cups of coffee like a magic potion and hoping for it to work! Amongst them were us, two sleepy heads- us perpetually yawning, trying to wrap our heads around p5js.  

What's the deal with these monsters?

The idea stemmed from us joking about creating a wall of phones with each displaying a yawning monster and see its effect on the viewer. Building on that we thought of vertical gardens with animals sleeping in them that awaken with different user interaction OR having twenty phones sleeping and each user figuring out how to wake their phone up. Eventually, we nailed it down to creating a twenty Sleeping Monster, and the users explore different interactions with their phones to wake them up!

/ THE CONCEPT

The way phones are integrated into our lives today, they are not just meer devices but more like individual electronic beings that we wake up, talk to, play with and can’t live without.  No wonder we feel we’ve lost part of ourselves when we forget to bring our smartphone along (Suri, 2013). We wanted the user to interact with their Sleepy Monster (on the phone) and experience the emotions of the monster getting angry if woken up, or saying NO NO if tapped, refusing to wake up unless they had discovered the one gesture that would cause it to open its eyes adding a personality to their personal device, in an attempt to humanize them. The experience was meant to create a moment of delight, once the user is able to wake up the Sleepy Monster and instill an excitement of now having a fun virtual creature in their pocket to play with or collect.

 

The ‘Wake up the monster’ and 'collect it' element of the experience was inspired by the Cat collecting easter egg game on Android Nougat and the pokemon Go mania for collecting virtual Pokémons. By assigning personalities to the Monsters and having users interact with them, it was interesting to see the different ways the users tried to wake them.

From shouting WAKE UP! at their phones, poking the virtual eyes too vigorously shaking them, it was interesting to see users employ methods they would usually use for people.

The next steps with these Sleepy Monsters could be a playful application to collect them, or morning alarms or maybe do-not-disturb(DND) features for device screens.

/ MULTISCREEN EXPERIMENT EXPERIENCE
The participants were organized into four groups and assigned with a QR code each. They had to scan, wake up the monster, keep it awake and move to the next table to wake up the next monster. Eventually they would have woken up all four monsters and collected them. For the multiscreen aspect of the experience, we created four Sleepy Monster applications each with its unique color, hint, and wake up gesture.

 

Each Sleepy Monster was programmed to pick a color from a predefined array of colors, in the setup, such that when the code was loaded onto a mobile phone, each of the 20 screens would have a different coloured monster. For each case, we added an  indicative response, which was a pre-programmed response of the application to a particular gesture, so as to inform the user that it is or it is not the gesture that works for this Monster and they must try a different one. 

 

Participants were to try various smartphone interactions which involved speaking to, shaking, running, screen-tapping etc. The monsters responded differently by different inputs. There were four versions of the monster for mobile devices and one was created for the laptop as a bonus.

Sleepy Monster 1
Response:
Angry face with changing red shades of the background


Wake up gesture:

Rotation in the X-axis

Scan the QR code to meet the monster OR click on the QR code if you are on a phone/tablet.

QR%20Code_Master_s1_edited.jpg

Sleepy Monster 2
Response:

Eyes open a bit when touch detected


Wake up gesture:

4 finger Multitouch

Scan the QR code to meet the monster OR click on the QR code if you are on a phone/tablet.

QR%20Code_Master_s2_edited.jpg

Sleepy Monster 3

Response:

Noo#! text displays on touch to indicate to try another interaction.

Wake up gesture:

Tap in a specific pixel area (top left corner)

Scan the QR code to meet the monster OR click on the QR code if you are on a phone/tablet.

QR%20Code_Master_s3_edited.jpg

Sleepy Monster 4

Response:

zzz text displays on touch to indicate to try another interaction.

 

Wake up gesture:

Acceleration in X-axis causes eyes to open

Scan the QR code to meet the monster OR click on the QR code if you are on a phone/tablet.

QR%20Code_Master_s4_edited.jpg

/ THE PROCESS

We used the ‘Create your Portrait’ exercise as a starting point to build our understanding of coding. Both of us had limited knowledge of programming and we decided to use the first few days to actively try our hand at p5 programming, trying to understand different functions, the possibilities of the process and understanding the logic. Key resources for this stage were The Coding Train youtube videos by Daniel Shiffman and the book Make: Getting Started with p5.js by Lauren McCarthy.

Concept brainstorming, led us to questions about the various activities we could implement and what functions were possible. We spent the next few days exploring different interactivity and writing shortcodes based on the References, section on the p5.org website.

Some early concepts revolved around, creating

a fitness challenge, a music integrated experiences, picture puzzles, math puzzle games or digital versions of conventional games like tic-tac or catch-ball or ludo. We did the second brainstorm, now with a more clear picture of the possibilities within the project scope. A lot of our early ideas were tending towards networking, but through this brainstorm, we looked at ways in which we could replace the networking aspects with actual people-people interactions. Once we had the virtual Sleepy Monster concept narrowed down, we started defining the possible interaction we could build  for the mobile interface. We sketched out the Monster faces for the visual interface, and prototyped the same using p5. Parallelly, we programmed the interactions as individual codes, to try out each

 

of them like acceleration mapped to eye-opening, rotation mapped to eye-opening, multitouch mapped to eye-opening, audio playback and random color selection on setup. The next step involved combining the interactions into one final code, where the interactions would execute as per conditions defined in the combined code. This stage had a lot of hits and trials, as we would write the code, then run it on different smartphones with varying OS and browsers.

A large portion of our efforts in this leg of the project was focussed on bug fixing and preparing elements(presentation, QR codes for scanning, steps for the demo & documenting the experience) for the final demo, simplifying the experience to fit everything in the allotted time of 7 minutes per team.

/ CODE & DOCUMENTATION

Video of the user-interaction with the experiment (project demo and critique).

 

The Code for the experiment is on Github.

Blog documentation of the project is here.

/ REFERENCES

 

  • Instagram - Black Circle
  • LinkedIn - Black Circle
  • Tumblr - Black Circle
  • Vimeo - Black Circle

Copyright © 2024 Manisha Laroia. All rights reserved.

Made with ❤️ & ☕

bottom of page