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