【Part 5】Processingでギターフレットボードから単純なTAB譜を表示するアプリを作ろう
【Part 5】Create an app that displays simple TAB notation from guitar fretboard in Processing

YouTubeにアップした動画、「Part 5 - Create an app that displays simple TAB notation from guitar fretboard in Processing」の補足説明の記事です。

Here's a little more about the "Part 5 - Create an app that displays simple TAB notation from guitar fretboard in Processing" video I uploaded to YouTube.

まずは上の動画の趣旨を軽く説明します。 Processingを使用してギターのフレットボードから簡単なTAB譜を描画するアプリケーションを作成します。 このアプリケーションの利点は、ギターの弦と音階の関係をギターフレットボードから直接理解でき、1つずつ画像ファイルとして保存できることです。

First, let me briefly explain the purpose of the video above. Create an application to draw a simple TAB notation from a guitar fretboard with Processing. The advantage of this application is that you can understand the relationship between guitar strings and musical scales directly from the guitar fretboard and save them one by one as image files.

簡単に誰でもすぐに作れます。 第5回のビデオでは、第4回のアプリの状態からさらに機能を追加しました。そして、TAB譜や五線譜などの描画の改善等も行い、様々な音符の表記ができるような下準備をします。

It's very easy to make this. In the fifth video, I added more features from the state of the fourth app, then I improved the drawing of TAB and staff notation, and I created the prototype code to allow various note notations.

全体の説明は動画に任せるとして、補足が必要だろうと思われる部分を説明していきMASU。

I'll leave the entire explanation to the video, but I'll explain the parts that I think need to be supplemented.

過去に似たアプリをP5.jsとPythonを使ってブラウザに表示させるものを作ったのでこちらの記事も参考にしてみてくだちぃ。

I've created a similar app in the past that uses P5.js and Python to display in the browser, so check out this post.

まずギターの弦毎に重複するノートが存在するので、 五線譜に対応させる為、Notes配列変数を用意します。

First of all, since there is a duplicate note for each guitar string, I prepare a notes array variable to correspond to the staff notation.

String[] notes = {"E2", "F2", "F#2", "G2", "G#2", "A2", "A#2", "B2", "C3", "C#3", "D3", "D#3", "E3", "F3", "F#3", "G3", "G#3", "A3", "A#3", "B3", "C4", "C#4", "D4", "D#4", "E4", "F4", "F#4", "G4", "G#4", "A4", "A#4", "B4", "C5", "C#5", "D5", "D#5", "E5", "F5", "F#5", "G5", "G#5", "A5", "A#5", "B5", "C6", "C#6", "D6"};

PVector型の二次元のcGNtoStaffNotation配列変数を用意します。 これは五線譜を16等分して、その16本の各ライン上に、 音符を表示できるようにするために、各座標を記録させておく為の配列変数です。

Declare a two-dimensional cGNtoStaffNotation array variable of thpe PVector. This is an array variable to store each staff coordinate that divided into 16 equal parts so that notes can be displayed on each of the 16 lines.

PVector[][] cGNtoStaffNotation = new PVector[notes.length][16];

checkNoteDurationには音符の長さが入ります。 0は何も表示させない。 1なら全音符、2なら2分音符といった具合です。

checkNoteDuration contains the length of the note. A value of 0 indicates nothing is displayed. 1 for the whole note, 2 for the Half note, and so on.

int checkNoteDuration = 0;

int型配列変数のeditableLineNumsは先程のcheckNoteDurationの値の分だけ編集できる線の番号を作ります。 つまり、4なら、「１、５、９、１３」といった具合に五線譜を4等分します。

The int array variable editableLineNums creates line numbers that can be edited for the previous checkNoteDuration value. That is, if it is 4, divide the staff into 4 equal parts like [1, 5, 9, 13].

int[] editableLineNums;

dChordName変数はギターコードのコードネームが入り、 その文字を利用して、ギターのフレット番号や五線譜への音符表示を行えるようにします。

The dChordName variable takes stores the chord name of the guitar chord and used it to display notes on the guitar fret number or staff notation.

String dChordName = "";

ProcessingはJavaで作られているので、Javaのライブラリが使えます。そこでHashMapとういう便利な機能を使用して、キーワードから値を操作できるようにします。

Processing is built in Java, so you can use Java libraries. A handy feature called HashMap lets you manipulate values from keywords.

import java.util.Map;
import java.util.LinkedHashMap;
Map<String,Integer> noteDurations = new LinkedHashMap<String,Integer>(){
  {
    put("Whole note", 1);
    put("Half note", 2);
    put("Quarter note", 4);
    put("8th note", 8);
    put("16th note", 16);
  }
};

Map<String,Boolean> controlButtons = new LinkedHashMap<String,Boolean>(){
  {
    put("Backward", false);
    put("Record", false);
    put("Forward", false);
    put("Down Stroke", false);
    put("Up Stroke", false);
  }
};

こうすれば、noteDurations変数からキーワードをFor文で一つずつ取り出すことができます。

This way, you can retrieve the keywords from the noteDurations variable one by one in the For statement.

for (String nd : noteDurations.keySet())

取り出したキーワードをそのまま使用したり、getメソッドを使用して、値を取り出すこともできます。

You can use the retrieved keywords as is, or you can use the get method to retrieve the values.

fill(#1F0F04);
rect(rectX, rectY, rectW, rectH);
fill(#BC9C3D);
text(nd, rectX, rectY);

テキスト関数とRect関数を使ってボタンを作成したり、 SwitchーCase文を使って値によって処理を分けたりすることができます。

You can use the text and rect functions to create buttons, or you can use the switch-case statement to separate what you want to do by value.

switch (noteDurations.get(nd)) {
  case 1:
    editableLineNums = new int[1];
    editableLineNums[0] = 0;
    break;

マウスの判定方法は前回のとおりです。

The method of judging the mouse is the same as before.

例えばマウスがコントロールボタンの「QuarterNotes」をクリックすると、 先程のnoteDurations変数からキーワードを取り出し、その値が４の時の処理を行います。

For example, if you click the [Quarter Note] control button with the mouse, you get the keyword from the noteDuration variable above and perform what you would do if the value were 4.

するとEditableLinesNumsは五線譜を4分割して、そのライン上で音符が表示されるようにラインナンバーを設定します。

EditableLineNums then divides the staff and tab notation into four, and sets the line number so that notes and fret number appear on that line.

その状態でコードボタンの一つをクリックすると、 ライン上にコードの音符が表示される仕組みです。

Then click one of the chord buttons. The notes of the guitar chord appear on the line.

ここで問題があります。 それは、今回のコードの場合、4つのライン上全てに同じコードが表示されてしまうことと、例えば4分音符を入力した後に、8分音符や16分音符等を入力できないことです。 そこで、次回ではこの問題を解決していきたいと思います。

Here's the problem. In this case, the same chord displayed on all 4 lines, and you cannot enter 8th or 16th notes after entering a Quarter note, for example. Therefore, I would like to solve this problem next time.

この動画とアプリは現在進行形で作っています。

This video and the app are in progress.

P5.jsの時より、機能が複雑になっていきそうなので多少時間がかかる可能性があります。

It may take some time since the functions seem to be more complicated than in P5.js.

ま、兎に角長くなってしまったのでPart6へ続きます。

In any case, since the blog post is long, so continues on to Part 6.