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

旋转（rotate()）围绕（0，0）的矩形，它也是矩形的中心：

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/0.6.1/p5.js"></script>

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

1 个答案: