Inspired by Zdeněk Sýkora's Red-Green Structure 1, 1968, and based on b2renger's offscreen graphics 6:

https://b2renger.github.io/p5js_patterns/pg_6/ 

​

AND 

​

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

*/

​

let cellSize;

let pg;

let seed = 100;

let squareCount = 1; 

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  makeTileDesign();

}

​

function draw() {

  background(255);

  randomSeed(seed);

​

  for (let x = cellSize / 2; x <= width; x += cellSize) {

    for (let y = cellSize / 2; y <= height; y += cellSize) {

      push();

      translate(x, y);

      let angle = (TWO_PI * round(random(1, 5))) / 4;

      rotate(angle);

      image(pg, 0, 0);

      pop();

    }

  }

}

​

function makeTileDesign() {

  cellSize = min(width / 5, height / 5);

​

  // Create an off-screen buffer for the tile

  pg = createGraphics(cellSize, cellSize);

  pg.noFill();

  pg.strokeWeight(2);

  pg.stroke(0);

​

  // Draw concentric squares inside each tile

  for (let i = 0; i < squareCount; i++) {

    let size = (cellSize / squareCount) * (i + 1);

    pg.square(pg.width / 2 - size / 2, pg.height / 2 - size / 2, size);

  }

​

  //   // Add a central black circle

  //   pg.noFill(0);

  //   pg.circle(pg.width / 2, pg.height / 2, pg.width / 4);

}

​

function mousePressed() {

  squareCount++; // Increase number of squares with each press

  seed = random(50000); // Change random seed for variation

  makeTileDesign(); // Redraw the tiles with the new square count

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  makeTileDesign();

}

​