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

Question

我正在尝试用 p5.js 制作一个游戏板。我希望棋盘的圆形形状总共有 60 个图 block ，这意味着如果我想要圆形的 60 个图 block ，旋转应该为 6 度(6*60 = 360 度)。

尽管我认为我做得对，但我无法让它发挥作用。这本质上就是我想做的:

如果我尝试使用 rotate(6) 并且不进行翻译(因为这显然完全不起作用)，我会得到以下结果:

查看我的代码 https://jsfiddle.net/mortenmoulder/ze6fn3av/ (您可能想调整窗口大小并再次点击运行)这里:

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 度并重复。