创建圆形游戏板 - 旋转不按我想要的方式工作

Question

我正在尝试用 p5.js 制作游戏板。我希望棋盘的圆形形状总共有 60 块瓷砖，这意味着旋转应该是 6 度（6*60 = 360 度），如果我想要圆形的 60 块瓷砖。

我无法让它工作，尽管我认为我做的是对的。这基本上就是我想要做的：

如果我尝试 rotate(6) 而没有翻译（因为这显然完全行不通），我得到这个结果：

在 https://jsfiddle.net/mortenmoulder/ze6fn3av/ 查看我的代码（您可能想调整 window 的大小并再次点击运行）和这里：

angleMode(DEGREES);
for (let i = 0; i <= 60; i++) {
    //translate(width / 2, height / 2);
    rotate(6);

    rect(centerW + 500, centerH, 100, 50);
}

我做错了什么？

Answer 1

前言：p5.js没用过

无论如何，我调整了你的代码并且非常接近：

var tileInnerWidth = 52;
var tileOuterWidth = 57
var tileHeight = 50;

translate(width / 2, height / 2);
for (let i = 0; i <= 60; i++) {
    quad(-tileOuterWidth/2, centerH, tileOuterWidth/2, centerH, tileInnerWidth/2, centerH - tileHeight,-tileInnerWidth/2,centerH - tileHeight);
    rotate(6);
}

这里是 fiddle：https://jsfiddle.net/mht3o21p/2/

解释一下我在做什么：

有一个单一的平移将原点移动到屏幕中间，这样旋转就可以相对于原点
我画了一个梯形，它位于圆的最底部。它需要水平居中，所以它的 x 坐标除以 2。尺寸是通过反复试验选择的，看起来不错。
我旋转 6 度并重复。

创建圆形游戏板 - 旋转不按我想要的方式工作

Create circular game board - Rotate not working as I want it to

javascript

p5.js