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.
