p5.js 中的独立对象

Question

我的意图是在 p5.js 中创建一个 8x8 网格，其中包含编号的矩形，其中每个矩形与其左侧上方的相比，在其中心轴上略微旋转。

下面的代码表示我目前的阶段。我的下一步是了解如何以简单明了的方式用 64 个对象矩形填充数组。这样我就可以根据需要独立编辑每一个的旋转。

任何资源或可逆向工程代码都会很棒。

代码：

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);
    };
  };
};

Answer 1

您可以使用 push() / pop() 来隔离坐标空间：每个矩形一个。在每个局部矩形坐标系中，您可以 translate() 到网格中的位置然后 rotate()。请记住转换的顺序很重要（先旋转，然后平移会产生不同的结果。

有关详细信息，请参阅 Processing 2D Transformations 教程（同样的逻辑适用于 p5.js（只需将 pushMatrix() 换成 push()/popMatrix() 换成 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>

（随意将 rotate() 参数替换为对您的目的有意义的（增加的）角度）

p5.js 中的独立对象

Independent objects in p5.js

javascript

p5.js