円形のゲームボードを作成する - 回転しないように回転させる

Question

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); 
} 

私は間違って何をしていますか？

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); 
} 

ここでフィドルです：https://jsfiddle.net/mht3o21p/2/

私がやっているかを説明するには：

• を単一に変換があります原点を画面の中央に移動すると、その回転は相対回転になります。
• 私は台形を描画します円の一番下にあります。それは水平にセンタリングされる必要があるので、x座標は2で除算されます。サイズは試行錯誤で選択され、見た目は良く見えます。
• 私は6度回転して繰り返します。