Arduino Touchscreen MIDI Controller

https://youtu.be/ztwbmDivTa8

以下は、このタッチスクリーンをベースにしたフォローアッププロジェクトです。

12個の仮想“スライダーポット”を作成する方法を紹介します。

波形を“描画”し、MIDIで制御してPWMで出力します。

Auduinoグラニュラーシンセのタッチスクリーン版です。

16×8のタッチスクリーンによるミニ「Tenori-On」スタイルのMIDIコントローラーです。

Here are some follow-up projects based on this touchscreen:

これらは、このプロジェクトで用いられている主要な概念に関する Arduino のチュートリアルです:

パーツリスト

Arduino Uno

ILI9488 320×480 display with XPT2046 touchscreen

https://gyazo.com/fb5ce6cb137c98fe53926e82fb3386c1

回路

The Circuit

回路というものは特になく、ディスプレイはアダプタシールドに差し込み、MIDIはRX、TX、5V、GNDに接続するだけです。私の場合はUART用のピンが追加で用意されている安価なArduino Uno互換機を使ったので、シールドの下にMIDIモジュールを取り付けるのが非常に簡単でした。

There is no circuit as such, the screen has to plug into the adaptor shield and MIDI has to be linked up to RX, TX, 5V and GND. In my case I used as cheap Arduino Uno copy that has extra pinouts for the UART, which makes connecting a MIDI module beneath the shield really easy.

コード

タッチスクリーン上にキーパッドマトリクスをモデル化し、タッチするたびにMIDIでノートを一瞬だけ演奏するアクションをトリガーするようにしました。6×6の“キー”マトリクスを採用し、完全五音音階にマッピングできるようにしています。それぞれの行の上下でトニック（主音）を繰り返しています。

The Code

I decided to model a keypad matrix on the touchscreen, with each touch triggering the momentary action of playing a note over MIDI. I’ve gone for a 6×6 matrix of “keys” which can then be mapped onto a full pentatonic scale – I’m repeating the tonic at the top and bottom of each row.

https://gyazo.com/00427a0f6a92b504a893082bba8f95ab

コアとなるMIDIコードは、これまでこのブログで何度も使ってきたものと同じです。押された（仮想）キーに対応する再生ノートを格納した配列と、ボタン操作を管理するための 2 つのリストがあります。最新のボタン押下を記録するリストと、「直前」の押下を記録するリストを用意し、オフ→オンおよびオン→オフの遷移を検出して適切に処理できるようにしています。

こうすることで、多くのコードはボタンとノートのマッピングだけに集中でき、画面上へのボタン描画やタッチ検出の仕組みは別に切り離して扱うことができます。

The core MIDI code is the same as used many times before on this blog now. There is an array of notes to be played corresponding to each (virtual) key to be pressed and two lists to manage the buttons – one for the latest button press and one for the “last” press so that I can spot the off->on and on->off transitions and handle them accordingly.

Where things get interesting is the touch screen. The basics are all covered in the above mentioned blog post. I decided to get my code thinking in terms of “button numbers” (0 to 35) and wrote a set of routines that will go from (x,y) coordinates to a button number; and from a button number to an (x,y) coordinate.

This way, most of the code just thinks about buttons and how they map onto notes, but the mechanics of getting buttons displayed on screen or having their touch detected can be kept “out of the way”.

主な関数は以下のとおりです:

さらに、ボタン座標や各種レンジをシリアルに出力する TEST モード用のコードもかなり含まれています。ここでは詳細を一つひとつ解説しませんが、座標系変換がたくさん組み合わさって動作しています。

私の数式にまだ誤差があるかもしれませんが、現状では問題なく動作しています。もし詳細を確認したりカスタマイズを進めたい場合は、TEST モードで動かしてシリアルポートに出力を確認し、グラフ用紙などにボタン座標をスケッチしながらタッチして動作を確かめることをおすすめします。

These are the main functions:

Set up the graphics library and touchscreen: gfxSetup()

Scan the touchscreen and update the display: gfxLoop()

Turning buttons “on” and “off” (graphically): gfxBtnOn(), gfxBtnOff()

Translating from button numbers (0 to 35) to display coordinates: btn2xc(), btn2yc()

Finding the nearest button to a set of display coordinates (x,y): xy2btn() – note this returns -1 if the touch is not within the bounding square of a button

Translating the touchscreen from its own coordinate system to the display coordinate system (these are taken from the linked blog post): xt2xdsp(), yt2ydsp()

There is quite a bit of TEST mode code in there too to dump out the button coordinates and the various ranges used in the functions. I’m not going to spend time here talking through each of the bits of code – there is quite a lot of translating between coordinate systems going on to make it all work!

It is entirely possible my maths is still off in places, but it works for me. If you want to get into the details, or start customising it further, I suggest running it in TEST mode, hook up a serial port, sketch out the coordinates of the buttons on some graph paper and see how the code is working as you touch the buttons.

https://gyazo.com/3176320e4af585497d0f05ce39a89d3a

締めくくりの考察

動画では、私のMT-32のハープ音色のひとつを演奏している様子がご覧いただけます。

残念ながら、この形で同じプロジェクトを複製するのはあまり簡単ではありません。Arduinoやその他のマイクロコントローラ用のタッチスクリーンディスプレイには多くの選択肢があるので、少し工夫すれば基本的な仕組みを別のボードへ移植できるはずです。

しかし、安価なILI9488をArduino Unoで動かすのに、実際には必要以上の時間を費やしてしまったので、どうしても何か音楽的なことをやってみたかったのです。

実は、別のディスプレイシールドも手元にあるので、その動かし方を調べるつもりです。そちらなら（追加ハードウェアなしで）動作する可能性が高いと思っています。

ほかにもタッチインターフェースのアイデアがいくつかあり、仮想の“スライダーポット”を作ったり、波形を描画してみたり、もう一度Tenori-on風のものに挑戦してみようとも考えています。

さらに、このボードを使ってZynthianに画面を付けられないかといった構想もあります。お楽しみに。

それと、動画を見返してみて思ったのですが、MIDIコントローラーとしても機能する“スネーク”ゲームを真剣に作ってみたくなっています……！

Closing Thoughts

In the video you can see it playing one of the Harp sounds of my MT-32.

This isn’t a very easy project to duplicate in this form I’m afraid. There are many other options for touch screen displays for Arduinos and other microcontrollers, so with a bit of care I’m sure the basics could be moved across to another board.

But having spent quite a bit more time than is probably useful getting my cheap ILI9488 to work with an Arduino Uno, I was determined to do something musical with it.

I have an actual display shield to look at too, at some point, so I might see what will be required to get that working, as that doesn’t (hopefully) involve additional hardware.

I also have a few more ideas for touch interfaces – I’d like to create some virtual “slider pots”, possibly try drawing a waveform, and might even have a go at another Tenori-on.

I’m also wondering if this board could give me a screen on my Zynthian. Watch this space.

Although I have to say, having watched the video back, I am now seriously interested in writing a game of “snake” that acts as a MIDI controller too…

https://gyazo.com/4c22fdc194addf665c3bf25314f27607