javascript - 在 P5.js 中的网格内旋转对象

Question

我正在尝试使用合适的 OOP 方法让对象在网格的单元格内单独旋转。我当前的结果是围绕 0、0 引用点旋转所有对象，而不是在其自己的单元格内旋转每个对象。

当然，需要的是一个正确的翻译函数，但是当我尝试在 innerSquare 函数中应用它时，translate(x, y); - 这会导致更奇怪的行为。

我仍处于早期学习阶段 - 任何帮助将不胜感激!

代码可以在这里查看: https://editor.p5js.org/knectar/sketches/BJpI5_BG4

或者直接:

var cols, rows;
var w = 50;
var grid = [];

function setup() {
  createCanvas(400, 400);

// load the col / row vars with values that dynamically read from the canvas.
  cols = floor(width/w);
  rows = floor(height/w);

// load the the array with generic row and column values
    for (var j = 0; j < rows; j++){
      for (var i = 0; i < cols; i++){

        // And for each, create an object instance based on the Shape class.
        var shape = new Shape(i,j);
        grid.push(shape);
      }
    }
}

function draw() {
  background(51);
  frameRate(2);

// draw grid (outer squares)
  for (var i = 0; i < grid.length; i++) {
    grid[i].outerGrid();

  }

// draw inner squares
  for (var i = 0; i < grid.length; i++) {
    grid[i].innerSquare();
  }
}

function Shape(i, j) {
  this.i = i;
  this.j = j;
  var x = this.i*w;
  var y = this.j*w;

  this.outerGrid = function () {
    push();
      stroke(200, 0, 255);
      noFill();
      rect(x, y, w, w);
      translate(x, y);
    pop();
   }

  this.innerSquare = function () {
//    translate(x, y);
    noFill();
    stroke(150, 0, 255);
    rect(x+10, y+10, w-20, w-20);
    rotate(radians(frameCount));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Answer 1

如果你想围绕一个轴心旋转一个矩形，那么你已经以这种方式绘制矩形，矩形的中心位于位置 (0, 0):

let rect_w = (w-20);
rect(-rect_w/2, -rect_w/2, rect_w, rect_w);

围绕 (0, 0) 旋转 ( rotate() ) 矩形，这也是矩形的中心:

rotate(angle);

平移(translate())矩形到它的最终位置:

let tx = x+10 + rect_w / 2;
let ty = y+10 + rect_w / 2;

translate(tx, ty);

矩阵堆栈必须在此操作之前保存(push())并在之后恢复(pop())。必须以相反的顺序对当前模型矩阵进行操作:

例如

this.innerSquare = function () {
    noFill();
    stroke(150, 0, 255);
    let ts = millis()/1000.0;
    let angle = radians(ts*2.0*Math.PI*5.0); // or "frameCount"
    let rect_w = (w-20);
    let tx = x+10 + rect_w / 2;
    let ty = y+10 + rect_w / 2;
    push();
        translate(tx, ty);
        rotate(angle);
        rect(-rect_w/2, -rect_w/2, rect_w, rect_w);
    pop();
}

查看示例，其中我将建议的更改应用于您的原始代码:

var cols, rows;
var w = 50;
var grid = [];

function setup() {
  createCanvas(400, 400);

// load the col / row vars with values that dynamically read from the canvas.
  cols = floor(width/w);
  rows = floor(height/w);

// load the the array with generic row and column values
    for (var j = 0; j < rows; j++){
      for (var i = 0; i < cols; i++){

        // And for each, create an object instance based on the Shape class.
        var shape = new Shape(i,j);
        grid.push(shape);
      }
    }
}

function draw() {
  background(51);
  //frameRate(2);

// draw grid (outer squares)
  for (var i = 0; i < grid.length; i++) {
    grid[i].outerGrid();

  }

// draw inner squares
  for (var i = 0; i < grid.length; i++) {
    grid[i].innerSquare();
  }
}

function Shape(i, j) {
  this.i = i;
  this.j = j;
  var x = this.i*w;
  var y = this.j*w;

  this.outerGrid = function () {
    push();
      stroke(200, 0, 255);
      noFill();
      rect(x, y, w, w);
      translate(x, y);
    pop();
   }

    this.innerSquare = function () {
        noFill();
        stroke(150, 0, 255);
        let ts = millis()/1000.0;
        let angle = radians(ts*2.0*Math.PI*5.0);
        let rect_w = (w-20);
        let tx = x+10 + rect_w / 2;
        let ty = y+10 + rect_w / 2;
        push();
            translate(tx, ty);
            rotate(angle);
            rect(-rect_w/2, -rect_w/2, rect_w, rect_w);
        pop();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>