Overall this was quite difficult for me – organizing it into functions and classes made it all the more confusing to understand the structure of how the code is being read and displayed.
I knew that I wanted to recreate my childhood toy, the bouncy smiley ball – as shown here:
But I couldn’t figure out how to make the smiley face as part of the Ball class – nonetheless I wanted to make sure I incorporated the colorful aspect of the balls and play around with the gravity and speed to get the bounciness that I know. So I made sure to make my Ball class and in the draw() section push a new ball into my array so that it would create many balls on screen –
Here is what the final product looks like – it looks really fun when you spam click the canvas and place the balls at different heights.
Hi Lily, to show the smiley face instead of the circle, change your display function in your class to draw an image (https://p5js.org/reference/#/p5/image) and not an ellipse. Load a smiley face image in preload, and then you can change the color of an image with the tint function. It’s that simple!