Assignment 3 – Generative Artwork

Concept:

For this project I did my research more about generative artwork and I saw this picture from the following website: https://panopticon.am/generative-art/ Inspiration for my project

I really got inspired by this artwork, so I decided to create my project based on this piece. My idea was to loop squares on a black screen with random colors and when the mouse is clicked the squares start moving and if the mouse is clicked again the squares move faster, there are three different speeds and every time you click the speed changes from 1 to 3 to 10 to 1 and the cycle repeats.

Highlighted code:

// MovingSquare class
class MovingSquare {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = 0; // Initial horizontal speed
    this.speedY = 0; // Initial vertical speed
  }
  
  // Method to set the speed of the square
  setSpeed(speedX, speedY) {
    this.speedX = speedX;
    this.speedY = speedY;
  }
  
  // Move the square based on its current speed
  move() {
    // Move the square
    this.x += this.speedX;
    this.y += this.speedY;
    
    // Bounce back when hitting the canvas edges
    if (this.x <= 0 || this.x + this.size >= width) {
      this.speedX *= -1; 
    }
    
    if (this.y <= 0 || this.y + this.size >= height) {
      this.speedY *= -1; 
    }
  }

The part of code I am particularly proud of is the MovingSquare class. I am proud of this code because I was having difficulties while I was doing the in class exercise that was related to the classes. It was still quite difficult to use the classes in this project but with trial and error I did it.

Future Improvements:

For the future I wish I could bring the animation back to its static position where all the squares were aligned in a loop function after the mouse is pressed for the fourth time, I tried to do it in this project but it was quite hard to figure it out.