Вращение объектов в сетке в P5.js - PullRequest
Новая
       7

Вращение объектов в сетке в P5.js

0 голосов
/ 11 января 2019

Я пытаюсь использовать приличный ООП подход, чтобы заставить объекты вращаться индивидуально внутри ячеек сетки. Мой текущий результат вращает все объекты вокруг 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>

1 Ответ

0 голосов
/ 11 января 2019

Если вы хотите повернуть прямоугольник вокруг оси, вы должны нарисовать таким образом, чтобы центр прямоугольника находился в положении (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>
...