My intent is to create in p5.js, an 8x8 grid of numbered rectangles where each is slightly rotated on its center axis compared to the one on its left, above it.
The code below indicates my current stages. My next step is to understand how to populate an array with the 64 object rectangles in a simple and clear way. This way I can independently edit the rotation of each one as needed.
Any resources or reverse engineer-able code would be great.
CODE:
function setup() {
createCanvas(700, 700);
colorMode(HSB);
background(120, 40, 50, 0.6);
rectMode(CENTER);
textAlign(CENTER)
//positioning values
posX = width/9;
posY = height/9;
//function to consecutively count to 64, with eight numbers on each column and row
for (num=1; num<9; num++){
for (row=1;row<9; row++){
text(str(num-8 + row*8),num*posX,posY*row);
};
};
noFill();
for (num=1; num<9; num++){
for (row=1;row<9; row++){
rect(num*posX,row*posY,50,50);
};
};
};
You can use push() / pop() to isolate coordinate spaces: one for each rectangle. Within each local rectangle coordinate system you can translate() to the position within the grid then rotate(). Bare in mind the order of transformations is important (rotating first, then translating would yield a different result.
For more info see the Processing 2D Transformations tutorial
(the same logic applies in p5.js (simply swap pushMatrix() for push()/popMatrix() for pop())):
function setup() {
createCanvas(700, 700);
colorMode(HSB);
background(120, 40, 50, 0.6);
rectMode(CENTER);
textAlign(CENTER)
//positioning values
posX = width/9;
posY = height/9;
//function to consecutively count to 64, with eight numbers on each column and row
for (num=1; num<9; num++){
for (row=1;row<9; row++){
text(str(num-8 + row*8),num*posX,posY*row);
};
};
noFill();
for (num=1; num<9; num++){
for (row=1;row<9; row++){
push();
translate(num*posX,row*posY);
rotate(radians(row + num));
rect(0, 0,50,50);
pop();
};
};
};<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>(feel free to replace the rotate() argument with whichever (incremented) angle makes sense for your purposes)