Cissy Xie, the Life cycle of the jellyfish
Link: https://editor.p5js.org/LafouCC/sketches/s87RdlOVf
Part I
- Elevator Pitch
The project life cycle of the jellyfish aims to create a visualization of the jellyfish’s life as the user can interact with the jellyfish at each stage of the cycle. It aims to get the user fully immersed in the process and can arouse their interest in getting to know the jellyfish by adding interactivity besides the visual animation.
2. Abstract
This project is created from my interest in sea creatures as I think the sea is full of mystery. And I think the old-fashion educational documentaries for sea creatures are kind of boring, and they are passive learning for the viewers. So, my project aims to allow viewers to explore sea creatures actively and engagingly. It includes three stages of the cycle: fertilization, young jellyfish (larvas), and adult jellyfish. For the first stage, the user can control the eggs and let them be fertilized by the sperm. And when all the eggs are fertilized, they will enter the second stage which the fertilized eggs will turn into young jellyfishes (larvas), then after some time when the user clicks on one of the young jellyfishes, it will zoom in and focus on the involving process of that single jellyfish as it turns into an adult jellyfish. Then the user can interact with it by clicking on it.
3. Images
Full demonstration video:
Part II
1. Design and composition
(1) Design:
I think the highlight of the design is the adult jellyfish as it is the very first thing I designed and created. I learned from others’ work and made a few adjustments.
The first adjustment is the main colors of my work as it is mainly in black and white. Although I know that there are many different colors of jellyfish I think the white with a certain transparency would be a nice contrast towards the black background creating an effect of the deep dark ocean with suddenly some elf-like creature floating and glowing in white.
The second adjustment is the movement of the jellyfish’s head. Instead of creating randomness of the movement, I looked at a lot of videos about jellyfish and created a fixed movement as if it were swimming upwards.
The third adjustment is the details of the adult jellyfish, for example, the edge of the jellyfish head has some thin tentacles swinging and the long tentacles are moving freely.
One thing I wanted to try but failed is that I wanted to utilize spring forces when creating the long tentacles so that it will feel like the jellyfish is swimming upwards with the help of the long tentacles, but I found it out of my range of knowledge, for I can’t understand a lot of functions in the example code in the book The Nature of Code despite I do understand the theory behind the spring force.
Here is an example I found online for what I want to achieve: (jellyfish)
Also, another thing about the design I think needs improvement is the young jellyfish as it needs more details and it currently looked more like a flower instead of a jellyfish.
(2) User interaction:
A lot of the user interactions were added after the user testing. Because, before the user testing, I have four separate codes featuring each stage of the jellyfish (three stages and one is for the bubble effect in the ocean). Then I need to figure out how to jump between each stage: do I let them happen automatically or does the user need to press the button that says “next stage”? One of the LA suggests that instead of pressing the “next stage” button, I should let the jellyfish grow by themselves because that’s how it works in nature. So, in the end, I let the creature grow on its own but only under a certain condition created by the user (e.g. all the eggs are fertilized) can it enter the next stage. And I add a timer at the top left corner indicating the time.
2. Technical
The first technical challenge that I face is how to create the head of the adult jellyfish by using curveVertex.
Second, how to make the sperm head towards the direction opposite to its tails when the rotation of the sperm is random. I did this by finding a relationship between the Vy, Vx, and the rotation angle.
Third, the interaction between the two classes. The egg needs to change color when being hit by the sperm and the first sperm that hits the egg needs to be eliminated. The solution for this is to send the entire array of “sperms” to every egg and decide if this egg collides with any of the sperm. If so, set the “objects[i].isdone==true” (in this case: sperms[i].isdone==true), and then, by using the “sperms.splice(0, 1)”, we can splice the sperm from the array.
eggs[i].checkCollision(sperms);
class Egg {
...
checkCollision(objects) {
if (this.isCollided == false) {
for (let i = 0; i < objects.length; i++) {
let oneSperm = objects[i];
let distance = dist(this.xpos, this.ypos, oneSperm.xpos, oneSperm.ypos);
if (distance < this.size - 15) {
this.isCollided = true;
oneSperm.isDone = true;
}
}
}
}
...
}
Fourth, how to zoom in on a single jellyfish. The way to do this is, first, to translate the original point to where the target is and then use the scale() to enlarge the canvas based on that point. And then translate again to place the target in the middle of the canvas. So after all this, it will feel like we are zooming in on this single jellyfish. Then, to make this process more smooth and natural, I utilized lerp(), so that the change(zoom in) will happen more gradually.
//zoom in effect
push();
let lerpPct = 0.01;
scenePosX1 = lerp(scenePosX1, width / 2, lerpPct);
scenePosY1 = lerp(scenePosY1, height / 2, lerpPct);
translate(scenePosX1, scenePosY1);
scale(sceneScale);
sceneScale += 0.01;
sceneScale = constrain(sceneScale, 1.0, 4.0);
scenePosX2 = lerp(scenePosX2, -eggs[0].xpos, lerpPct);
scenePosY2 = lerp(scenePosY2, -eggs[0].ypos, lerpPct);
translate(scenePosX2, scenePosY2);
for (let i = 0; i < eggs.length; i++) { eggs[i].display(); }
pop();
let bgAlpha = map(sceneScale, 3, 4, 0, 255, true); background(0, bgAlpha);
if (sceneScale >= 4.0) {
stage = 2;
}
3. Reflection and future development
(1) Reflections:
Overall speaking I think I did a good job on the design of the adult jellyfish, and the interaction of different stages is pretty fun.
(2) Future development:
a. Improvements are needed for finer design of the young jellyfish
b. The way to narrate the story needs to improve and be less dependent on the texts. Also, the user sometimes doesn’t know what to do to trigger the next stage (e.g. one has to click on a single jellyfish to zoom in but there is no indicator for the user to click).
c. The purpose of the project can be used towards scientific education and thus to get the users more immersed, it would be better to have a fullscreen.
d. Because it is a cycle of the jellyfish’s life, it would be better to have the adult jellyfish produce eggs and sperm and then it will be back into the first stage again. And also add more stages to the cycle.