For the assignment “Imaginary Creature”, I decided to recreate the movement of a jellyfish.
For the setup, I set x = 0, xSpeed = 3 (which will partly control how fast my jellyfish will move), and set the frameRate.
In order to set the conditions of how the jellyfish will move and where it is located, I set sinValue = sin(frameCount * 0.025). I then set the angle as random so the position won’t be as easily “predicted”, and translated the entire model by the width/2 and height/2 + sinValue * 100, which makes the jellyfish’s x-coordinates in the middle while allowing the y-coordinates to follow the sin curve. I also set the rotate factor by sinValue * PI/6, which will allow the jellyfish to tilt accordingly.
However, how did I get it to stay on the screen and essentially “bounce” off the edges of the canvas?
That’s where this if() conditional statement comes in. Originally, I had a really complicated “direction false === true” statement, so setting the x and xSpeed simplified it. The xSpeed controls the speed of the jellyfish at certain x-values, and the conditional statement also sets the bounds for how much the jellyfish can move. Because I wanted the jellyfish to bounce the other way when it hit the right or left of the screen, multiplying xSpeed by -1 makes it go the opposite direction.
The bezier is the shape of the legs. By assigning different sinValues (sinVal1, sinVal2, sinVal3, etc.) and adding it to the x-coordinate of the second anchor point, I am able to basically randomize/mix the movement of each individual leg to mimic the movement of an actual jellyfish.
This is only part of the body’s code, but to sum it up I achieved the 3D effect of the body/head of the jellyfish by layering lots of ellipses and changing the values accordingly to create the perfect curve.
Here’s my final product: moving jellyfish