[編集モード] 拍子を正多角形と線で表示

指定した拍子を、正多角形と音ゲーのノーツ風の線の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]に描画起点設定。
      頂点リストを多角形描画。
      キャンバス状態復元。
    ここまで。
  ここまで。
ここまで。

表示更新。

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] 拍子を正多角形と線で表示

素材のアップロード