鳴らした音がドなら、ドの場所が光る「ドレミえ～る」｜音の高さが目に見えるカタツムリ
紹介した作品: Musical scale visualizer ドレミえ～る
ProtoPedia の作品「Musical scale visualizer ドレミえ～る」を2人のMCが初心者目線で紹介。手のひらサイズのコンピューター M5StickC の内蔵マイクで音を拾い、ドレミを渦巻きの光の位置で見せる、カタツムリ型の装置です。高いドも低いドも同じ向きに光る渦巻きのしかけ、混ざった音を高さごとに分ける計算と1秒22回の速さの工夫、好きなアプリを形にしたいという動機から、12角形→カタツムリ→渦巻きと形が育っていった物語まで。
チャプター
0:00オープニング0:20音の高さが、光の場所で見える1:06ドを鳴らす → ドの場所が光る2:41M5StickC = マイク入りの小さなコンピューター4:23きっかけはアプリ「The Snail」8:05今日の一歩: 好きなものを1つ思い浮かべる9:21エンディング
文字起こし(78行)
- BANNO
- ゆっくりばんのです。
- HIGEDARUMA
- ゆっくりひげだるまです。
- BANNO
- 今日もプロトペディアから、とびきり面白い作品を紹介していきますよ。
- HIGEDARUMA
- 今日紹介するのは、Musical scale visualizer ドレミえ～る。
- BANNO
- かわいい！ オレンジ色のカタツムリで、殻の部分が虹色に光っていますね。
- HIGEDARUMA
- これ、音を目で見る装置なんです。鳴った音がドなら、殻のドの場所が光るんですよ。
- BANNO
- 音って、耳で聞くものですよね。それが目で見えるんですか？
- HIGEDARUMA
- そうなんです。しかも作者のPikaPikaらいとさんは、音の工作はこれが初めてだったんですよ。
- BANNO
- 初めてでこれを！ それは、じっくり聞かせてください。
- BANNO
- まずは、どんなふうに光るのか教えてください。
- HIGEDARUMA
- カタツムリを鍵盤の横に置いて、たとえばドの鍵盤を押します。すると、殻のドの場所がぽっと光るんです。
- BANNO
- じゃあ、レを押したら、今度はレの場所が光るんですね。
- HIGEDARUMA
- はい。ド、レ、ミと上げていくと、光が殻の渦巻きに沿って、くるっと進んでいきます。
- BANNO
- でも、なんで渦巻きなんでしょう。まっすぐ並べたほうが分かりやすくないですか？
- HIGEDARUMA
- そこが、この作品のいちばん賢いところなんです。渦巻きは、ドから次の高いドまでで、ちょうど1周するんですよ。
- BANNO
- ドから次のドまで。ピアノでいうと、白い鍵盤と黒い鍵盤で12個ですね。
- HIGEDARUMA
- そうです。だから高いドを鳴らすと、1周外側の、同じ向きが光るんです。低いドも、高いドも、ドはいつも同じ方向。
- BANNO
- あっ、そうか。光った向きを見れば、高さに関係なく「今のはドだ」って分かるんですね。
- HIGEDARUMA
- まさにそれです。殻の周りには、音の名前の文字も書いてあるんですよ。
- BANNO
- 私、音感に自信がないので、これはうれしいです。自分の声が合っているか、目で確かめられそう。
- HIGEDARUMA
- 実際、デモ動画には、歌の練習に使っている場面も出てくるんですよ。
- HIGEDARUMA
- しかもこのカタツムリ、音の大きさに合わせて、口をパクパク動かすんです。
- BANNO
- 歌っているみたいで、かわいいですね。ずっと眺めていられそう。
- BANNO
- でも、機械がどうやって、ドとレを聞き分けているんですか？
- HIGEDARUMA
- 頭脳は、M5StickC。画面とボタンとマイクが入った、手のひらサイズの小さなコンピューターです。
- BANNO
- カタツムリの、オレンジ色の体の部分ですね。マイクも最初から入っているんですか？
- HIGEDARUMA
- そうなんです。音を拾う部品を別に足さなくていい。材料は、この小さなコンピューターと、光るLEDだけなんですよ。
- HIGEDARUMA
- 流れは3つです。マイクで音を拾う。計算で音の高さを調べる。その高さの場所のLEDを光らせる。
- BANNO
- 真ん中の「高さを調べる」が気になります。どういう計算なんですか？
- HIGEDARUMA
- FFTという計算です。混ざった音を、高さごとに分けてくれるんですよ。
- HIGEDARUMA
- ガラスのプリズムに光を通すと、虹の色に分かれますよね。あれの、音の版だと思ってください。
- BANNO
- なるほど。分けてみて、一番強く鳴っている高さの場所を光らせるんですね。
- HIGEDARUMA
- その通りです。本体の画面にも、高さごとの音の強さが、棒グラフで出るんですよ。
- BANNO
- でも、そんな計算をして、光るのが遅れたりしないんですか？
- HIGEDARUMA
- そこにも工夫があるんです。計算には、誰かが公開してくれたプログラムの部品集を使っているんですが…
- HIGEDARUMA
- その正式版ではなく、速くなるよう改良中の版を選んだ。それで、1秒に22回、光を描き直せるようになったんです。
- BANNO
- 1秒に22回！ 鍵盤を押したら、すぐ光るわけですね。
- BANNO
- そもそも、なんでこれを作ろうと思ったんでしょう？
- HIGEDARUMA
- きっかけは、YouTubeで知った、The Snailというアプリなんです。音の高さを、渦巻きで見せてくれるアプリです。
- BANNO
- スネイルって、英語でカタツムリですよね。
- HIGEDARUMA
- そうなんです。作者は自分でも買ってみて、「非常に面白く、ハード化したいと思いました」と書いています。
- BANNO
- 好きなアプリを、手で触れる形にしたくなった。その気持ち、すごく分かります。
- HIGEDARUMA
- ただ、音の工作はやったことがなかった。そこで、手元にあった小さなコンピューターに、マイクが入っていると気づいたんです。
- HIGEDARUMA
- 調べると、同じコンピューターで音を棒グラフにしている人がいた。それを参考に、1台目を作ったんですよ。
- BANNO
- 手元にあるものと、先にやった人の例から始める。それなら、私にもできそうな気がしてきます。
- HIGEDARUMA
- 1台目は、Maker Faire Tokyoに間に合わせるため、急いで作ったそうです。LEDを64個使って、ドからドを3周半ぶん出せました。
- BANNO
- 64個！ 位置はどうやって合わせたんですか？
- HIGEDARUMA
- 実際にキーボードで音を鳴らして、渦巻きの位置を合わせたそうです。地道ですよね。
- BANNO
- その後は、すぐ今の形になったんですか？
- HIGEDARUMA
- いえ、もっときれいに作り直そうとして、壁にぶつかります。光る粒が等間隔に並んだ、LEDテープを使っていたんですが…
- HIGEDARUMA
- 渦巻きは、外側ほど1周が長くなりますよね。等間隔のテープだと、切らずに巻くと位置がずれてしまうんです。
- BANNO
- あ、確かに。内側と外側で、同じドの向きがそろわなくなっちゃうんですね。
- HIGEDARUMA
- そこで作者は、きれいな渦巻きはいったん諦めて、3Dプリンタで12角形の表示器を作ったんです。12角形を2段、ドからドを2周ぶんです。
- BANNO
- 12個の音に合わせて、12角形。なるほどです。
- HIGEDARUMA
- で、ここからが面白いんです。その12角形と本体の並べ方を、あれこれ試していたら…
- HIGEDARUMA
- 本体がオレンジ色なのもあって、カタツムリに見えてきた。アプリの名前と同じ、カタツムリです。
- BANNO
- 偶然、見えちゃったんですね！
- HIGEDARUMA
- それで「いっそカタツムリにしてしまえ」と。クレヨンで色を塗って、目玉のシールを付けたそうです。
- BANNO
- それで、あのかわいさなんですね。口パクも、そのときに？
- HIGEDARUMA
- はい。実は、作者がいちばん苦労したのは、その口パクのプログラムだそうです。
- HIGEDARUMA
- 本当は、ドならド、レならレの口の形にしたかった。でも難しくて、音の強い弱いだけで動かすことにしたんです。
- BANNO
- 理想どおりにはいかなかった、と。
- HIGEDARUMA
- そこで、動きのパターンを色々作って、いちばんかわいいものを選んだ。かわいさで決める、というのがいいですよね。
- BANNO
- 完璧じゃなくても、かわいければ勝ち。私、その考え方好きです。
- HIGEDARUMA
- そして最後に、念願の渦巻きも実現します。テープではなく、光る粒を電線でつないだ、LEDストリングに替えたんです。
- BANNO
- 電線なら、粒と粒の間隔を、自由に変えられますね。
- HIGEDARUMA
- そうなんです。LEDは39個に減ったのに、ドからドを3周以上出せるようになりました。
- BANNO
- 急いで作った1台目から、少しずつ理想に近づけていったんですね。
- BANNO
- この作品は、ヒーローズ・リーグの2021と2022、それにM5Stackのコンテストにも出ていたんですね。
- HIGEDARUMA
- エンジニアとして、ぐっときたのは、うまくいかない所で止まらずに、形を変えて前に進んだところです。
- BANNO
- 作ったのは、PikaPikaらいとさん。作品ページには、1台目から4台目までの写真も載っていますよ。
- HIGEDARUMA
- 動いているところは、デモ動画で見られます。きっかけのアプリ、The Snailのリンクもありますよ。
- BANNO
- 見ていて、私も何か作ってみたくなりました。最初の一歩は、何がいいでしょう？
- HIGEDARUMA
- まず、好きなアプリやおもちゃを1つ思い浮かべて、「これが手元で光ったら」と考えてみてください。
- HIGEDARUMA
- 作ってみたくなったら、マイク入りの小さなコンピューターで、手をたたくとLEDが1つ光る。そこからで十分です。
- BANNO
- 好きなものを、自分の手で形にする。作者さんも、そこから始まったんですものね。
- BANNO
- さて、今日紹介したのは、音の高さを光の場所で見せるカタツムリ、Musical scale visualizer ドレミえ～るでした。
- HIGEDARUMA
- 次回の作品でも、ゆっくりしていってね。
クレジット
あなたの作品も、動画で紹介します
ProtoPedia の作品ページの URL を送るだけで、夜のうちに紹介動画に仕上げます。対象は CC BY 4.0 の作品です。
動画をリクエストする