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

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  rectMode(CENTER);
  noFill();
  stroke(255);
  strokeWeight(2);
  
  let minSize = min(width, height);
  let amount = minSize / 30;

  for (let i = 1; i < amount; i++) {
    let x = random(width / 2 - amount, width / 2 + amount);
    let y = random(height / 2 - amount, height / 2 + amount);
    square(x, y, amount * i);
  }
}

function draw() {}


/* ------------↓↓ My comment here ↓↓----------*/





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

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  rectMode(CENTER);
  noFill();
  stroke(255);
  strokeWeight(2);
  
  //black background
  //rectengle, only white stroke
  
  let minSize = min(width, height);
  // compare width and height, chose the small one
  
  let amount = minSize / 30;
  // divide the shorter edge by 30 (height or width)
  
  
  // assign a variable, loop from 1 to the shorter edge/30
  for (let i = 1; i < amount; i++) {
    
    // define these squares center point (rectMode)
    // their center will be close to the center of the canvas 
    // between center point +- amount
    let x = random(width / 2 - amount, width / 2 + amount);
    let y = random(height / 2 - amount, height / 2 + amount);
    
    // draw the square for (variable) times
    // because the i will increase from 1 to this variable
    square(x, y, amount * i);
  }
}

//to understand how the for loop work here, 
//we can change the amount to the some different number. 
//these squares will draw from the center with the smaller size to the bigger one.
// ( because the size = amount * i, and the i increased in the for loop)

function draw() {}








// !!!!!!!!!!!!!!!Modify!!!!!!!!!!!!//

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

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(20);
  
  rectMode(CENTER);
  fill(255,5);
  stroke(255);
  strokeWeight(0.2);
  
  //black background
  //rectengle, only white stroke
  
    
  
}

//to understand how the for loop work here, we can change the amount to the some different number. we can notice that these squares will draw from the center with the smaller size to the bigger one.( because the size = amount * i, and the i increased in the for loop)

function draw() {
  background(0,map(mouseY,0,height,50,200));
  
  let minSize = min(width, height);
  // compare width and height, chose the small one
  
  let amount = minSize / 30;
  // divide the shorter edge by 30 (height or width)
  
  
  // assign a variable, loop from 1 to the shorter edge/30
  for (let i = 1; i < amount; i++) {
    
    // define these squares center point (rectMode)
    // their center will be close to the center of the canvas 
    // between center point +- amount
    let x = random(width / 2 - amount, width / 2 + amount);
    let y = random(height / 2 - amount, height / 2 + amount);
    
    // draw the square for (variable) times
    // because the i will increase from 1 to this variable
  square(x, y, amount * i);
  }
}