Inspired by Vera Molnár's Du Cycle: “Carrés Non-Concentriques” (1974)

*/

​

//setup function

function setup() {

//make a scalable canvas to the window size

  createCanvas(windowWidth, windowHeight);

//set background color to black

  background(255);

//sets rectangles to be drawn from their center point instead of the top left corner

  rectMode(CENTER);

//no color will be filled

  noFill();

//sets the outline color to white

//a border of 2 thickness is set

​

//define and set minSize var to width or height depending on which one is smaller

  let minSize = min(width, height);

  console.log('width:' + width);

  console.log('height:' + height);

  console.log('minSize:' + minSize);

//define and set amount to 30% of minSize

  let amount = minSize / 25;

  console.log('amount:' + amount);

​

//for loop, when i is less than amount, add one each loop, i.e. run until i == 30.

  for (let i = 1; i < amount; i++) {

    console.log('i:' + i);

    stroke(random(100),random(100),random(100));

    strokeWeight(random(8));

//define and set x to a random value between half of width minus each loop amount, and half of width plus each loop amount.

    let x = random(width / 2 - amount, width / 2 + amount);

    console.log('x:' + x);

//define and set x to a random value between half of height minus each loop amount, and half of height plus each loop amount.

    let y = random(height / 2 - amount, height / 2 + amount);

    console.log('y:' + y);

//make a square with the random x and y values with a size of amount multiplied by each i loop value

    ellipse(x, y, amount * i);

  }

}

//empty draw function

function draw() {}