/*
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/
*/


//pg?

let cellSize;
let pg;
let seed = 100;

// image!
// a function called make tile, must repeat some image to create tile
function setup() {
  createCanvas(windowWidth, windowHeight);
  imageMode(CENTER);
  makeTileDesign();
}


function draw() {
  background(255);
  randomSeed(seed);
  
  //nested loop
  for (let x = cellSize/2; x <= width; x += cellSize) {
    for (let y = cellSize/2; y <= height; y += cellSize) {
      
      push();
      //rotate random degree and repeat the image
      //x.y are used in translate, rather than directly assign to the location
      translate(x, y);
      let angle = (TWO_PI * round(random(1, 5))) / 4;
      rotate(angle);
      // draw the off-screen pixel graphics onto the canvas
      // just like an image file
      
      //okay take a look what make Tile do
      image(pg, 0, 0);
      pop();
    }
  }
}

function makeTileDesign() {
  
  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)
  
  //so the new layer of canvas!
  
  pg = createGraphics(cellSize, cellSize);
  // draw an "outline" around it
  // Is the noFill() need a parameter ??
  pg.noFill(0);
  pg.strokeWeight(2)
  pg.square(0, 0, cellSize);
  // draw a circle on it 
  pg.fill(0);
  pg.circle(0, pg.height / 2, pg.width);

}

function mousePressed() {
  seed = random(50000);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  makeTileDesign();
}