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

我正在尝试使用体面的OOP方法使对象在网格单元内单独旋转。我当前的结果是围绕0，0参考点旋转所有对象，而不是在它自己的单元格中旋转每个对象

当然，需要的是一个正确的translate函数，但是当我尝试在innerSquare函数translate（x，y）；-这导致了更奇怪的行为

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

可在此处查看代码：

或直接：

var列、行；
var w=50；
var网格=[]；
函数设置（）{
createCanvas（400400）；
//使用从画布动态读取的值加载列/行变量。
cols=地板（宽度/w）；
行=楼层（高度/w）；
//使用常规行和列值加载数组
对于（var j=0；j

---

如果要围绕轴旋转矩形，则必须以这种方式绘制，即矩形的中心位于位置（0，0）：

let rect_w=（w-20）；
rect（-rect_w/2，-rect_w/2，rect_w，rect_w）；

围绕（0，0）旋转（）矩形，该矩形也是矩形的中心：

旋转（角度）；

平移（）矩形到其最终位置：

设tx=x+10+rect_w/2；
设ty=y+10+rect_w/2；
翻译（tx，ty）；

矩阵堆栈必须在执行此操作之前保存（），然后恢复（）。对当前模型矩阵的操作必须按相反顺序执行：

e、 g

this.innerSquare=函数（）{
noFill（）；
冲程（150,025）；
设ts=millis（）/1000.0；
设角度=弧度（ts*2.0*Math.PI*5.0）；//或“帧数”
设rect_w=（w-20）；
设tx=x+10+rect_w/2；
设ty=y+10+rect_w/2；
推（）；
翻译（tx，ty）；
旋转（角度）；
rect（-rect_w/2，-rect_w/2，rect_w，rect_w）；
pop（）；
}

请参见示例，其中我将建议的更改应用于原始代码：

var列、行；
var w=50；
var网格=[]；
函数设置（）{
createCanvas（400400）；
//使用从画布动态读取的值加载列/行变量。
cols=地板（宽度/w）；
行=楼层（高度/w）；
//使用常规行和列值加载数组
对于（var j=0；j

---

非常感谢您的解释和工作代码。运行完美！