福野泰介の一日一創

iPhone/iPad用のOS、iOSがメジャーバージョンアップ、iOS15となりました。早速ダウンロード、届きやすくなったアドレスバーがいい感じ。

気になる開発面で大きいのはWebGL2対応。 多量のオブジェクトをまとめて描画できるようになりより派手なUXの実現が可能になった様子。メモリ間のアクセスもよくなったようなので機械学習での活用にも期待できそう。

こちらWebGL2のサンプルが60fpsでスムーズに動きました。
「サンプルで理解するWebGL 2.0 - ChromeとFirefoxが対応したWebGL 2.0の利点とは - ICS MEDIA」

「CyberFriday - CyberValley, Japan」
3D空間を美しい計算で動く10万の点、グルグル自動で動くデモに改造して、今週末のサイバーフライデーを告知する「CyberValley, Japan」のウェブサイトとして使わせてもらいました。

GLSLやカメラの動きなど、いろいろといじってみたいところです。(TypeScriptで実装されている ics-creative / 170706_webgl2_feature / transform_feedback をforkした cyber-background on GitHub、動かし方など気になる方、サイバーフライデーへどうぞ!)

「シンポジウム 「脱ハンコ」と サイバー時代の個人認証 | 京都大学公共政策大学院」
サイバーな週末、土曜日の京大オンラインイベント、登壇します！
リアル社会での意思表示「ハンコ」、サイバー空間ではどのように示しますか？
開発者の方、どのように実装しますか？

Welcome to CyberSociety!

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部長が創業した、株式会社ハックツ主催のものづくり好き学生のためのハックツハッカソンにオンライン参加！

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

今回の優勝者は、、、

『　チーム塩パン（@pkjvlg_xx 、@Confetti2511 ）っチュ！！！　』

2人には【 Monster energy1年分 】をプレゼントするっチュ🎁

本当におめでとうっチュ🎉#キャンプハッカソン pic.twitter.com/gYdkEn10GX

&mdash ハックちゅう＠株式会社ハックツ (@Hackz_team) September 24, 2020

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

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タグで埋め込むだけで使えて便利！

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