Lifeline
Let's create life together
Ideation
Concept
As a UI/UX designer, I have both encountered and engineered a variety of interactions between humans and machines. Rather than a struggle over domination, I want to frame the human-computer relationship as one of codependency.
To foster intimacy between the user and the computer, I gamified my program. With consequences for losing, the player is now invested in the machine. While researching computer games, I was touched by the devotion the gaming community has for early video games, despite their simplicity. I was also inspired by the narratives game developers craft around their projects in the movie Ready Player One and the book Tomorrow, and Tomorrow, and Tomorrow by Gabrielle Zevin.
I submitted this program as my DESMA 28 Interactivity course final.
p5.js
To achieve my goal, I used p5.js, a Javascript language that displays its graphics by looping nonstop through the code and layers each new iteration over the old one. Using variables and functions p5.js is able to create animations, interfaces, and even drawing programs.
To create a pen tool, I set the coordinates of a circle to the mouse's. Then I removed the background() function, which fills the screen with each new loop and 'erases' the previous 'frame.'
Moodboard
I liked the juxtaposition of retro interfaces with modern programs.
Wireframes
Gameboy
Drawing program
Radio
Code
Pen
The pen tool moves using keys rather than the mouse. Each time a direction key is pressed, an increment is added in said direction.
Typical computer games use WASD keys but they restrict the pen to only 8 directions. To allow for smoother curves, I added a second ‘joystick’ and 8 more directions.
4 directions
8 directions
Dials
When I started out on my drawing tablet, the dissonance between watching a monitor while my hand drew, unmonitored, took a while to tune out. To bridge the disconnect between the canvas and the keyboard, I wanted the program to acknowledge the user's input.
The 2 dials rotate in the direction of the pressed keys: one to WASD keys and the other for the arrow keys. To smooth out the transition between the 8 positions, I increased the rotation angle in increments at a rate of 120 fps.
Version 1
Version 2
Audio
After experimenting with several audio designs, I chose a heart monitor line to symbolize the literal "heartbeat" of Lifeline. The more noise the mic intakes, the bigger the amplitude.
Buttons
p5.js's looping execution becomes an issue when it comes to tracking mouse clicks. Since the draw function loops over 100 times per second, when the user presses and releases the mouse, the single click can be counted 100 or 101 times in one second. Thus I couldn't use simple toggle logic.
I created my own Button class with an isClicked variable. Using p5.js's mouseClicked() function, I accessed the buttons through an array loop .
Dialogue
Similar to the buttons, I needed the dialogue’s state to change (such as fading from a white background) so I placed a decrementing variable in the dialogue box’s alpha parameter.
In the end dialogue, I used the noLoop() function to end draw()'s looping.
Reflection
Through this project, I familiarized myself with p5.js with supplementary help from past experiences with Javascript and C++. However, I only scratched the surface of p5.js and in the future, I want to explore its 3D functions and web APIs. p5.js's beginner-friendly setup and unique prebuilt functions is a great starting point for new coders.