I contemplated a lot about this assignment. It may not show in my final product, which is rather simple. However, I first grappled with exploring my interior patterns: my new routine, my eating habits, my mannerisms, and so on. Then, I considered the patterns of my new world in New York: walking with the tempo on crowded sidewalks, learning the unsaid etiquette of the subway (where to look, where not to, etc.), trying my hardest to have affordable meals. But then, after going back and forth, I grappled with the images that lingered in my mind most: the devastation of western North Carolina, a place very dear to me.

The flooding of North Carolina from Hurricane Helene shattered Appalachia. Not stopping with shattering homes, businesses, and whole communities, the storm shattered a widely held idea that these mountains were untouchable and unchanging. That amidst all the climate chaos, we could have a haven so far inland that the rising tide could not get us. Hindsight mocks our assumptions but the present teaches: the climate is everywhere, it is all of us.
This is the ultimate pattern of the universe: creation, destruction, creation, repeating. To achieve this in P5 (in my amateurish way), I needed to have a wave of water. I searched online for how to create this and found this sketch, Ocean Waves by Ghalia, link: https://editor.p5js.org/Ghalia/sketches/0w48Z27JTf
In this sketch, the noise() function is the centerpiece for creating a smooth wave experience. I consulted the P5 reference page to learn more about the noise() function. The function returns random numbers that can be tuned to feel organic, according to the reference page. Instead of a random() function with large jumps in numbers, noise() generates values between 0 and 1. Fun fact from the P5 reference page: Ken Perlin invented noise() while animating the original Tron film in the 1980s.
Ultimately, I came away from the reference page with more questions than answers. Why will noise() always be different each time it’s run? What were all these vertex() functions about? How does noise() differ in three dimensions? How do I get the wave to move up and down the screen?
Eventually, I answered that last question by adding a variable called waveHeight that makes the wave descend when the variable increases (closer to height of canvas) and the wave ascend when the variable decreases.
For a long while, the noise() function confused me on how to color it. Many hours passed before I realized that the noise() output in the for loop was represented in a line. Lines are colored with the stroke() function, not fill().
At first, I wanted the wave to wait a certain amount of seconds before going across the screen. In this waiting period, I wanted shapes to slowly form and then increase the rate they populate the screen. I found this very hard to do in P5 with its constant looping in the draw() function. How would I create this deliberate effect of slowing down/increasing rate of shapes drawn like a normal drawing without it turning out jittery and unpleasant?
I settled on one shape of a house in the piece. This shape best conveys the dismantling of the illusion of security we feel in this repeating process of destruction and creation. On the other hand, the home represents the undying spirit of rebuilding, of people coming together and sharing with one another, of nature always propelling the environment forward. Yin and Yang.
Leave a reply to Hypercinema Final – Ryan Rotella Cancel reply