本文介绍了在P5.js中旋转网格内的对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用像样的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>推荐答案
如果要围绕轴心旋转矩形，则以这种方式绘制矩形，即矩形的中心位于位置(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>这篇关于在P5.js中旋转网格内的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！