Source

https://editor.p5js.org/generative-design/sketches/P_1_1_1_01

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

​

const FRAME_RATE = 10.2;

var canvasMargin = 20 ;

var numGrid = 24;

var stepX, stepY ;

​

function setup(){

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

  createCanvas(minHW,minHW);  

  frameRate(FRAME_RATE);

  noStroke();

  colorMode(HSB, width, height, 100);

  background(170, 300, 300, 100);

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

  let side = width - (2 * canvasMargin) ;

  stepX =  int( side  / numGrid );

  stepY = stepX ;

  print( "W", width, (2 * canvasMargin) + (stepX * numGrid) ) ;

  print( "H", height, (2 * canvasMargin) + (stepY * numGrid) ) ;  

  let diff = width - ( (2 * canvasMargin) + (stepX * numGrid) ) ;

  canvasMargin += diff / 2  ;

​

  print( "W2", width, (2 * canvasMargin) + (stepX * numGrid) ) ;

  print( "H2", height, (2 * canvasMargin) + (stepY * numGrid) ) ;    

}

​

function draw(){

​

  drawGrid( canvasMargin ) ;  

  noLoop() ;

}

​

function drawGrid( cv ) {

  for (var gridY=cv; gridY < height ; gridY+=stepY){

    for (var gridX=cv; gridX < width ; gridX+=stepX){     

      fill(gridX, height - gridY, 100);

      rect(gridX, gridY, stepX, stepY);   

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

        fill(170, 300, 300, 100);

        rect(gridX, gridY, stepX, stepY);    

​

      } 

​

    }      

​

  }  

}

​

​

​