GLSLを使った音のビジュアライズに続き、音源として使うGLSLに挑戦!
数式だけで生成するキック、スネア、ハイハット。

float kick(float t) { return sin(6.283 * 53.0 * t - 10.0 * exp(-50.0 * t)) * exp(-t * 1.3); } float snare(float t) { return noise(t) * max(0.0, 1.0 - min(0.85, t * 4.25) - (t - 0.25) * 0.3); } float hihat(float t) { return noise(t) * exp(-t * 200.0); }

(参考、GLSLで音楽(はじめに) by @gaziya5
PSG音源、FM音源、PCM音源に続く第4の音源!? GPU音源もガッツリ楽しめそうな予感。


GPU音源 - リズムパターン基本」(src on GitHub)
ランダムにパターンを切り替えている内に、どこにもなかった音楽に出会えるかも。 MacのChromeで動作確認。スペックが足りず処理が間に合わない場合は、bufsize level を大きくしてみてください。 リアルタイムに演奏する楽器としては11.61msecは目指したい!


jigインターンOB部長が創業した、株式会社ハックツ主催のものづくり好き学生のためのハックツハッカソンにオンライン参加!


キャンプ上で便利で楽しいツールがテーマ!女子エンジニアによるデータに基づく説得力あるプレゼンと、実装力がよかった!!

優勝、おめでとう!

いろいろ創ったらお披露目する場もほしいですね!

2020/10/3-4土日開催、NT鯖江2020、開催場所を1Fに変更しました!


会場の鯖江商工会議所1Fロビー、目の検査のCマーク型の机、NT鯖江の展示ブースとして使います。(SCC)


ゆったりできるカフェ付き、ソファーコーナーでゆっくりできます。


鯖江の逸品、並んでます、あのパソコンにあの帽子のミニチュアも!?

駆け込み、展示もおまちしてます!
2020/10/3-4 「NT鯖江2020

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で創ったリズムマシン

機械学習(AI)で活用されるGPU(ジーピーユー)とは、小さなタスクを多数のプロセッサで並行してこなすコンピューター。 C言語に似たプログラミング言語、GLSLを使って、ブラウザ上でも遊べます。


cloud」(GLSLを使ったアニメーションを背景にプログラムを確認できます)
ほぼサンプルのままですが、色を変え、縦横比を合わせて、ゆっくり拡大縮小させてみました。1ピクセル毎の処理 main が並列して走ることが特徴です。 普通のプログラムだと繰り返しが多くなるほどに遅くなりますが、並列実行はそれがありません。ちょっと変わったお絵かき方法が楽しめます。

参考になったのが、こちら「The Book of Shaders」、原著は英語ですが、日本語で前半が翻訳されています。 動き、自分でいじれるサンプルが豊富に含まれているので、気軽に楽しめます。(前提知識、何かプログラミング言語の経験とベクトルの知識)

きっかけは、csv-tableで始めたWebComponents。Twitterのハッシュタグで検索して発見した、shader-doodleタグ。 シェーディング言語をHTML内のscriptタグで埋め込むだけで使えて便利!

目指せ、技術のわらしべ長者!

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