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

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.

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

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.

過去に似たアプリを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.

前回の問題点を解消するために、ギターの弦とギターノートの表示部分をクラスにして、個別のオブジェクトととして扱います。

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.

図のようにCP５で作ったトグルスイッチのオンとオフの状態が、 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.

GStringsGNotesクラスによって作られた各ギター弦オブジェクトは、それぞれcheckMute変数を持っている。

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

グローバル変数toggleMuteはオブジェクト全体から参照されているが、各オブジェクトの属性であるcheckMute変数は、それぞれが独立しています。

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.

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

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.

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

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

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

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