Photo by
jolly_stilt713
なでしこさんで、拍子を正多角形と線で表示
今週はヴァイスシュヴァルツポータブルをあまりやらなかったし、書きたいことに関する情報を仕入れたけど……結局頭が悪くてクズだからか、書くための作業に時間を割り当てることはできなかったな……
まあ、雑プログラムで繋ぐ一択かな……頭が悪いから……
今回やったこと
なでしこで、指定した拍子を
ポリリリリズム風の正多角形
音ゲーのノーツ風の線
の2通りの表現で表示する。
裏拍にも対応しているが、今のところ休符や連符には非対応。
プログラム
拍子を正多角形と線で表示 (プログラム貯蔵庫)
ポイント
画面の用意
Web簡易エディタでデフォルトで用意されている、横500×縦400ピクセルのキャンバスを用いる。
「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スタイル一括設定。
{関数}表示更新でそれの変更された時。
裏リストにそれを配列追加。
ここまで。拍の入力欄を5個並べる。
ポリリリリズムの「ジェイコブコリアーチャレンジ」のお題である 2:3:4:5:6 をデフォルトにした。
入力欄の部品を、後で参照できるように配列に格納する。
さらに、入力値が変化した時、表示を更新するようにする。
表示の更新
●表示更新とは
全描画クリア。
黒色に線色設定。
「#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]に描画起点設定。
頂点リストを多角形描画。
キャンバス状態復元。
ここまで。
ここまで。
ここまで。
表示更新。用意した座標を用いて、キャンバス上部の多角形を描画する。
最後に、この関数「表示更新」を起動時に実行し、初期値を用いた描画が行われるようにする。
おわりに
なでしこで、指定の拍子を正多角形と線で表示できた。
ポリリリリズムの図形だけではわかりにくい押し方を音ゲー風にビジュアライズし、ポリリリリズムの攻略に……繋がるかな……？
コメント