genit-jp / pianoroll

ピアノロール

説明：音楽データのルール

BPM とは

BPM は、beat per minutes の略です。1 分間にいくつのビート(拍)が入るかという情報です。例えば、bpm:120 だと、1beat が 0.5 秒となります。

Tick とは

Tick は 1beat を 480 分割した単位です。

データ説明

キー名	単位	説明
bpm	BPM	beat/minutes
note	数値	音の高さを表します
tick	tick	音の開始位置を表します
duration	tick	音の開始位置からの長さを表します

データ構造

{
  "bpm": 87,
  "notes": [
    { "note": 59, "tick": 720, "duration": 160 },
    { "note": 61, "tick": 880, "duration": 80 },
    ...
  ]
}

問題１：JSON データに基づいて画像を生成してください(pianoroll)

仕様

• データは ./seq.json です
• 横軸を時間(tick)、縦軸を音の高さ(note)とします
• 横軸は、1 秒を 100 ピクセルとします
• 縦軸は、1 で 20 ピクセルとします
• ノートは#00ff00ff で塗りつぶしてください
• 120tick 毎に#202020ff の縦線を引いてください
• 480tick 毎に#808080ff の縦線を引いてください
• 20 ピクセル毎に #202020ff の横線を引いてください
• ※線はすべて１ピクセルとする

開発

npm install

ヒント

sample.png が生成結果です。

画像データについて