拍子を正多角形と線で表示 📖

指定した拍子を、正多角形と音ゲーのノーツ風の線の2通りで表示する。ポリリリリズムの攻略に……？

プログラム: (→大)
「DIV」のDOM部品作成。 それに{ "display": "inline-grid", "grid-template-rows": "repeat(2, auto)", "grid-template-columns": "repeat(5, 5em)", }をDOMスタイル一括設定。 それにDOM親部品設定。 拍リストは空配列。 裏リストは空配列。 番号で0から4まで繰り返す 番号＋2のエディタ作成。 それの「type」に「number」をDOM属性設定。 それの「min」に「0」をDOM属性設定。 それに{ "grid-column": 番号+1, "grid-row": 1, }をDOMスタイル一括設定。 {関数}表示更新でそれの変更された時。 拍リストにそれを配列追加。 「裏」のチェックボックス作成。 それに{ "grid-column": 番号+1, "grid-row": 2, }をDOMスタイル一括設定。 {関数}表示更新でそれの変更された時。 裏リストにそれを配列追加。 ここまで。 ●表示更新とは 全描画クリア。 黒色に線色設定。 「#00000000」に塗色設定。 番号で0から4まで繰り返す 拍リスト@番号のテキスト取得して整数変換。 定数の拍はそれ。 定数の裏は(裏リスト@番号)$選択状態。 もし、NOT(拍をNAN判定)かつ(拍が1以上)ならば 定数の頂点リストは空配列。 キャンバス状態保存。 3に線太さ設定。 [番号×100＋50, 110]に描画起点設定。 頂点で0から(拍－1)まで繰り返す 変数の角度は頂点を拍で割る。 もし、裏ならば、角度は角度に0.5÷拍を足す。 もし、角度が1以上ならば、角度は角度から1を引く。 [-45, (1－角度)×280]から[45, (1－角度)×280]へ線描画。 頂点リストに[45×SIN(角度×2×PI), －45×COS(角度×2×PI)]を配列追加。 ここまで。 「#D0D0D0」に線色設定。 [-45, 0]から[45, 0]へ線描画。 もし、裏ならば、[-45, 280]から[45, 280]へ線描画。 キャンバス状態復元。 キャンバス状態保存。 1に線太さ設定。 [番号×100＋50, 50]に描画起点設定。 頂点リストを多角形描画。 キャンバス状態復元。 ここまで。 ここまで。 ここまで。 表示更新。