Published Date : 2020年7月22日11:42

Create an app to create your own guitar tab using [Processing]

This blog has an English translation


Here's a little more about the [Create an app to create your own guitar tab using [Processing]] video I uploaded to YouTube.


Responsive image

まずは上の動画の趣旨を軽く説明します。 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.


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


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.


Table of Contents

Part 1 -
Part 1 -


This time, I will create the Fret board part of the guitar that is necessary for the application.


First, let's take a quick look as the default variables.

float leftX, rightX, topLeftY, bottomLeftY, topRightY, bottomRightY;

これはフレットボードの四隅の座標です。 この4つの変数が基本中の基本です。

These are the coordinates of the four corners of the fretboard. These four variables are the basics of this application.

float widthSpacing, heightSpacing;


These are variables that determines how far away the fretboard is from the edge of the screen.

float boardLength, headSideLength, bodySideLength;

ボードの長さ、ヘッド側の長さ、所謂ナット部分です。 そしてボディ側の長さの変数です。

These are variables that the length of the board, the head side, the so-called nut part, and the body side length.

float boardRatio, headSideRatio, bodySideRatio;
boardRatio = 0.91;
headSideRatio = 0.45;
bodySideRatio = 0.6;

これらは画面の幅と縦の長さと間隔の値からフレットボード、 ヘッド側、ボディ側の長さを決める為に使われる比率です。 よりギータのフレットボードらしい形になるように手元にあるギターを実際に測ってみて、そのフレットボードの比率を参考にしました。

These are based on the screen width and height and spacing values. The ratio used to determine the length of the head and body sides. I actually measured the guitar I had and referred to the ratio of the fretboard.

float[] spacingRatioOfFrets = {0, 3.4, 3.4, 3.4, 3.1, 2.8, 2.6, 2.6, 2.2, 2.2, 2.1, 2.0, 1.8, 1.8, 1.6, 1.6, 1.5, 1.4, 1.3, 1.3, 1.3, 1.1, 1};

続いてはフレットの並びの間隔の比率です。 これも実際測った結果、この値になってます。

Next is the ratio of fret spacing. This is also this value as a result of actually measuring.

String[][] standardTuning = {{"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"}, 
                    {"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"}, 
                    {"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"}, 
                    {"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"}, 
                    {"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"}, 
                    {"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"}};

次にギターの弦を基本のチューニングにした場合の音階を表す配列です。 チューニングや音階に関しては様々な意見がありますが、基本的に多く使われている音階を選んでます。

Next, it is an array that represents the scale when the guitar strings are tuned as the standard tuning. There are various opinions about tuning and musical scales, but I basically choose the most commonly used musical scales.

int sixStrings;
PVector[][] fretsAndNotes;


These are variables that representing the number of guitar strings and for recording the position of the strings touching the fret as a two-dimentional array of PVector type for which it ts easy to be linked with TAB later.


Next, the procedure for creating a fretboard in the setup function is explained with a diagram.


Next, I'll show you how to store information in an array about where the frets and strings meet to determine the guitar notes display and the area that responds when you click, and how the frets are made.

前回の記事で説明したように、座標が簡単に求められない場合は まず最初に起点となるXとYと終点のXとYを決めてしまいます。

As I explained in the previous article, if the coordinates are not easily obtained, First, determine the starting points X and Y and the ending points X and Y.


In this case, the coordinates of the four corners of the fretboard are determined, so it is easy to obtain.

そこからアークタンジェント2関数とディスティネーション関数を利用して アングルと弦の長さを求めます。

Then use the arctangent2 and the destination functions to find the angle and the guitar string length.


Then use cos and sin and divide the length of the string by the ratio of the fretboard to the fret to get the coordinates of the midpoint of the string touching the fret.


All you have to do is draw a line, ellipse, or text in place using the line, ellipse, or text functions.

Part 2 -
Part 2 -

パート2では少しコードを整理して、ControlP5(By Andreas Schlegel)を使用してギターノートを表示/非表示にするコードを作成します。 さらに、ギターノートのテキストの近くをクリックするとテキストの色が赤になるようなコードを書いてみますた。

This time, I'll clean up the code a bit and create a code that shows and hides the guitar note using ControlP5 (By Andreas Schlegel). In addition, I will try to write a code that turns the text color to red when I click near the text on the guitar note.


First, let's start with a quick overview of installing and using ControlP5.

インストールは簡単。 ファイルの上部にある、「Sketch」を選択、「Import Library」を選択、「Add Library」を選択、検索窓に「controlP5」と入力。 でてきたライブラリを選択して、インストールボタンを押すだけ。

Installation is simple. Select "Sketch" located at the top, select "Import Library", select "Add Library" and enter "ControlP5" in the search window. Simply select the library you created and press the install button.

このライブラリの作者であるAndreas Schlegelに感謝して使いましょう。

Thanks to Andreas Schlegel, the author of this library.

ControlP5の使い方ですが、今回は動画に出ているトグルスイッチの作り方を説明します。 ボタンを作成するにしても、大体同じような手順です。 詳しい使い方は作者のgithubページに載っています。

This time, I will explain how to make the toggle switch shown in the video. Creating a button is a similar precess. More details on how to use it can be found on the author's github page.

import controlP5.*;
ControlP5 cp5;
cp5 = new ControlP5(this);

まず、ライブラリをインポートする。 この「*」マークは「controlP5パッケージ」が持っているクラス全部を指している。 要するに一つ一つクラスを指名してインポートするのではなく まとめてインポートしてしまおうということ。


First, import the library. The "*" mark refers to all the classes that "controlP5 package" has. So instead of picking and importing classes one by one, The idea is to import them all together.

You can find out what class files are being imported by looking inside the author's github page "src/controlP5".


After you import the classes, you create an instance of CP5 using the imported classes.

このコンストラクターに渡す引数の「this」はJAVAアプレットを指し、 簡単に言ってしまえば、書いているスケッチ自体のことです。 こうすることでProcessingが用意している様々な機能にCP5インスタンスはアクセスでき、 それによって便利なGUIの機能を提供しているとも言えます。

The "this" argument passed to this constructor points to a JAVA applet. To put it simply, it is the sketch you are writing. This gives the CP5 instance access to the useful features provided by Processing, which in turn provides GUI functionality.



I will explain from the top.


addToggle adds a toggle switch to the sketch.


("toggleNotes") is the name of the function that performs the operation you want to perform when this toggle is switched.


setPosition is where the toggle switch should be placed on the screen.


setSize is the size (Width, Height) of the toggle switch.


setValue is the initial value of the switch. The toggle switch is either true or false because it switches between true and false.


setCaptionLabel allows you to display characters under toggle switches.


setMode can change how it looks. if you choose SWITCH, it will look like this time.



There is also mode called DEFAULT. like this.


このようにDEFAULT MODEは色で切り替わる見た目になります。

In this way, "DEFAULT MODE" switches on and off by color.


There are many other functions such as changing colors and fonts, so please try each one.


Next, A brief explanation of how to adjust the display of text.


The text function augument of the Processing is text(Text, x coordinate, y coordinate).


The textAlign function is changes the position of the X and Y coordinates.


This is what it looks like in animation

textAlign function

The following is a brief explanation of how to determine the mouse position range.

フレットと円が触れる場所のX座標から、円のX軸の直径を引けば、左側のXの判定座標になり、 フレットと円が触れる場所のX座標が右側のXの判定座標、 フレットと円が触れる場所のY座標から、円のY軸の直径の半分を引けば、上側のYの判定座標 フレットと円が触れる場所のY座標から、円のY軸の直径の半分を足せば、下側のYの判定座標になります。

If the diameter of the X axis of the circle is subtracted from the X coordinate of the place where the fret and the circle touch, it becomes the decision coordinate of X on the left side. The X coordinate of the place where the fret and the circle touch is the determination coordinate of X on the right side. If you subtract half the diameter of the Y axis of the circle from the Y coordinate of the location where the fret and the circle touch, you get the upper Y decision coordinate. If you coordinate where the fret and circle touch, you get the bottom Y decision coordinate.


If the mouse is clicked within that range, the text and guitar strings will change color


Then, I'll show you how to use ControlP5 in conjunction with Processing.



When creating the CP5 toggle switch described above, I specified a name.

これを関数名にして、行いたい処理を指定します。 その前にトグルスイッチと連動するBoolean変数を作りましょう。

Use this as a function name to specify what you want to do. Before that, let's create a Boolean variable that works with the toggle switch.

// toggle display for the notes on a guitar
boolean toggleDisplayNotes = false;
void toggleNotes(boolean theFlag){
    if(theFlag==true) {
        toggleDisplayNotes = true;
    } else {
        toggleDisplayNotes = false;

関数に渡すのはTrueかFalseのBoolean変数です。 これがTrueであればTrue、そうでないならFalseです。 トグルスイッチのONとOFFの結果を変数に格納するものだと思ってください。

You must pass a Boolean variable, either True or False, to the function. True if this is true, False otherwise. Think of it as storing the ON and OFF results of a toggle switch in a variable.

void darwGuitarNotes(){
    // Adding the ability to toggle the guitar note display
    if (toggleDisplayNotes) {


Then, when the true or false value of toggleDisplayNotes is True, the guitar notes is displayed.

最後に、音符の非表示と表示は上手くいきましたが、テキストが同じ弦で反応してしまうこと、 クリックした時の動作がおかしい等の失敗の原因と簡単な解決策について説明します。

Eventually, I managed to show and hide the notes, but when I clicked the mouse, the text changed color on the same guitar string, and sometimes it didn't respond or was delayed, resulting in strange behavior. This section describes the causes of failure and simple solutions.

Processingではループ関数(draw function)内で絵を描画しています。 この時、darwGuitarNotes関数はFor文で一気にギターノートの描画をしています。 そしてdarwGuitarNotes関数の処理が終わったら、またループを始めて処理を繰り返します。

Processing draws a figure inside a loop function (draw function). At this time, the drawGuitarNotes function used the For statement to draw the guitar notes all at once. After processing the drawGuitarNotes function, start the loop again and repeat.


The problem is that the guitar note is not displayed or updated until the For statement is completed.

このループ速度は人間には感知できないぐらい超高速で行われいています。 クリックした時がたまたまdarwGuitarNotes関数の中で、かつクリックしたテキストの描画処理の直前であれば 反応しますが、それ以降はまた次のdarwGuitarNotes関数の処理が始まるまでクリックしても反応はありません。 これが問題の原因です。

This loop speed is so fast that humans can't sense it. However, if the click happens to be in the drawGuitarNotes function and just before the drawing of the clicked text. It will respond, but no further clicks until the next darwGuitarNotes function begins. This is the cause of the problem.

テキストの色を変える、同じ弦でギターノートが2つ以上反応しないようにする。 この2つの問題を解決するためには、弦に値を記憶させておくこと、かつ弦が一本ずつオブジェクトととして振る舞うように設計する必要があります。

Change the color of the text so that no more than one guitar note reacts to the same guitar string. To solve these two problems, it need to remember the value on the guitar strings and design them to behave as objects one by one.


Next time, I will create a class file to handle the strings and note information of this guitar fretboard.

Part 3 -
Part 3 -

パート3、 今回の動画では、 ギターのフレットボードのフレットの近くをクリックすると、 弦を赤くするようなコードを書きます。 また、ギターの弦のノート情報をリセットすることができたり、 弦をミュートしたり、ノートテキストを隠すコードも書きます。

This time, In this video, when you click near the fret on the guitar's fretboard, I write a code that turns the strings red to indicate the vibration of the strings. I will also write a code that reset the note information for all the guitar strings, mute the strings, reset the strings one by one, and hide the notes.


To solve my previous video problem, I will make the guitar strings and the display part of the guitar note into classed and treat them as separate objects.

仕組みはとても簡単で、まず「GStringsGNotes」クラスは コンストラクタを使用して、6本のギター弦のオブジェクトを作ることができます。

The system is very simple. First, the [GStringsGNotes] class can use the constructor to create an object of 6 guitar strings containing the guitar note information.

一つ一つのオブジェクトはフレットと弦が触れる場所の情報を記憶しているので、その場所の範囲内をクリックすると、オブジェクトが持っている「fretClicked」のJ番目にTrueが入ります。 すると、クリックした場所のフレットと弦が触れる部分から後の弦が「Line関数」によって赤色に再描写されます。

Each object stores information about where the frets and strings touch, so when you click within that area, the J-th of the object's [fretClicked] will be True. The fret where you click and the string from where it touches are redrawn in red by [line function]

そして、下にある図が前回の問題点を解決する為の肝の部分です。 このロジックも簡単で、違う場所をクリックした際に一度すべての「fretClicked」をFalseにします。所謂初期化をするということです。

And the diagram below is the essential part to solve the previous problem. This logic is also simple. If you click in a area where another guitar string touches, all [fretClicked] are set to False. It means to do so-called initialization.


This not only makes the guitar strings and text appear red, but also allows you to mute and reset them in a coordinated way.


At first glance, it may seem inefficient to initialize all values for each action, but remember that initialization is very useful for complex branching and variable swapping.


This is a simple solution if the program doesn't branch well because of an array variable, such as a problem like the last one, where it doesn't respond until you click a few times, or where there are multiple guitar notes on the same string.


The basic use of toggle switches was explained in a previous blog post.


So this time, I'll just give you an overview of how toggle switches are actually used in this program.

図のようにCP5で作ったトグルスイッチのオンとオフの状態が、 TrueかFalseでグローバル変数toggleMuteに記憶されます。

As shown above, the on/off state of the toggle switch by CP5 is stored in the global variable toggleMute as true or false.


Each guitar string object created by the GStringsGNotes class has a checkMute variable.


The global variable toggleMute is referenced throughout the object, but the checkMute variable, which is an attribute of each object, is independent of each other.

この性質を利用します。 つまり、ミュートスイッチがオンになっている状態で、各ギター弦オブジェクトのフレット番号0をクリックすると、クリックされた弦オブジェクトのみが、ミュートされるという仕組みです。

Take advantage of the nature of this useful object. In other words, if you click the fret number 0 of each guitar string object while the mute switch is on, only the string object that was clicked will be muted.


If the mute switch is still on, you can mute each selected guitar string.


The same goes for the reset function for each guitar string.


On the other hand, the reset all and the function to hide the note can be applied to all guitar strings at once only by turning on and off the switch.


In other words, you only need to work with global variables.

Part 4 -
Part 4 -

第4回のビデオでは、画面の左下隅に、ギターノートに連動た単純な五線譜とTAB表記を描くコードを書きます。 また、画面右下にギターのコード名をボタンのリストにして、ボタンを押すとギターコードがフレットボード等に表示されるようにしていきます。

Part 4, In this video, I'll write a code in the lower left corner of the screen that draws a simple staff and TAB notation linked to the note of a guitar. Also, I would like to make a list of guitar code name buttons in the bottom right corner of the screen so that the guitar code can be displayed on the fretboard when the button is pressed.


An array variable used to turn a list of guitar chords into buttons.

動画では「オープンコード一覧」として書かれている箇所がありますが、バレーコード等が含まれています。 まあ、開放弦から6フレット ぐらいまでが使われているコード一覧として認識してもらえれば幸いです。

In the video, there is a part written "Open Chords", but Barre Chords is also included in the guitar chords charts. Well, it would be helpful if you could think of it as a chords charts that uses from open string to 6 fret.

// array of guitar chords charts
String[][] guitarChordChart = {

この中にフラット記号が含まれています。 これが使用するフォントによって文字化けになってしまうので、次にそれを防ぐために、ProcessingのCreateFontを使って、フォントを「メイリオ」にします。

The above array contains flat symbols. These may cause garbled characters depending on the font you are using in Processing. To prevent this, use createFont in Processing to make the font "Meiryo"


But the specified font does not need to be "Meiryo" as long as it can handle Unicode.

// Use createFont to prevent the flat symbol from garbling
PFont font;
font = createFont("Meiryo", 15, true);


Next, you create a function that draws a staff, tab notation and guitar chords charts on the screen.

// Draw staff and Guitar TAB notation.

// With controlP5, there were problems with function names and text display, so it was necessary to create a kind of homemade GUI to create a guitar chord chart.
translate(width/2-50, height/2);


It uses the length and coordinates of the fretboard to draw staff and TAB notes, so it uses the translate function to move the origin coordinates.


However, using translate function for drawChordChart function might have been a mistake.

何故なら、マウスの座標を格納しているmouseXとmouseY変数はオリジン座標からの数値が入っています。 そうすると、translate関数で座標を移動しても、コードチャート関数内でのマウスの位置はオリジン座標からの座標のままです。 これではマウスの位置を正しく認識できずに上手く機能しません。

Because the mouseX and mouseY variables, which store the mouse coordinates, contain numeric values from the origin coordinates. Then, when you use the translate function to move the coordinates, the mouse position in the drawChordChart function remains at the coordinates from the origin coordinates. It doesn't recognize the position of the mouse properly and doesn't work well.


As a temporary solution, the coordinates used by the translate function are stored again in the startX and startY variables and used to recognize the mouse position.


This code is not generic, so let's improve it a bit.

// translate(width/2-50, height/2);
// drawChordChart();
drawChordChart(width/2-50, height/2);
//void drawChordChart(){
void drawChordChart(float x, float y) {
    // float startX = width/2-50; 
    float startX = x;
    // float startY = height/2;
    float startY = y;
    for (int i = 0; i < 12; i++) {
        for (int j = 0; j < 14; j++) {
        // float rectX = i * 80;
        float rectX = i * 80 + startX;
        // float rectY = 5 + (j*30);
        float rectY = 5 + (j*30) + startY;
        // float textX = i * 80;
        float textX = i * 80 + startX;
        // float textY = 2 + (j*30);
        float textY = 2 + (j*30) + startY;
        float rectW = 75;
        float rectH = 25;
// if ((startX+rectX+rectW/2 > mouseX)&&(startY+rectY-rectH/2 < mouseY)&&(startX+rectX-rectW/2 < mouseX)&&(startY+rectY+rectH/2 > mouseY)) {
if ((rectX+rectW/2 > mouseX)&&(rectY-rectH/2 < mouseY)&&(rectX-rectW/2 < mouseX)&&(rectY+rectH/2 > mouseY)) {

関数に移動したい座標を、引数として指定します。 変更前のコードは変更後の直前でコメントアウトしました。

Specify the coordinates you want to move to the function as arguments. The previous code was commented out just before the change code.

最後に説明するのは、マウスをクリックした時のフレットボードの動作です。 これはテスト用の関数を使用して、その動作を確かめています。 仕組みはとても単純です。

Finally, the behavior of the fretboard when you click the mouse. It uses a test function to verify its behavior. The mechanism is very simple.

if (mousePressed){
    fill(#3E7AB9, 200);
    rect(rectX, rectY, rectW+5, rectH+5);
    // Test function representing open chord "A" of guitar

上のセクションで説明しましたが、事前にどのボタンの上にマウスがあるかの判定を行っています。 後はマウスをクリックした時にボタンとテキストのサイズと色を変化させ、 テスト関数の「A」を発動させます。

It determines in advance which button the mouse is on. That was explained in the above section. It then changes the size and color of the button and textg when you click the mouse and activates the A test function.

// Test function representing open chord "A" of guitar
void A(String theStr){
    if(theStr=="A") {
        for (GStringsGNotes sn : sns) {
        sns[0].fretClicked[0] = true;
        sns[1].fretClicked[2] = true;
        sns[2].fretClicked[2] = true;
        sns[3].fretClicked[2] = true;
        sns[4].fretClicked[0] = true;
        // mute
        sns[5].checkMute = true;


The A function simply initializes the object that handles the strings and notes of the fretboard, and then sets fretClicked to true so that it behaves the same as the guitar chord specified for each string object.

Part 5 -
Part 5 -


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.

まずギターの弦毎に重複するノートが存在するので、 五線譜に対応させる為、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なら、「1、5、9、13」といった具合に五線譜を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 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);


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

for (String nd : noteDurations.keySet())


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

rect(rectX, rectY, rectW, rectH);
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;


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

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

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.


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.

Part 6 - 8
Part 6 - 8


I uploaded the rest of the video to niconico video.


Responsive image


This blog is a compilation of the following my blog posts.


That's all. Thank you for your hard work.

今回使用したソフトは素晴らしいことに全て無料で使用できます。 作ってくれた偉大なる先人達に感謝です。 さらにMac、Windows、Linuxどれでも動きます。 まだまだ色々なことがこれらのソフトを組み合わせてできます。 是非各自で創意工夫をして色々と作ってみてください。

The software I used this time can be used for free. I thank my great predecessors. It also supports Mac, Windows and Linux. You can do more with this software. Please try making various things with your own creativity.

See You Next Page!