However, if you're only using `@babel/preset-env`, `@babel/preset-typescript`, and `@babel/preset-react`, Babel may no longer be necessary. Parcel supports all of these features automatically without a Babel config, and Parcel's default transpiler is much faster than Babel.…
……えー、つまり元の写真のセンスが大事ということですね、これは。とほほ。また"async"のジャケット画像作成に用いられている高谷史郎氏の toposcan という技法は、こんな簡単なコードでは再現できない複雑な処理をやっている、のでしょう。たぶん。2018-04-01(Sun)追記:コードをGitHubGistに移動しました。
菊池先生のツイートでBoidsのことを思いだし、Webで検索したら実装サンプルが見つかったので手を出してみたわけです。主に参考にしたのは次:JavaScript, HTML5で『群れ』をシミュレーションするレシピ (ボイド)Unity で簡単な Boids の群れモデルを実現するしかし音楽にあわせて手を入れていくあいだにBoidsの面影は徐々に薄れ、結局そう言っても気づかれないようなものに。まあそういうこともあるさ。これまでとは傾向の違うビジュアライザーになったのでよしとしましょう。…
はじめは箸にも棒にもかからない感じだったのですが、なんとなくあきらめがつかず粘っていたらここまできました。三角関数で周期性を与えるやりかたについてはすこしつかめてきたような気がします。しかし三次元までは遠いなあ……
彩度とアルファチャンネルでごまかしているような気もしますが、まあそれはそれということで。なんと言いますか、はてしなくいじっているとそのうち偶然作品っぽいものに到達するという感じでまだまだ効率が悪くてしかたがありません。ある程度不自由なく操れるようになるまでどれだけかかることやら。Processing.js版はHTML 5化した上にjQuery Mobileを使って全面的に書き換えた(2024-04-28注記:jQuery Mobileの使用はだいぶ前にやめました)「はりぼてミュージアム」でご覧になれます。…
偶然性なし、入力変換なし、ということで言えばSwaying Heartsに近いものと言えます。
この手のものはアイディア勝負なので思いついたらまたなにかやるかもしれません。
座標系だけでライトとか反射とかぜんぜん触れてないので世間のイメージするところの3Dグラフィックスには遠く及びませんが、なんとなくCGぽくなったと言えなくもないのではないかと……そんなことないか。画面の左右をそれぞれのチャンネルに見立て、縦軸を周波数に、横軸をデシベルの音量に、奥行き方向を時間軸にして各ポイントを塗りつぶしてます。塗りつぶしているはずなのに空きが見えるのは再生バッファがちいさいためですが、理由はよくわかりません。まあ思いがけない表現になったので結果オーライということで。あとは色相を八小節単位で循環、彩度を曲全体通して徐々に増加、明度は時間軸方向で減少、という感じで計算。意外に見られるものになったなあ、というのが個人的な印象です。…
描画フレーム時点の音の波形を高速フーリエ変換で周波数スペクトラムに変換し、その中の22.5Hz(A1)から1320Hz(A7)までを取りだして、常用対数スケールにした値をHSV色空間の彩度にマッピングした色で矩形を描画しています……何のことかわからないかもしれませんが、大丈夫、書いている本人もよくわかっているわけではありません(<-おい)。今回はIn Closed Blue Roomの反省を元に、再生しながら描画するのではなく、一度必要な情報を記録して、動画を作成するときは再生音楽に頼るのではなく記録した情報を元に描画するようにしてみました。描画量が少ないことも奏功してか、これで720P(1280*720)で15フレーム/秒の動画作成に成功。ずれてるような気もしますがまあ細かいことは気にしないにかぎります。…
元の曲は「部屋向けの音楽……か? 」で公開したものです。ネタを明かせばフレーム描画時の再生音声の波を縦軸分だけ表示するだけの単純な処理ですが、色のつけかたと履歴の取りあつかいでちょっとかたちになっているかな、と。しかしやっぱり試してみるもので、最後は予期せぬ展開になって自分でも楽しめました。入力や偶然を生かした方向もおもしろそうだと認識した次第。とはいえ動画作成には苦労しまして、リアルタイムだと720P(1280*720)でもほぼ問題ないのに、Processing標準の動画作成機能だと遅れが顕著に……。あんまり高解像度を追求してもしょうがないので縦横を半分にして作成し、SONARで曲とあわせたときに倍にして720Pに戻しました。ちょっとぼけて見えるのはそのせいです。このへんは今後の課題だなあ。…
開発環境を整備するとは言っても基本的にはProcessingのJARファイルを外部ライブラリとしてがんがん追加するだけのことです。参照関係を最小にしようと思うと多少試行錯誤が必要ですが、普通の人は全部利用可能にしておけばよいのではないかと思います。…
…