Breathing Simulation
interactive coding, p5js

Design Brief:

Create a sketch that would simulate an existing natural system - look at physics, biology, and other natural sciences for good examples. Start with the environment - where is the system situated? What are the forces the environment might exert on the system? Examine the agents in the system, their relationships to each other and the environment they are in. The look at how this system would develop over time. What are the rules that you are going to come up with, what are the parameters you are going to feed into them and what effect will the changes have on the development of the system.


The natural system that I chose to represent for this project was breathing. I wanted to represent a system that had multiplicity but was also simple on the surface, and I started by thinking about the components of breathing. I researched how breathing works, different breath rates for different moods, and how changes in breathing occur.
The overall system of breathing is composed of three main actions: inhaling, lung filtering, and exhaling. In my version, inhaling is visualized as increasing size, lung filtering is not shown, and exhaling is visualized as decreasing size. An additional input was added that changes the rate of breath and color - mood. I also added a slider to control the mood input.

I chose not to represent lung filtering because it didn’t seem necessary in this code representation. Though we occasionally take a momentary pause, breathing is rarely completely stationary, and I couldn’t find a good place to add a breath holding function.

Using object-oriented programming, I created a class for each circle that I wanted to expand. Each mood circle had its own properties, including colors, breating rate, radius, and font. The mood circle expands and contracts based on an if statement that defines its maximum and minimum radius, as well as expansion.

After a few experiments in calling the classes in the main code, I was able to call all of the classes within an array. Then, I mapped the moods array to the slider value, calling the .move and .display functions to each class for one slider value. 

Because the natural breathing system was so minimal, I used some custom fonts to represent each and create more graphical contrast between each mood.

The colors chosen to represent the moods are my subjective views of how certain emotions are expressed. By using a slider to control the mood, the user can willingly change the mood onscreen (which can’t always happen to emotions in reality).