My concept:
For this week’s assignment, I created a generative artwork using arrays and objects. I followed the bouncing bubbles example we worked on in class, but I changed it to make something more colorful and fun. The main idea is that the user can click anywhere on the canvas to add bouncing circles. Each circle has a different size, speed, and color because all of those values are random. I wanted to keep the idea simple while practicing the coding concepts we learned, especially storing objects in arrays and updating them inside a loop.
My concept was to make something interactive that didn’t rely on complicated visuals but still felt fun to use. Since we learned how to create our own objects and store them in arrays, I wanted to build a sketch where the user could generate many circles without manually drawing each one. The bouncing bubbles demo from class inspired me a lot, especially the way each object moves on its own. I also liked the idea of randomness and repetition, which are common in generative art. I wanted the user to help create the final image, so every time the sketch runs, the result is different since they could be different colors and sizes.
How the Project Works:
I started by creating an empty array called shapes, which stores all the circles that appear on the screen:
let shapes = [];
Whenever the user clicks, a new Shape object is created at the mouse position. I used .push() to add it to the array so the sketch can keep track of every circle the user creates. I wrote a Shape class that gives each circle its own position, speed, size, and color. The class also includes functions that make the circle move, bounce off the edges of the canvas, and display itself.
The sketch also includes a simple interaction where pressing any key removes the last circle from the array. This gives the user some control over how crowded the canvas becomes.
Inside the draw() function, I used a for‑loop to update every circle in the array. The loop calls move(), bounce(), and display() for each object. This is what makes the animation run smoothly and allows all the circles to move at the same time.
Embedded Sketch:
Code Highlight:
One part of the code I’m proud of is the loop that updates all the shapes:
for (let i = 0; i < shapes.length; i++) {
shapes[i].move();
shapes[i].bounce();
shapes[i].display();
}
This section shows how useful it is to create your own objects. Instead of writing separate code for each circle, one loop controls everything. It keeps the sketch organized and makes it easy to add or remove shapes.
This assignment really helped me understand how arrays and objects work together in a sketch. In the beginning, I kept forgetting small things like using .push() or making sure my variable names matched exactly, and those tiny mistakes caused a lot of errors. Since JavaScript is case‑sensitive, even one wrong letter would break the whole thing, so I had to get used to being more careful. Once I understood how everything connected, the array, the class, and the loop, the project became much easier and honestly more fun to work on. I enjoyed playing around with random values for the colors, sizes, and speeds because it made the artwork feel more alive and unpredictable.
If I had more time, I would love to expand this sketch by adding different types of shapes instead of just circles, or maybe adding fading trails behind the shapes as they move. I also think it would be interesting to experiment with sound interaction or simple physics like gravity to make the movement feel more dynamic. Overall, this assignment made the concepts we learned in class feel much clearer, and it showed me how these techniques can be used creatively instead of just technically.
- p5.js Reference –
random()https://p5js.org/reference/p5/random/ - p5.js Reference –
ellipse()https://p5js.org/reference/p5/ellipse/ - p5.js Reference –
color()https://p5js.org/reference/p5/color/ - Reference –
mousePressed()https://p5js.org/reference/p5/mousePressed/ - p5.js Reference –
keyPressed()https://p5js.org/reference/p5/keyPressed/ - Class example: Bouncing Bubbles (Intro to IM)
- I used AI only to help me fix small mistakes in my code, especially when I had red error lines and couldn’t figure out what was causing them.