GPUを使ったシェーディング言語、GLSLを使って、音楽を可視化してみよう!
Shadertoyは、ブラウザ上ですぐに試せて、プログラミングできるサンプルがたくさん!
まずはシンプルなポップにホップするサウンドイコライザーを作ってみました。


hop_light_8 - Shader - Shadertoy BETA
1画面に収まるシンプルなプログラム。C言語風なので、ちょっとプログラミングしたことある人ならすぐに改造して試せるはず。


プログラムの下に並ぶ、Channel0をクリック、プリセットの曲をいろいろと変更してみましょう。


Microphoneにすると、PCのマイク入力に連動してリアルタイムに動くようになります。キーボードや、カメラも使って連動させるのも楽しそうですね!


フルスクリーンにして動かしたり、プロジェクターにつないでパーティーを盛り上げたりできますね!(DMX512照明と組み合わせるともっと楽しい)

GLSL(OpenGL Shading Language)で手軽に使えて楽しい、並列処理が得意なコンピューター、GPU。 28段階のチュートリアルで学べる「GLSL 2D Tutorials」おすすめです! 音の変態曲ビジュアライズ好きの方もぜひ!

links
- GPU音源で遊ぼう!GLSL x WebAudioで創ったリズムマシン

第13回目、審査員するのも13回目となった鯖江市地域活性化プランコンテスト。 今年は初のオンライン開催。全国の精鋭18名の大学生、高校生が市長になったつもりでプランを立案し、プレゼンテーション! 運営の学生団体withをはじめ、多くの鯖江市民、そして鯖江市長も参加し、ツールを駆使して作り上げた6プラン、いよいよ最終発表会。

市長をやりませんか?プレゼンテーション!(全編3時間)
下記、プラン毎の先頭から見られるリンクと共にふりかえります!
(リンク作成 by 今日の一日一創、自作ツール、YouTubeのシークリンクメイカー


チーム ワシントン イクメンのまち鯖江「sa-bapapa育成プロジェクト」(動画)
女性活躍のまち、「ジェンダー平等」を中心にSDGsを推進するまちとして関心高い、男女共同参画。課題は父親の理解と参画。 統計上、育児や家事に関わる時間が圧倒的に短い男性向けに、学生ならではの企画で誘う、イクメンへの道。 ポイント制にし、提携企業との接続もいいアイデア。子育て技能を競うコンテスト、母親が楽しめるイベントとセットにするのもいいかも?


チーム ニュートン 鯖江立国案(動画)
鯖江国が発行するパスポートアプリを使って、楽しくお得に巡れる新観光。地元民の紹介があると観光はぐっと楽しくなる! スタティックな観光地ではなく、その人の個性に合わせたダイナミックなイベントや人とのつながりと出会う旅、おもしろくなりそうです。 国が発行するパスポートをイメージするとちょっと違うかなと思いましたが、年間パスポート的なイメージですね。 鯖江入国に必要なビザを、どういう思いで行くのかと合わせて申請すると、その人にぴったりなプランや補助が付いてくる感じもいいかも。


チーム ミケランジェロ 日本一論文が書きやすいまち(動画)
大学生活の集大成、卒論。社会学、地方創生を学ぶ学生の聖地、鯖江を目指し、その研究がっつり滞在しながらやってもらおうプラン。 研究に必要なオープンデータがうれしいと、うれしいコメント! アート好き学生の河和田アートキャンプ、ものづくり好きな学生向けjigインターンにも通じるものがありますね! それぞれの成果がつながるともっと楽しい! (jigインターンも2020年はオンライン開催でした)


チーム シェークスピア #勝手に鯖ギネス(動画)
Hana道場、Hana工房、提案型市民主役事業など、チャレンジする人が活躍する場はあるけど、そこへの一歩が踏み出せない学生が多いという課題に着目した、チャレンジはじめのいっぽ的プラン。 気軽に楽しく挑戦できる種目から、クラス一位、学校一位、鯖江一位を目指そう!勝てる種目は創ればOK!誰でもきっと何かではナンバーワン! 小学生でも記録を簡単にアップロードするIoTと、記録を一覧できるダッシュボードを導入すれば、チャレンジ魂に火がつくはず!


チーム コロンブス 鯖江市役所東京課(動画)
地方に関心ある東京の高校生と、東京に関心ある鯖江の高校生を短期交換留学しよう的プラン。テレビやメディアで見ているイメージ、実際のところどうなのだろう? 観光地ではない日常を見ると見えてくる、東京や地方のメリット・デメリット。これからの日本の未来をあり方を考えるきっかけになりそうです。 コロナ禍で活用したいオンライン。オンラインであれば、東京だけでなく、世界どの国でも条件は一緒! シンプルな英語と、翻訳ツール、お絵かき、動画、いろいろ駆使すれば、なんとかなります!


チーム ロック 日本一「音の変態」が多いまちサバエ(動画)
レキシの池ちゃん、「ROAD CORD」PVづくりでご一緒した竹内朋康さん、エレクトーン奏者826aska、ファンキーな先生植田薫さん! 吹奏楽が強く、JR駅発着音も特注で、夕方にも音楽が鳴る、実は鯖江は音楽のまちでもある。 そこに着目し、手軽に始められるDTM(コンピューターを使ったデスクトップミュージック)を小中学生のプログラミング教育にも採り入れ、大いに推奨していこうというプラン。 夕方の音楽、鯖江駅前の歩行者信号の音楽、コンテストで選んじゃうというプラン、おもしろい! IchigoJamでもできるお手軽DTM、PLAY文を使った作曲、すでに人気です。初音ミクを産んだクリプトン・フューチャー・メディアの伊藤さん、鯖江に来ていただく理由がひとつ増えました! コミュニケーションにおける「音」の重要性が、広く再認識されたコロナ禍、サウンドエンジニアによる新しい音の可能性を追求する「変態」増やしましょう!


withの部屋(動画)
審査時間を利用して開催された、学生団体withによる運営舞台裏話。審査で聞けなかったので、先程YouTube視聴。 告知用のステキ動画、企画、出演、撮影、編集、BGM、才能豊富!


ステキなきっかけを提供してくれた18名の学生市長のみなさん、ありがとう!!


鯖江市長の牧野さん、市長として参加する最後のプラコン、花束が贈呈されました。
市長とプランを全部実現しようとする市役所の力あってのプラコン13年、ありがとうございました!


学生団体with作、コンテスト参加者募集動画!BGMが良い感じ!MR映像、凝っていて良い!


こちらは観覧車募集動画、西山公園からのHana道場へスムーズにつながる編集が気持ちいい!


学生団体wthのみなさん、ステキな運営、ありがとう!次は地元民のターンだ!

links
- 第12回 鯖式会社のJK社長、鯖江市長YouTuber、物々交換で鯖江を目指せ! わがまま学校、落書きOKオープンデータ、次世代スケボー新交通!? 自由な6プランの発表
- 第11回 鯖江市地域活性化プランコンテストの参加賞、鯖江生まれのパソコン IchigoJam の鯖江スペシャル MeganeJam 組み立て動画
- 第10回 自分達をターゲットにする企画の強さ / 第10回鯖江市地域活性化プランコンテスト決勝!
- 第9回 プランづくり3つのポイント
- 第8回 鯖江×都会の学生=未来の日本!
- 第7回 まちの活力三要素を取り入れる仕組み
- 第6回 地域活性化の要
- 第5回 第5回 Facbookアルバム
- 第4回 ~まとめ~|きらきら星のつぶやき☆
- 第3回 まとめ|きらきら星のつぶやき☆
- 第2回 学生が活躍できるまち鯖江鯖江週末写真家)
- 第1回 参加学生によるもみじまつり出店

新MIDI音源、NTS-1を気軽に鳴らすキーボードがほしいけど、最近のMIDI出力付きのキーボードの安価なものはUSBばかり。
ないなら創ってしまいましょう!IchigoJamでつくる、簡易MIDIキーボード。

ちょうどいい場所にある、キーボードの「C」を「ド」とした、半音階対応のMIDIキーボード。
1から9キーでオクターブの変更にも対応!

10 BPS31250:UART0:S="AZSXCFVGBNJMK,L./:\]" 20 FORI=0TOLEN(S)-1:[ASC(S+I)]=8+I:NEXT 30 O=4 40 K=INKEY():IF !K CONT 50 IF K>48 AND K<58 O=K-48 60 T=[K]:IF T T=T+O*12:UART1:?CHR$(#90,T,60);:WAIT5:?CHR$(#90,T,0);:UART0 70 GOTO40

離したことが検出できないので、伸ばす長さはプログラムで固定対応(WAIT5)なところが簡易版。


NTS-1と接続して、いろいろ演奏、楽しめます!


在庫ありなeVY1も3本ジャンパー線でつなぐだけで使えます!(eVY1のつなぎ方

エレクトーンや、電子ピアノなど、お手持ちのMIDI音源につないで遊んでみてください。
IchigoJam用MIDIインタフェース基板キット: 組立キット 秋月電子通商 電子部品 ネット通販」もどうぞ!

動画で弾いていたのは、ジングルベル。
IchigoJam Advent Calendar 2019 - Qiita
今年もスタート、クリスマスまでのお楽しみ、IchigoJamアドベントカンダー、どうぞ気軽にご参加ください!

令和元年11月に発売、1万円ちょっとの楽しいMIDI音源「NTS-1 by KORG」を、早速IchigoJamにつないで鳴らしてみました!

音階をランダム演奏!
MIDI INが、ステレオジャックなのでIchigoJamと接続するケーブルを電子工作。


楽しみだった、KORGのMIDI音源、NTS-1 digital kit、到着!


ネジ止めだけの簡単キット!ドライバーも付属!まずは大きな基板をパキッと割ります。


メイン基板、四隅もパキッと割ります。
NTS-1のCPUはSTM32、Arm Cortex-M4 180MHz Flash512KB RAM128KB 別途DRAMも実装


まずは金属製のシャーシをネジ止め、2セット


底板を黒いネジでネジ止め


鍵盤に当たる部分、裏面のシールを剥がして、曲がらないようにきれいに貼り付け。


裏側に通して挿し込み、プラスチックの飛び出した部分を押し込んで固定!
操作パネル側のコンピューターはSTM32F030、IchigoJamと同クラス、Cortex-M0 48MHz


メインの基板と操作パネルは電子工作でおなじみ、ピンヘッダーとピンソケットで接続!仕様が分かれば直接いじることも可能!?


CN2B端子、I2Cで接続できそう!


最後に、前面と後面のパネルをネジ止めしてできあがり!


ネジは予備がある模様、余ってOK!モバイルバッテリーなどを付属のmicroUSBケーブルとつないだら、すぐ鳴らせます!

MIDI IN端子を使って、IchigoJamからコントロールしてみましょう!

ステレオミニジャックと小さな基板、ピンソケットを準備。
(基板なしで、ケーブルを解いて、直接はんだ付けしてもOK!)


裏面、GNDとLとRに当たる部分をピンソケットに接続しています。


ステレオミニジャックのブレイクアウトボードができあがり


ステレオジャックとIchigoJam、先端の部分にTXD(Sink/Tip)、真ん中(Source/Ring)にVCCを接続。
(MIDIのステレオジャックの仕様:MIDIのTRS接続規格化 | g200kg Music & Software


ステレオのケーブルでつないだら、あとはプログラムするだけ!

10 BPS31250 20 A=RND(30)+50:?CHR$(#90,A,50) 30 WAIT30 40 ?CHR$(#80,A,0); 50 GOTO20

デフォルトはチャンネル1、50から79のランダム音階を0.5秒毎に鳴らしています。
(MIDI仕様など、ダウンロード | NTS-1 digital kit | KORG (Japan)

音色もMIDIで自在に変更できそうなので、いろいろと遊べる予感!

見つけた、楽しそうな動画!

links
- NTS-1 on Amazon (11,000円)
- NTS-1 digital kit - PROGRAMMABLE SYNTHESIZER KIT | KORG (Japan)
- リアルなサウンド!IchigoJamとMIDI音源でドラムマシーン - Eyes, JAPAN Blog
- MIDIキーボードをIchigoJamにつないで明和電機ごっこ!?
- 1万円で買えるKORGの小さなシンセ・NTS-1に、世界中で開発されるオシレータやエフェクトを組み込んでみた | | 藤本健の "DTMステーション"

北海道を拠点として活動するIT企業の技術に関する発表会、Kita-Tech 2019 へ初参加!
今年のテーマは「GPU」、参加企業の若手エンジニアによる発表を聞き、審査。
ただ、社会人発表の後、学校が終わって駆けつけた小学生エンジニアの発表が凄すぎました。

こちら実演動画。(全編も追加アップ!))
熱中症を予防するため、水分を適切にとるという対策に注目、一日2Lの水をちゃんと摂取しているかモニターするデバイスを開発!


見事、特別賞を獲得!・・・でも、実質最優秀賞!
大人も負けていられません!


札幌初の新IchigoJam、IchigoKamuyの太田さんにお会いできました!
リクエストもらった、超音波を使った通信実験のため、今回デモして人気だったWebAudioを使ったFFT、表示する帯域を超音波を含めた全域に広げ、テストするアプリをいにしえのタグ、FRAMESETを使ってサクッと実装。

OSC and FFT

IchigoJamにつけた220円マイクで、ちゃんと音を拾うことを確認できました!

これでマイクをつけた教室内全員のIchigoJamにプログラムを届けることができそうです。

10 OUT1,-1:OUT2,-1:OUT3,1 20 A=ANA(6) 30 B=ANA(6):C=B-A:A=B 40 ?C 45 LED ABS(C)&>5 50 GOTO 30

通信プログラムは、また後日!

いろんな刺激がもらえるエンジニアの会、こどもも大人もご一緒に!


ボンバーマンの生みの親!サイレントシステムの中本さんに初めてお会いできました!
さくらインターネット田中さん、イニフィニットループ吉田さんと一緒に、時計台前での記念写真。


Kita-Tech、今年リニューアルしたステキなロゴ。矢印3つが北海道に集結を表す!


THETAで集合写真!


「KidsVenture「熱中症を倒そう!-水分取ってますか?-」 - Kita-Tech 2019」

links
- 特別講演「100円で50MIPS!?こどもパソコンIchigoJam x GPU/VR/5G時代のオープンデータ、その心は?」 | キタゴエ

1000円ほどでもそこそこ本格的で楽しめる、スマホVR。セットしたスマホの外カメラ部分が空いているモノはARとしても使えて楽しい。
WebMegane「色メガネ」 と FFT を組み合わせて、音が見えるメガネを開発しました!

colornsound - WebMegane」(src on GitHub)
マイク、カメラ、方角取得用にいろいろタップしたり、許可したりしたあと、スマホVRにセットしましょう。この辺りの手間はが、webアプリの残念なところ。アプリと同様、一度許可したら次は聞かないオプションが欲しいが、それはそれで危ない(けど、アプリはそういう問題をはらむことを忘れずに)。

画面いっぱいのHTML5 Canwas に、同じ画面を2つ並べるだけ。スマホのマイクが拾った音をFFTで周波数変換して、リアルタイムに表示。ついでに「絶対音感ツール AbsScale」の音階表示機能も追加。これで、誰でも絶対音感!


画面収録を使って、使っている様子を撮ってみました。IchigoJam web でドレミを鳴らすと、ちゃんと音階を表示してくれます!憧れの耳コピもできるかも!?


現在、メガネの主流な光学メガネ、カメラの世界が一眼レフから一眼へと変わったように、メガネもいずれ電子メガネ化します。
今からできる電子メガネ、スマホARで遊びましょう!

「LEDつけて」とIchigoJamに声をかけてもつかないよ。耳が付いてないからね。
でも、耳を付けたら!?

日本語に反応するIchigoJam!? - 耳付きIchigoJamのデモ動画


今回使った耳=マイクは、秋月電子の「超小型シリコンマイクモジュール SPU0414HR5H-SB使用」220円!(前回の登場記事


基板裏側のジャンパーをはんだでつなぎましょう。


GNDをIchigoJamのCN4のGNDに合わせて、直結!
OUT3のON/OFFでマイクの電源を管理、OUT2,-1としてアナログ入力ANA(6)へと切り替えて使います。OUT1,-1としてGAINも入力にしておきます。

10 OUT1,-1:OUT2,-1:OUT3,1 20 A=ANA(6) 30 B=ANA(6):C=B-A:A=B 40 ?C 50 GOTO 30

音は波なので、前回との差分を使います。声をかけると数が変化しますね!

Cの絶対値(数直線で言う、0からの距離)を使って、一定以上大きいことを検出したらLEDをつける!

5 L=0 45 IF ABS(C)>5 WAIT90:L=!L:LED L:WAIT30

変数Lを使って、つけたり消したりしています。
実は、一定以上大きな音がしたら、反応しているだけでした。ちょっと待つのがポイント!
どんな言葉で話しかけてもLEDは光ります。
・・・では、しゃべるパターンはどのように認識する?波形の出方をいろいろ観察してみましょう。


IchigoJam 1.4 のDRAWコマンドを使うと、波形をグラフにすることもできます。(1.2/1.3でもLCと?を使ってできます!)

40 DRAW 61,24+D,63,24+C:D=C:SCROLL LEFT

言葉の長さを使って、多少識別できると思いますが、実際に言葉を聞き分けるのはIchigoJam BASICだけでは難しいです。
もっと高速なコンピューターかマシン語、そしてどういうパターンがどういう言葉かというデータが必要になってきます。
スマートスピーカーなどの音声認識技術、一度、調べてみるとおもしろいですよ!(以前、ラズパイとJuliusで作った音声認識ロボ

SPU0414HSRの使用例を探して発見「IchigoJamにマイクをつないで歌ってみました - Qiita」は、去年の「IchigoJam Advent Calendar 2018」!
そういえば、もうすぐ12月、今年もやりましょう。

IchigoJam Advent Calendar 2019
IchigoJamに関する楽しい投稿、お待ちしてます!

絶対音感を持つ人のように、聞こえている音を音階にするツール「AbsScale」を作成。
WebAudioで1Hz程度の分解能で周波数解析(FFT)して、音階を求めて表示するツールです。

使わせてもらった「踏切の音」はこちら


1408Hz、正確なファは1396.913Hzなので、ちょっと高めのファですね。踏切によってはファ#(1479.978Hz)となることもありました。


こちらは低めの音、700Hzの成分が一番高くでています。
ファは、正確には698.456Hz。

いろんな音を聞かせてみましょう!
AbsScale

音楽が手軽になったのは音のデータ圧縮、mp3の功績が大きいです。
その原理は音を周波数成分へと変換と、その逆変換。
ブラウザ上で音を扱うWebAudioを使うと、周波数変換が手軽に楽しめます!


Audio Analyzer
Audio Analyzer に、「ス」と発声して聞かせたところ。さしすせその音は他と全然違います。
音声認識に挑戦するのも楽しそうです!


高い音になるほど右側にいきます。


音楽を聞かせるといろんなピークが観察できます。


Audio Analyzer
周波数変換する大きさは2の乗数、5〜15で指定します。こちら一番小さな5、32サンプルの周波数解析。


Audio Analyzer
こちらは15、32768サンプルの周波数変換。大きくなるほど細かく解析できますが、応答性が落ちます。
URLのハッシュで指定してリロードで、変更できます。

こちらがJavaScriptで実現する、周波数変換 FFT、シンプルに実現できますね!
いろんなビジュアライズに挑戦して、VJごっこも楽しそう!

const audio = new (window.AudioContext || window.webkitAudioContext)() const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) const source = audio.createMediaStreamSource(stream) const analyser = audio.createAnalyser() // FFT analyser.minDecibels = -90 analyser.maxDecibels = -10 analyser.smoothingTimeConstant = 0 // 0-.999 0.85 ふわっとなる analyser.fftSize = 1 << fftsize // min:32==1<<5 max:32768==1<<15 source.connect(analyser) const buflen = analyser.frequencyBinCount const buf = new Uint8Array(buflen) const g = canvas.getContext('2d') const cw = canvas.width const ch = canvas.height const bw = cw / buflen // * 4 const draw = function() { analyser.getByteFrequencyData(buf) g.fillStyle = 'rgb(0, 0, 0)' g.fillRect(0, 0, cw, ch) let x = 0 for (let i = 0; i < buflen; i++) { const n = buf[i] g.fillStyle = 'hsl(' + n + ',100%,50%)' g.fillRect(x, ch - n, bw, n) x += bw } requestAnimationFrame(draw) } draw()

音楽とプログラミング、電子楽器とコンピューターをつなぐMIDIを使って、KORGの電子楽器で自動作曲!

volca sample - DIGITAL SAMPLE SEQUENCER | KORG (Japan)」 x IchigoJam
IchigoJam用MIDIインタフェース基板キット(秋月電子)のOUT側からMIDIケーブルで接続!

鳴らし方は簡単!まずは準備、シリアル出力の速度(BPS)を31250bpsというMIDI規格に設定

BPS31250

続いて、一番左に設定した音を鳴らしてみましょう

?CHR$(#90,50,80);

二番目の音はこちら

?CHR$(#91,50,80);

鳴りました!簡単です!

(2番目の値 50 はノート番号、3番目の値はベロシティといって、それぞれ音の高さと大きさを表しますが、volca sampleの場合は無視されるので、0-127までの値、実は何を指定してもOKです。)

テンキーで0から9を押したら、対応する音が鳴る、ドラムマシーンにするプログラムはこちら

10 BPS31250 20 K=INKEY() 30 IF K ?CHR$(#90+K-48,50,80); 40 GOTO 20

同時押しにも対応しますよ!

決まったリズムを一番左の音で刻むプログラムを追加(0.5秒 = 30毎に鳴らしているので、テンポ120)

35 IF TICK()>30 CLT:?CHR$(#90,50,80);

二番目の音で主旋律を奏でてみましょう!

マニュアルのMIDI Implementation Chartを見ると、MIDIのコントロールチェンジを使ってチャンネルごとの設定をいろいろといじれます。 コントロールチェンジは #B0+ch番号 の後、変更したいパラメータの番号、続けて、設定したい値を0-127で指定します。
音の高さは SPEED で変更するので、43です。

15 S=64 35 IF TICK()>30 CLT:?CHR$(#90,50,80);:IF RND(2) ?CHR$(#B1,43,S,#91,50,80);:S=S+RND(3)-1:S=S&127

まずはSPEEDを標準の64にして、ランダムで足したり引いたりします。主旋律はRND(2)で1/2の確率で鳴らしています。

プログラムからSAMPLE(音色)の変更はできないのはちょっと残念ですが、心地よい音楽になるように、SAMPLEやいろんな音の設定をいじってみましょう!
センサーを使って奏でてみるのも楽しそうですね!

links
- KORG デジタル・サンプル・シーケンサー volca sample ヴォルカ・サンプル on Amazon

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS