WEEK 5: FINAL PROJECT PROTOTYPE

INTRO

I’m incorporating physical computing and ICM for the final. In my group, we are doing a project about meditation and striving to achieve calmness. In our daily lives, we are thinking of a variety of different things and meditation allows us to focus on the task at hand. We wanted to represent this change of state between “chaos” and calm visually through p5. In state 1, objects will be randomly floating to show a user thinking of various things and the state 2 will be when users concentrate and the objects condense.

PROCESS 

STAGE 1

After speaking with my group members about the concept, we brainstormed what the visualization would look like. 

There were two states : state of randomness and state of focus. We wanted to first state to look like many  items floating randomly around the screen. I remembered Dan Schiffman’s bubbles array video so thought I would create that as a base. 

The second state is all  the objects condensing together in the middle of the screen to form one small ball. This was tricker. For prototyping, I used MouseX to simulate change between 2 states.  However, it was too rapid of a transition, because the objects “jumped” from outside to the middle of the screen, instead of transitioning slowly. In office hours, I learned about the lerp() function as a way to create a smooth transition. 

Once the objects were in the center, I had a hard time reversing its migration pattern and have them go from inside to outside. Eventually, I also wanted the objects to appear and disappear from the bottom of the screen. So, I needed my fireflies to move in any direction I wanted across the screen. 

Working with another resident, we talked about having a “default” or home state. Instead of constantly updating this.x and this.y, there will be two different variables for x and y, – this.x, this.y and this.homex and this.homey. That no matter where the objects ended up going, they could always return to a “default” state.  Since I wanted to transition the movement of fireflies to various points throughout the screen, I created a function within a function, instead of rewriting functions multiple times. 

STAGE 2

The next part was the appearing and disappearing of the fireflies. For our user interaction, users would stand in front of a screen with a mason jar filled with “fireflies”. The “fireflies” are using Neopixels in a jar. Once the user opens the jar, the Neopixels turn off and “fireflies” will become digital and appear on screen. When the user closes the jar, the “fireflies” disappear down offscreen.

Originally, I used a counter to time when the flies will go down offscreen. This worked to see visually what it would look like. But part of our user interaction would be for the user to control when the fireflies would disappear when opening/closing the jar. Also, we had to incorporate the Muse data into the sketch. When a user opens the jar, fireflies will appear and when the user closes the jar, fireflies disappear. Effectively this is an on/off switch so that lended itself to how to incorporate this code into p5.js, using a boolean state The prototype interaction now is mouseClicked.

I updated the visual assets to make the scene more realistic.

STAGE 3

We incorporated the Muse data into the sketch and playtested concentration. The next step is making a more interactive prompt or game in the p5 sketch to get users to concentrate on something on the screen.