https://github.com/calistalu/projectA
https://editor.p5js.org/calistalu/sketches/GXAv3p3sl
Part 1
Project description:
Calista Lu,
CYBERPOND ECOSYSTEM, 2023
Digital water life inhabiting in a cyber world
- The Elevator Pitch.
Cyberpond Ecosystem revolves around exploring various creatures inhabiting in a tiny cyber pond. It simulates a school of fish gracefully navigating the pond’s water, with their predator chasing all the way behind. - Abstract.
Within the Cyberpond Ecosystem, the school of fish exhibit a range of interactive behaviors with the predator. Users are empowered to interact with these creatures using their mouse, aiming to reflect how human intervention can disrupt the delicate equilibrium of nature’s complicated operations. The core objective of this project is to provoke contemplation about ecosystems through a virtual experience, emphasizing the interconnectedness of life within nature. It serves as a reminder that every organism plays a role in sustaining the stability of an ecosystem, and any alteration has the potential to reverberate throughout the entire system.
User interaction with the school of fish
Human intervention
Part 2
1) Process: Design and Composition
My project started from its initial concept of simulating a school of fish:
Initial design of school of fish
Then I decided to introduce vibrant colors in order to create a striking contrast with the dark background. It occurred to me that I could correlate the color with the direction of the fish’s movement, controlled by sin(a) and cos(a), and incorprate user interaction through mapping the value of mouseX. What’s more, using the noise function to create an organic feel is what I have found of value to build upon in your project. Perlin noise is smooth and continuous (and repeatable), meaning that it doesn’t exhibit sudden changes. This property makes it ideal for generating realistic, organic-looking textures. I utilized the two dimension noise to subtly shift the positions of the fish particles in each frame (picked in align with p.x and p.y, similar to vertex), creating such a flow field. It took several iterations to get to where it is now:
The ripple effect of mouse interaction
The final effect
2) Process: Technical:
One of the most significant technical challenge I faced was integrating user interaction with the predator. I specified a series of the vertex coordinates that construct the circle shape of predator by connecting them. I added noise function to their coordinates to produce the effect of blurring the edges. After I’ve decided to make the predator move towards the direction of mouse when mouse is pressed, I created two different mode for its movement when mouse is pressed or not inspired by my professor Eric. However, that brings about another problem: its position would reset when switching mode. That’s because I used a different method for the predator compared with the fish. I mapped two dimension noise to the width and height of the canvas using the following code:
translate(noise(inc/5)*width, noise(1000+inc/5)*height);
This approach ensured that the predator remained within the canvas and rarely reached its edges due to the property of noise function. However the shortcomings are also obvious: It would be impossible to control the start position of its motion after switching mode. As a result, I had to make a compromise and adapt the following code for a smoother user experience, even though the predator was more likely to approach the canvas’s edges, diminishing visual comfort:
let xspd = map(noise(inc), 0, 1, -2, 2); let yspd = map(noise(1000 + inc), 0, 1, -2, 2); xx = posX + xspd; yy = posY + yspd; posX = xx; posY = yy; posX = constrain(posX, 0, width); posY = constrain(posY, 0, height);
Sometimes it would be a bit frustrating to make such compromise due to technical limitations, but it is a reflection of the real-world constraints we encounter in the creative process. Even more frustrating, Sometimes it turns out to be a very low-level error after debugging for a long time, like we should use ‘x>a && x<b’ instead of ‘a<x<b’ in p5.js or one local value should have been set as a global value.
3) Reflection and Future Development
I greatly benefited from the extensive feedback provided by my audience during my presentation. I incorporated some of their suggestions, such as eliminating distracting changes in stroke color and making the smaller fish also respond to mouse presses, not just the large predator. Looking ahead, for future improvements, I plan to introduce more diverse creatures into the cyber pond, each with unique behaviors. Additionally, I intend to explore aspects such as growth, reproduction, flocking dynamics, and potentially integrate sound effects to enhance user interaction.
In conclusion, the core objective of this project is to provoke contemplation about ecosystems through a virtual experience, emphasizing the interconnectedness of life within nature. It serves as a reminder that every organism plays a role in sustaining the stability of an ecosystem, and any alteration has the potential to reverberate throughout the entire system.
Tutorial credits:
Coding Challenge #36: Blobby! by The Coding Train [https://www.youtube.com/watch?v=rX5p-QRP6R4&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH&index=44]
Easy Perlin Noise Flow Fields by Barney Codes [https://www.youtube.com/watch?v=sZBfLgfsvSk]