INTRO
I worked with Sam Krystal and Tianxu Zhou to create concentration game utilizing a Muse EEG, p5.js animation visible through a projector, and a bluetooth enabled jar trigger. As first-year students new to ITP, we felt anxious at the beginning of the semester. We thought our project could help people with similar anxieties feel control over themselves and their emotions. This eventually led us to develop a project on concentration, an easier physiological state to monitor, and how we can attempt to concentrate throughout our day.
Condensed version of this blog
USER INTERACTION
Through an ideation process, we decided on the theme of fireflies. The process is a user is sitting in front of a projector and given a jar of “fireflies”, represented as Neopixels. Once the user opens the jar, the Neopixels will turn off and the fireflies will become “digitized” on the projected screen, as if the fireflies are being transferred on the screen. The user will be prompted to focus through text. The Muse reads brain waves that will transmit that our user is in a state of concentration, prompting the flies in our animation to concentrate in conjunction. When they are not concentrated, the fireflies will disperse across the screen. We encourage users to use the prompt to focus so they can see the representation visually through the p5.js animation. We also added sound to signify the different states the user can go between between. Once the user is finished with the experience, the user can put the lid back on the jar and the fireflies will go down off screen and the Neopixels will light up again in the jar.
PROCESS
PROTOTYPE 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. And there was the component of the fireflies coming on screen and disappearing off screen.
STATE CHANGE: UNFOCUSED TO FOCUSED
For prototyping, I used MouseX to simulate the change between 2 states. Later, we would swap out MouseX with data from the Muse, to allow the user’s brain waves to create this state change. We wanted the first state to look like many items floating randomly around the screen, so I created a class for the fireflies. The second state is all the objects condensing together in the middle of the screen to form one small ball. This was tricker. Initially the the fireflies objects “jumped” from outside to the middle of the screen with the state change, instead of transitioning slowly. In office hours, I worked with Ellen to learn 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. The code below is what I had to create the effect. –
Once the fireflies moved towards the center, they updated the “this.x, this.y” positions and started to float randomly from the center. I needed “second” this.x and this.y variables almost as if creating two different positions of where the fireflies were supposed to be. Working with Aidan, he mentioned having a “default” or home state. For the default state, I created a function called movetoPosition() which was :
From there, I used this function within another functions such as movetooutside(). where I input the x and y position I wanted the destination to be, in this case the default this.x and this.y.
FIREFLIES COMING OFF/ON SCREEN
With my moveTowardsPosition function, I could then have the fireflies go from any current position to a new position off the screen. I created another function called movingtobottom and put in the moveTowardsPosition function with parameters of going from this.x and this.y to width/2 and windowHeight + 50, to go off screen. To control the interaction of fireflies coming on/off screen, I used mouseClicked as the prompt to switch between states. Inside the mouseClicked function is a boolean state. Part of our user interaction would be for the user to control when the fireflies would disappear when opening/closing the jar. 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.
Once coded, we playtested our interaction. Here is Jason demonstrating the the on/off switch with the jar and the appearance/disappearance of fireflies
PROTOTYPE 2
After playtesting our project in pcomp class and with classmates, the feedback was that users would want more indication of what to do when sitting in front of the screen instead of us explaining step by step the process of the interaction.
TEXT PROMPTS
When asked users what they did to main focus on the screen. There were examples of I focused on the center of the screen, I thought about nothing, I was preoccupied thinking of what I did earlier that day. Overall, an intention of thinking of a specific thing. So, I built in prompts in the center of the screen so users could have a specific task to assist them in their focus.
I created an array of prompts so that upon each run, users would have a random prompt to focus on. I learned a new technique about picking random strings from an array, something used in Javascript.
var names = [“Focus in the center”, “Memorize these numbers: 7822984”, “Focus on your breathe”, “Think of your favorite memory”];
var random = Math.floor((Math.random() * names.length));
var randomName = names[random];
text(randomName, xposition, yposition);
I also brainstormed with my group that we wanted a zoomed in/out effect of the text. So, I created a function called ChangeSize where I created conditionals to determine the zoom direction and speed, and then used scale to create a kind of 3-D zoom towards the user.
SOUND PROMPTS
Sound is a great tool used to give user feedback to the user. So, we decided on this song called Creation of Earth that Sam found as our music. We cut the audio for not focused and focused and the user would go between the two where the sound feedback would indicate where the firefly direction was going on screen. Initially, I used the a boolean and the isPlaying function but there was a song lag. Working with Tianxu, she figured out using the function isLooping() created a cleaner sound.
VISUAL DESIGN
Another point was that the image used on screen was not “firefly” enough, so I experimented with different visuals and colors to get a more firefly effect by adding a circle in front of the imported the PNG, and changing its alpha levels to give a transparent blinking.
ABBY LEE - ITP BLOG 