hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > VJ > 役に立たないウェブページを作る

役に立たないウェブページを作る

VJ

この記事ははてなエンジニア Advent Calendar 2019の24日目です。明日はid:shallow1729の以下の記事です。記事を出すのがぎりぎりになってしまい追い抜かれてしまった…。
shallow1729.hatenablog.com

気を取り直してこんにちは、id:hitode909と申します。普段はウェブアプリケーションエンジニアとして働いていて、コードの力で人間の暮らしを豊かにするために暮らしていますが、趣味では、役に立たないものを作るのが好きです。

f:id:hitode909:20191224234956g:plain
こんにちは

主に、絵が出るページや、音が出るページのような、意味はなく、役に立たないが、見ると(見る人によっては)楽しいものを作るのが好きで、学生の頃から数えると気づくと10年以上やっています。

先日作ったもの

最近作ったのはこちらで、同僚の3Dモデルを時計を表現するためのアセットとして利用するというページです。当然役に立つはずはありませんが、見ると(人によっては)楽しいというものです。

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20191204/20191204203442.gif

MASAWADA CLOCK 3D - hitode909の日記

glitch.com というオンラインでHTMLやJavaScript、CSSを書けるウェブサービスが最近は気に入っていて、手元の開発環境やビルド環境など考えるまでもなく、いつどこにいても、ブラウザさえ開けばコードを書き始めることができます。
regular-khaan.glitch.me

今日作ったもの

今日は、絵と音がほんとうの意味で連動しているものはあまり作ったな事ないなと思ったので練習することにしました。
完成した絵が愉快さからコードを書き始めることもあれば、技術的に試したことないことをやってみたい、できると思うけど何か困ることがあるかもしれないのでやってみたい、といったことから始めることもあります。

こちらが完成品です。大きな音がします。この段階ではわけわからないと思うのでのちに何を作ることにしたのか説明します。
www.youtube.com

発想

普段の趣味活動では、あまり趣味について他人と思いを分かち合おうという気持ちがないので、こういう物を作りました、以上、と言って終わってるのですが、せっかくなのでこれを作ろうと思ったきっかけを記しておきます。

  • 音と音を連動させるには二種類の方向がある、音に合わせて絵を動かすか、絵に合わせて音を出すか
  • 前者はよくある(VJがマイク入力に応じて絵を動かす)が、後者(ダンスしてる人に合わせて即興演奏するとか?)はあまりない
    • DJにあわせてVJが絵を出すことはあってもVJにあわせてリアルタイムにDJが合わせにいくことはあまりない
  • 絵を使うためには→PCのカメラの入力を取ってくる
  • すごくリッチな状態を考えると→画像認識して、何か物があったら音が出る
    • 犬の絵を見せると犬っぽいサウンドが流れるとか
  • ところで一番簡単なカメラの入力で取れるパラメータといえば→各ピクセルの画素値
  • そういえば世の中にはバーコードリーダーを使って演奏する人達を去年くらいにDOMMUNEで見てかっこよかった
  • カメラから入力された各ピクセルの輝度をそのまま波形として再生ると似たような音が出るのではないか
  • 実現のためのAPIがブラウザにあることはわかっている
  • ついでに、可聴化に使った領域のピクセルはいい感じに表示しておく

そうしてできたのが冒頭の動画で紹介したもので、カメラの入力のうち中央付近がバーコードリーダーの役割になっていて、カメラに映った画素値を音の波形として聴けるようになっています。
人が座っているだけならブオーンとした嫌な音が出ますが、印刷物などをかざすと高い周波数の嫌な音も聞こえるようになっています。
www.youtube.com

実際にお手元のPCやスマホで試したいという方は、こちらのリンクからお試しいただけます。突然大きな音がするのでびっくりされると思います。
20191224.glitch.me

コードはこちらです。Remix Your Ownボタンを押すことでforkして改造することもできます。
glitch.com

役に立たないものから役に立つものへ

このようにして作られたコンテンツ単体で役に立つことはほぼありませんが、ずっと積み重ねていると、偶然役立つこともあります。
普段は使いやすさを考えたUIを作っていますが、ときには、めでたさ重視だったり、楽しさ重視のページを作ることがあります。そうしたときに引き出しを広くしておけると、手早く作ることができて便利です。
先日開催したブラウザでVJをやるワークショップも日々のこのような遊びから生まれたもので、好き勝手に絵を動かしているうちに、気づくとイベントに集まった人達に愉快なを見せて楽しませたり、それを学生の方々にワークショップという形で紹介できるようになりました。
blog.sushi.money

本日はわたくしの31回目の誕生日でした。10年前から画像をグリッチさせるAPIを作ったりしていて、まだ似たようなことをやっているのか、と神妙な気持ちにもなりますが、もう10年くらい遊んでられそうな気もします。
blog.sushi.money

ウィッシュリストはこちらです。何かください!!!
https://www.amazon.co.jp/hz/wishlist/ls/CUACF9TYLOUS/ref=nav_wishlist_lists_1?_encoding=UTF8&type=wishlist