For this assignment, our task was to create a simple artwork using loops and our knowledge from previous classes.
My approach began with crafting an array of circles. Initially, I programmed the display of 10 circles at random locations on the screen. However, to add an interactive element, I modified the code so that numerous circles would appear with each mouse click.
The circles are endowed with distinct properties like colors, speeds, and diameters. I achieved this by employing a random function that assigns different values randomly. This randomness adds variety, ensuring each circle appears unique with its own color, speed, and diameter, enhancing the overall visual appeal of the artwork.
To bring these circles to life, I employed a for loop to create and animate them. I made sure they stayed within the designated canvas space by setting limits on their movement preventing them from disappearing off-screen.
As the artwork evolved, I noticed that the screen became somewhat cluttered after multiple attempts by a user to create circles. To address this, I introduced an option allowing users to clear the screen by pressing the ‘c’ key. This feature enabled users to start afresh without needing to manually restart the entire program.
// Declares a variable and initializes it as an empty array let circles = []; function setup() { createCanvas(600, 600); } function draw() { background(220); // generate circles on mouse click if (mouseIsPressed) { // create a circle let newCircle = { x: mouseX, y: mouseY, diameter: random(10, 50), speedX: random(-2, 2), speedY: random(-2, 2), // Generate random color r: random(255), g: random(255), b: random(255) }; // Newly created circle object is added to the circles array circles.push(newCircle); } // This for loop iterates over each circle object stored in the circles array and updates its position for (let i = 0; i < circles.length; i++) { circles[i].x += circles[i].speedX; circles[i].y += circles[i].speedY; // Bounce off walls if (circles[i].x <= 0 || circles[i].x >= width) { circles[i].speedX *= -1; } if (circles[i].y <= 0 || circles[i].y >= height) { circles[i].speedY *= -1; } // Set fill color fill(circles[i].r, circles[i].g, circles[i].b); // Draw circle ellipse(circles[i].x, circles[i].y, circles[i].diameter); } } function keyPressed() { // Clear the circles array when the 'c' key is pressed if (key === 'c' || key === 'C') { circles = []; } }
Reflections:
I thoroughly enjoyed working on this project, drawing mainly from the knowledge acquired in class. However, I felt compelled to explore further, leading me to incorporate an additional function into the code. This experience not only allowed me to apply class learnings but also pushed me to expand my understanding. Moving forward, I am excited about the possibility of engaging with more advanced projects, leveraging a broader knowledge base to enhance my skills.