CYW_Week4-4

/*
Inspired by Vera Molnár's Un, deux, trois
Based on a translation from Generative Artistry:
https://generativeartistry.com/tutorials/un-deux-trois/
*/



//stroke cap! never changed it before ><
function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeCap(ROUND);
  strokeWeight(4);
}



function draw() {
  background(255);

  //chose a smaller one from height or width
  let step = min(width / 15, height / 15);

  // like grid, add one step for one times, 
  //in the for loop it will add until it reach to the height or width 

  for (let y = step; y < height - step; y += step) {
    for (let x = step; x < width - step; x += step) {

      // seperate it into three levels
      // and draw different lines

      //DrawLine function with 4 parameters

      if (y < height / 3) {
        drawLine(x, y, step, [0.5]);
      } else if (y < (height / 3) * 2) {
        drawLine(x, y, step, [0.2, 0.8]);
      } else {
        drawLine(x, y, step, [0.1, 0.5, 0.9]);
      }
    }
  }
  noLoop();
}

function drawLine(_x, _y, _step, positions) {

  push();
  

  //interesting! translate + half of step ,rotate, then translate back! 
  translate(   _x + _step / 2,    _y + _step / 2   );
  rotate(random(5));
  translate(-_step / 2, -_step / 2);


  // loop by it self!
  for (let i = 0; i <= positions.length; i++) {

    //x are the same-> horizontal
    //y 0 to step
    line( positions[i] * _step, 
          0, 
          positions[i] * _step, 
          _step);
  }
  
  
  

  pop();
}

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