* grid beaucoup plus propre

* 

**************************************************/

​

const FRAME_RATE = 10.2;

var canvasMargin = 10 ; // % du carré consacré à marge gauche

var numGrid = 100 ;

var step, side ;

​

function setup() {

  let minHW = min([windowHeight-10,windowWidth-10,1080])

  createCanvas(minHW,minHW);

  colorMode(HSB, 360, 100, 100, 100);

  frameRate(FRAME_RATE);

  noStroke();

  // on a formé un canevas carré, quel est son côté ?

  canvasMargin = (canvasMargin * width) / 100 ;

  side = width - (2 * canvasMargin) ;

  step =  int( side  / numGrid );

  // recentrer

  canvasMargin = (width - numGrid * step ) / 2 ;

​

  background(170, 50, 50, 100); // vert pale

​

}

​

function draw(){

​

  drawGrid( canvasMargin ) ;  

  noLoop() ;

}

​

function drawGrid( cv ) {

  let maxY = canvasMargin + numGrid * step ;

  let maxX = maxY ;

  for (var gridY=cv; gridY < maxY ; gridY+=step){

    for (var gridX=cv; gridX < maxX ; gridX+=step){     

      let h = map(gridX, canvasMargin, maxX, 0, 360);

      let s = map(gridY, canvasMargin, maxY, 70, 30);

      fill(h, s, 100, 100);

      rect(gridX, gridY, step, step);   

      if( (step + gridY + cv > height) || (step + gridX + cv > width) ) {

        fill(170, 300, 300, 100);

        rect(gridX, gridY, step, step);    

​

      } 

​

    }      

​

  }  

}

​