I started my animation with moving clouds from left to right. I used a variable “cloudXStart” to keep track of where the X coordinate of the first cloud was. After the clouds had fully run their cycle (I knew this was roughly 2.5 times the total X or width distance, I would set the cloudXStart to repeat by pushing it back to -50. The reason why I set it to -50 instead of 0 was because I wanted the center of the cloud to be before the left border and slowly move into the visible frame.
// Reset clouds to move again if it's been a while
if (cloudXStart > width * 2.5) cloudXStart = -50;
At first, I tried to draw a cloud using the beginShape() function, but the points kept ending up in spots I didn’t intend for them to be in, so I ended up using a series of ellipses to construct each cloud instead.
Picture of hand drawing work in progress.
To get a random hand color every time the program resets, I created variables that would be declared using the random() function inside setup().
//generate random hand color
handColorR = random(0,255);
handColorG = random(0,255);
handColorB = random(0,255);
Then, I would draw out the actual shapes in the hand with
fill(handColorR, handColorG, handColorB);
At first, I tried to rotate the thumb shape of the rand after drawing out the (rounded corner) rectangle shape. However, it kept rotating the thumb around the point (0,0). I’m not sure how to fix it, so I just left the thumb flat horizontal without rotating for now.
Next I created a blue sea rectangle and a fish swimming inside it. The fish’s color will be the opposite of the hand’s color (so it will be randomized each time as well). At first, I set the fish expression to be black, but realized that it was difficult to see when the fish was randomly generated to be a darker color. Because of this, I set the expression to be white, if the R G B numbers were collectively below a certain point.
// Make features white if color of fish is dark
let fishDarkColor = false;
if (handColorR > 100 && handColorG > 100 && handColorB > 100)
fishDarkColor = true;
For the mouse interaction, if you click and hold the mouse, the fish will smile. It is recommended to click and drag the mouse over the fish’s body back and forth, as if you were petting it.
