Assignment 2 – The Beauty of Straight Lines | Haziel

For this assignment, I aimed to create an artwork based on geometric shapes, especially squares and rectangles. For that, I searched for famous artists that use this kind of technique and found the work of Piet Mondrian, which became the inspiration for this project. At first, my goal was to create a Canva of size 1920, 1080 composed by several squares that give the sensation of overlapping colors, as you can see in the following image:

For this I used for loops, constants, and the full screen option when the mouse is pressed, following this tutorial.

However, I was not satisfied with the result, so I decided to modify it and create something more visually appealing. That’s when I thought of the tesseract concept we have in movies, such as Interstellar, that also illustrate this kind of chaos and order composed by geometric shapes. That’s when I worked to add some animation and make the squares revolve in an elliptical orbit.

For that, I used variables to determine the number of squares, the speed factor, square size, etc. And I’m particularly proud of the following snippet code, as it allowed me to add a bit of interactivity because when the user clicks on the screen, it increases the speed of the squares, giving a cool motion effect as you can see in my sketch as well:

// Increase speed factor if mouse is pressed, otherwise reset speed factor
  if (mouseIsPressed) {
    speedFactor = 0.5; 
  } else {
    speedFactor = 0.05; 
  }
  
  // Loop through each square
  for (let i = 0; i < numSquares; i++) {
    // Calculate x and y positions based on sine and cosine functions
    let x = map(sin(frameCount * speedFactor + i), -1, 1, 0, width - squareSize);
    let y = map(cos(frameCount * speedFactor + i), -1, 1, 0, height - squareSize);

Reflection: While I successfully implemented for loops, constants, and mouse interactions, exploring additional programming techniques and functionalities could enhance the depth and complexity of future projects. This could involve delving into advanced animation techniques or incorporating other libraries for more intricate visual effects.