xxxxxxxxxx
61
/**************************************************
* 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);
}
}
}
}