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

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

*/

​

//define variables

let cellSize;

let pg;

//set seed to 100

let seed = 100;

​

//initiate setup function

function setup() {

  //create canvas to window width and height

  createCanvas(windowWidth, windowHeight);

  //change mode to place images from their center

  imageMode(CENTER);

  //run makeTileDesign function

  makeTileDesign();

}

​

//start draw loop

function draw() {

  //set background to white

  background(255);

  //set seed to random

  randomSeed(seed);

​

  //start for loop, define x to half of cellSize, add cellSize until x reaches width

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

  //start for loop, define y to half of cellSize, add cellSize until y reaches height

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

      //start transformation

      push();

      //move shape to x, y coordinates

      translate(x, y);

      //define angle to PI times two multiplied by a rounded random number of 1 to 5 divided by 4

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

      //rotate by angle degree

      rotate(angle);

      // draw the off-screen pixel graphics onto the canvas

      // just like an image file

      image(pg, 0, 0);

      //finish transform

      pop();

    }

  }

}

​

//initiate makeTileDesign function

function makeTileDesign() {

  //set cellSize to 1/5 of the width or height

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

  // create an extra buffer of pixels "off screen"

  // on which to draw shapes (just like drawing on the canvas)

  // it needs a width and height (just like the canvas)

  pg = createGraphics(cellSize, cellSize);

  // draw an "outline" around it

  pg.noFill();

  pg.strokeWeight(2)

  pg.square(0, 0, cellSize);

  // draw a circle on it 

  pg.fill(255);

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

​

}

​

//randomize the seed if the mouse is pressed

function mousePressed() {

  seed = random(50000);

}

​

//resize the canvas and rerun the tile design if window is resized

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  makeTileDesign();

}