创建圆形游戏板 - 旋转无法按我的意愿工作答案

【问题标题】：Create circular game board - Rotate not working as I want it to创建圆形游戏板 - 旋转无法按我的意愿工作
【发布时间】：2017-09-13 08:47:17
【问题描述】：

我正在尝试使用 p5.js 制作游戏板。我希望板子的圆形总共有 60 个瓷砖，这意味着如果我想要 60 个圆形瓷砖，旋转应该是 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);
}

我做错了什么？

【问题讨论】：

标签： javascript p5.js

【解决方案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);
}

这是一个小提琴：https://jsfiddle.net/mht3o21p/2/

解释我在做什么：

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

【讨论】：

感谢您的帮助，但它们不像我的示例那样彼此相邻。老实说，看起来也像随机数。
我已经尽可能地改进了它，同时仍然使用矩形。为了让它完美，你需要梯形
是的，这应该可以解决问题。查看最新版本的小提琴，看看它是否满足您的需求。像 52 和 57 这样的一些值看起来有点神奇，我不太满意，但我给它们起了名字来表明它们的目的。
哦，是的，这看起来非常好。非常感谢！我希望有一种数学方法来计算它，但不幸的是，我现在想不出来。
我知道如何近似计算它，它应该足以满足您的情况。如果我们假设内边缘和外边缘是完美的圆（它们不是，这是近似值的来源），那么tileOuterWidth = (centerH * 2 * Math.PI) / 60。这给出了 57.54，这与我通过反复试验选择的结果接近。 tileInnerWidth = ((centerH - tileHeight) * 2 * Math.PI) / 60 的结果为 52.36，再次接近我的试错值。