For this assignment, I took inspiration from the shape and motion of the slime block in Minecraft.
The main features I wanted to replicate were the bouncing motions, the size change, and the transparency. I also added click input just to make the art more interactive within the p5js context. My first iteration did not have any class or array and just had the basic idea laid out, starting with transparent squares that are random in size, being placed in repetition following the mouse xy location while pressed.
Going from there, I had to make a class for my rectangle which would have a constructor that holds all the features I want to attribute to my rectangles such as: size, color, speed, location and gravity.
To recreate the bouncing motion, I incorporated the loop from this code. I then arranged each function within my class (display and move) to instantiate the bouncing movement and rectangle display within each rectangle that is created going through my array rectangles [].
After understanding the basics of organizing my class and functions to create the bouncing outcome I was looking for, I decided to play with the gravity variable and see what would happen if I used noise instead.
For my last iteration, I replaced gravity with noise which visually doesn’t make much of a difference. However, at a closer look, the bounce of the rectangles in relation to each other look much more organic in comparison to using gravity, whilst still being random as well.