// Sept 20 2022

​

// I wanted to create something with squares this time. I was going to creat squares within squares like the image I was inspired by but I ended up confusing myself trying to create it, so I kept it simple. Each time the code is ran, the squares position resets.

​

//Inspiration came from the image on my blog post, The Coding Train videos, and the class lecture notes.

​

let shape; //global variable

let another;

​

function setup() {

  createCanvas(400, 400);

  shape = new Square();

  another = new Square();

  third = new Square();

  fourth = new Square();

}

​

function draw() {

  background(0);

  strokeWeight(4);

  stroke(255);

​

  shape.sizeChange();

  another.sizeChange();

  third.sizeChange();

  fourth.sizeChange();

​

  shape.display();

  another.display();

  third.display();

  fourth.display();

}

​

class Square {

  constructor() {

    // width x,y

    this.w = 10;

    this.x = random(0, width);

    this.y = random(0, height);

  }

​

  sizeChange() {

    this.w *= 1.01; //makes the square one percent bigger

    if (this.w > height / 2) {

      this.w = height / 2;

    } // if it reaches a certain w, it stops there

  }

​

  // I wanted to have the color slowly change to different colors in each square, but I was confused on where to start with that portion of the code and was unable to find good examples.

​

  display() {

    rectMode(CENTER);

    fill("#32a6a8"); // used color picker on google

    square(this.x, this.y, this.w);

  }

}

​