For this assignment, I wanted to combine both loops and if/else statements to create a simple interactive and somewhat animated piece. The main concept of the sketch is to create a kind of geometric art piece that includes elements of interactivity and animation, while simultaneously being simple and minimalistic. This can be seen through the color and the simple grid choice that I decided to create. The concept of simplicity can be further seen through the intentional placement of the rectangles. I did not want the different rectangles to go over the main grid, which is why I made it so it only filled the gaps between the grid of rectangles.
The process of creating this sketch involved a lot of practicing outside of class, specifically with for and while loops. I will say that I did struggle to understand how each of the loops worked at first. However, as I started to practice and learn from my mistakes, I was able to understand how the grids worked and eventually got to create my desired visual outcome of a grid of rectangles, in which the rectangles are whole and take up all the space that they can on the canvas. With that being said, the code I am most proud of has to be the ‘animation’ element of my sketch due to the fact that I learned so much about the importance of defining each element carefully. I, initially, had trouble with having the rectangles move both vertically and horizontally but after discovering the root of my problem, which was not defining each properly and carefully, I was able to successfully create movement on my canvas.
Here is the code that demonstrates this:
//Rectangle 1
stroke(200);
strokeWeight(2);
noFill();
rect(x, 110, 380, 30); //Dimensions of first rectangle.
if (x > width || x < 0) {
speedX = -speedX; //Reverse direction of first triangle to create a bounce effect when it hits the start or end of the canvas.
}
x = x + speedX; //Allows for first triangle to move.
//Rectangle 2
stroke(200);
strokeWeight(2);
noFill();
rect(110, y, 30, 380); //Dimensions of second rectangle.
if ((y>height) || (y<0) ) {
speedY = -speedY; //Reverse direction of second triangle to create a bounce effect when it hits the start or end of the canvas.
}
y = y + speedY; //Allows for second triangle to move.
//Rectangle 3
stroke(255);
strokeWeight(2);
rect(a, 260, 380, 30); //Dimensions of third rectangle.
if (a > width || a < 0) {
speedA = -speedA; //Reverse direction of third triangle to create a bounce effect when it hits the start or end of the canvas.
}
a = a + speedA; //Allows for third triangle to move.
//Rectangle 4
stroke(255);
strokeWeight(2);
rect(260, b, 30, 380); //Dimensions of fourth rectangle.
if ((b>height) || (b<0) ) {
speedB = -speedB; //Reverse direction of fourth triangle to create a bounce effect when it hits the start or end of the canvas.
}
b = b + speedB; //Allows for fourth triangle to move.
My final sketch:
In terms of improvements, I think I want to work on playing around with different ‘animation’ styles or effects. I feel like if I had more time to sort of practice and play around with these functions, I would be able to add more effects to my sketch, potentially making it even more dynamic. Reflecting on my sketch and progress overall, this assignment has most definitely made me more comfortable with using different shapes and parameters, something I initially struggled with. I also was able to successfully add in effects and create User Interface Design as I added elements of interactivity to my sketch this time around. I really enjoyed experimenting with the skills I’ve learned thus far, and I am genuinely happy with the user interactivity and somewhat complex design I managed to create.