Published Date : 2020年1月24日14:25

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

This blog has an English translation

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

Here's a little more about the "- Part 3 - 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.

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

It's very easy to make this. 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.


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

ギターの弦の色を変える仕組み - 0:56 ~, 3:11 ~, 5:07 ~
A mechanism for changing the color of guitar strings - 0:56 ~, 3:11 ~, 5:07 ~


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.

Responsive image

一つ一つのオブジェクトはフレットと弦が触れる場所の情報を記憶しているので、その場所の範囲内をクリックすると、オブジェクトが持っている「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.

Responsive image


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.

トグルスイッチを使った各種操作の概要 - 7:20 ~
Overview of various operations using toggle switches - 7:20 ~


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.

Responsive image

図のように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.


This video and the app are in progress.


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


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

See You Next Page!