見出し画像

間違いだらけのピアノイラスト ピアノの鍵盤を計算で描くプログラム (JavaScript)

身の回りの本などに描かれたピアノの鍵盤のイラスト、ほとんどが間違っているようです。ピアノを題材にした漫画アニメ、ピアノ教則本でさえ!
イラストなのでピアノと分かればいいのですが、正確なピアノの鍵盤を描画するプログラム(JavaScript)を作ってみました。

ピアノの鍵盤イラスト

普通はこんなイメージ?

よく見るピアノイラスト - 思い込み
※イラストはイメージです

ほとんどの人が鍵盤のイラストを描くとこうなると思います。これでもいいのですが、気になります。

等分割 プログラム失敗例

プログラム失敗例 等分割 白鍵1/7 黒鍵1/12

なんかずれてる。単純に1オクターブを白鍵7等分、黒鍵12等分の幅ではないようです。

ほぼ正確なピアノ鍵盤

ほぼ正確なピアノ鍵盤

使っているの電子ピアノ(KORG)の鍵盤とほぼ同じになりました。他のピアノの鍵盤も同じはずです。ほぼ⇒白鍵の幅が違います。実物は、白鍵の幅が同じ、クリアランスで調整しているようです(メーカーによって違うかも)。

鍵盤の描き方(1オクターブ)

1オクターブを12分割、これが黒鍵の幅になります。
12分割したものを、左5つと右7つにグループ分け
左5つの幅を3等分 ドレミの白鍵 5/36 < 1/7
右7つの幅と4等分 ファソラシの白鍵 7/48 > 1/7
黒鍵は高さの白鍵の約2/3
12等分した2,4,7,9,11番目に黒鍵


プログラム JavaScript

ピアノの鍵盤を計算で描くプログラム

上記の画像を生成したプログラムです。
実行するにはローカルHTTPサーバー(アプリ)とWebブラウザが必要です。
有料記事の内容は
ファイル3つ
index.html  index.css main.js
のソースコード
とファイル3つをまとめたZipファイル(ダウンロード)
です。
ソースコードの再配布禁止、利用は自己責任でお願いします。
Windows10/11のEdge、Chromeで動作確認しています。

プログラム

ソースコード

 main.js
JavaScriptのソースコードです。
drawKeyboard() 正しい鍵盤
drawKeyboardIllust() よくあるイラスト
drawKeyboardBadProgram() プログラム失敗作

ここから先は

5,733字 / 1ファイル

¥ 300

この記事が役に立ったという方は、サポートお願いします。今後の製作の励みになります。