So this week in ICM class we learned some techniques to make our work flow in p5.js more organized and clean. We learned how to define and call functions and objects so that we could have modularity and reusability in our code.
I created an animated under the sea environment that you can check you here:
To create the sea itself I drew one curve that looks like a wave using the bezier shape. After that, I created a nested loop with this wave to fill the entire canvas. To add the idea of movement, I randomized the colors of the shape within a certain range (using the map function) and also added movement to it using the “sin” function.
The shark at the bottom is an image I uploaded to the sketch and that I am moving horizontally with the help of the “if” function.
The fishes were the trickiest part. I wanted to add a bunch of them but I wanted them to be slightly different from each other. Let’s say that they are from the same specie but, different individuals. I also wanted to pass an idea that they were moving without actually having to change their position in the canvas. To do all of that I created a function outside the draw loop and called this function several times (each time with a slight variation) inside draw.
So in the end, the fishes were a function. The sea and the shark on the other hand were objects with functions inside.
I also added a crazy psychedelic fish that changes it’s color and that appears at your mouse position only when you click (surprise!). For that I used the mousePressed function.