p5.j​​s 中的獨立對象

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() 。 記住轉換的順序很重要（先旋轉，然后翻譯會產生不同的結果。

有關更多信息，請參閱處理 2D 轉換教程（相同的邏輯適用於 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()參數）