Mi intención es crear en p5.js, una cuadrícula de 8x8 de rectángulos numerados donde cada uno gira ligeramente sobre su eje central en comparación con el que está a la izquierda, arriba.
El siguiente código indica mis etapas actuales. Mi próximo paso es comprender cómo llenar una matriz con los 64 rectángulos de objetos de una manera simple y clara. De esta manera puedo editar de forma independiente la rotación de cada uno según sea necesario.
Cualquier recurso o código apto para ingeniería inversa sería genial.
CÓDIGO:
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); }; }; };Puede usar push() / pop() para aislar espacios de coordenadas: uno para cada rectángulo. Dentro de cada sistema de coordenadas de rectángulo local, puede translate() a la posición dentro de la cuadrícula y luego rotate() . Tenga en cuenta que el orden de las transformaciones es importante (rotar primero, luego traducir daría un resultado diferente).
Para obtener más información, consulte el tutorial Procesamiento de transformaciones 2D (la misma lógica se aplica en p5.js (simplemente cambie pushMatrix() por push() / popMatrix() por 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> (siéntase libre de reemplazar el argumento de rotate() con cualquier ángulo (incrementado) que tenga sentido para sus propósitos)