Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

HTML5のCanvasを利用してギターのスケールを表示(完成)

こちらで少し書いたギターのスケールポジションを表示するやつ完成しました。

 

イメージ図。

guitar_scale

 

 

実際使えるやつは以下に置いています。(少しWebのディレクトリを整理しなければ。。)

http://hi-rom.com/labs/guitar/scale_disp/scale.html

 

今回は一応HTML5縛りという感じでやってみましたが、Canvas使っていろいろやるのは結局のところ単なるjavascriptですねw

 

一応ポイント的なものをまとめると

  • Canvasを利用して図形を描画
  • HTMLのフォームの内容に応じて描画内容を変更
  • ギターの各弦の各フレットの音程を2次元配列にあらかじめ格納
  • スケールの音程を配列に格納
  • スケールの音程はフォームのキーに応じて修正
  • 2次元配列に格納された各ポジションの音程とスケールの全音程を比較し、一致するものがあれば●を描画
  • ルート(スケールの配列の一番最初にあるやつ)の場合は赤色で表示

こんなところでしょうか。

 

ざっくりと言ってしまえば二つの配列を比較しているだけのものなのでたいしたものではないですね。

 

でもソースは汚いので見ないでねw

突如現れるグローバル変数とかは自分で書いてても気持ち悪いですが、そんな大したライン数でもないし動いているのでまぁいいかというところです。

 

これがあるとギターでの作曲とかフレーズを考える場合に結構使えるんじゃないかな~などと思ってます。