ライターの欲望と街の受容性について
上京してから早くも4年が経とうとしているのだけれども、都内で時を重ねれば重ねるほど、課題意識が膨らんでいくのが、ライティング周辺で起きていること。ライターの欲望に対する街の受容性については、ここ数年で何も進展が無いように感じる。 むしろ宮下公園のリーガルウォールが実現しなかったことを初めとした”逆行”とも言える話題は尽きない。 一方で、千葉の市原湖畔美術館でのSIDECOREの展示や美術手帖でのグラフィティ特集号は、芸術の制度の延長上で捉え直されつつあるポジティブな兆候であるとも言える。 上の写真はFranceに展示に行ったときに訪れた L'Aérosol 。 誰もが建物全体にライティングできるスポットで、ストリートカルチャーをテーマとした美術館も併設されており、パリ市民のカルチャースポットの一つとなっている。渋谷にもこういう場所がほしい。 "落書き"か"芸術"かを中心とした議論をよく耳にする。その議論の延長線上として、ライティングという行為の街の受容性の評価や、ライティングと都市の共存を都市計画へと組み込むための諸手法の整理は、まだまだ発展途上だ。 慎重な議論と整理が今後も必要であろう
Unity AR Foundation についてのメモ
はじめに 最近，慣れ親しんでいるUnity で AR コンテンツを作ってみたくなり，色々と下調べしたのでメモを載せておきましょう． 最終的にやりたいことは AR オーディオビジュアライゼーション。 前に投稿したLASPとVFXGraphでオーディオ・ビジュアル作る、みたいなことをARアプリで作ってみたいというのがモチベーションです （※ 2020/5/3時点で実現はできていません ⇒ 2020/5/6 無事完成） さて、UnityのAR開発環境についてですが，Unity ARKit Pluginが2019年6月で非推奨になったので，ARKit3 以降，Unity上でのAR開発は，AR Foundationを活用するのが良いでしょう． https://www.youtube.com/watch?v=dYlndpzNqwk AR Foundation とは AR Foundation自体は開発者へインターフェースを提供しているだけで，AR機能自体は実装していません．ARKit XR Plugin on iOS や ARCore XR Plugin on Android などは別途必要になってきます． で，どんなことできるのかというと、マニュアルにもあるように，以下のような技術を提供しているようです． World Tracking：現実空間内（物理空間内）でのデバイス位置の認識と向きの追跡をします．平面検出：水平面と垂直面を検出します．点群：特徴点を検出する.アンカー：デバイスが追跡する任意の位置と向きを検出する．Light Estimation：物理空間における平均的な色温度と明るさを推定する．Enviroment Probe：Unity 内にキューブマップを自動的に作成する．フェイストラッキング：人の顔を検出して追跡する．画像トラッキング：2D画像を検出して追跡する． 基調講演を見ると何ができそうか良い感じにイメージができますね． https://youtu.be/DUUthDpiGiA 公式からサンプルが公開されているので，慣れ親しむには，これを見ていくのがいいでしょう． 以下のようなサンプルが公開されています． 平面検知：Plane Detection環境光推定：Light Estimate画像トラッキング： Image Tracking物体トラッキング：Object Tracking空間共有：World Map顔認識： Face Trackingモーションキャプチャ：Body Trackingオクルージョン：People Occlusion 留意点ですが，FaceTracking,BodyTracking,PeopleOcclusionについては，iPhoneX以降が必要になります． また，ハードウェアの性能に以下の制約条件があるので要注意です． ARKitの利用 ：A9以降のプロセッサFace Tracking ：True DepthカメラBodyTracking,People Occlusion ：A12以降のプロセッサ Face Tracking で Face Mesh をしてみる さて，試しにFaceTrackingで認識した顔にMesh Rendererをかぶせて任意のTextureを顔に表示させてみます．その他ライティングなどです． AR
音に反応する AR マスクをサクッとつくる | Audio Reactive FaceMask with AR Foundation
※ 2020/8/1時点での動作検証になります．今後の Unity のバージョンアップなどにより再現できない可能性が点はご留意ください. こんにちは．やっと梅雨が明けたようで，蝉も絶好調ですね． 1週前は早く梅雨明けてくれと項垂れていましたが，すでに夏の日差しに敗北しつつあり，さっさと秋にならないかなと思ったり・・ そういえば，１年前の夏に何をエントリーしていたか振り返ってみると，「」した．毎年，夏の到来後，早々に暑さに敗北している己はだいぶ虚弱です．数年後の夏とか，到来とともに死ぬのではないかと思ってしまう． まあでも，夏に Active に外で遊ぶのではなく，毎年，技術力 UP に集中して取り組めるのでそれはそれで良いのではないかと考えている． と，しょうもない前書きが長くなってしまったが，ここでは、Unity AR Foundation を使って Audio Reactive な AR マスクをつくる方法について触れます．Unity AR Foundation については、前に書いたこちらを参考までにご参照ください． やりたいことのおさらい では，早速，実装について触れていきましょう．と，その前にゴールとゴール達成のための検討ポイントを書いておきます（ここからの内容ですが，AR Foundation に慣れ親しんでいる前提で記載していきますので，不明点などあればお気軽にご連絡ください） 今回の検証環境は以下のような感じです． Unity：2019.3.0f6 PersonalAR Foundation：3.1.0 - preview.4ARKit XR Plugin：3.0.0 - preview.4ARKit Face Tracking：3.0.1検証機器：iPad Pro （第2世代）検証機器（OS version）：iPadOS 13.6 今回のゴールは，「音量に応じて顔に貼り付けるテクスチャを変更する」です。 実装していくにあたって，巨人の肩に乗ってしまえということで，ベースのプロジェクトは Dilmer Valecillos さんの github にある「Face Tracking Generating Masks」を参考にすることにします． で，ゴールを達成するために検討すべきポイントは以下となります． iPad のマイクから音をリアルタイムに取得したい．取得した音の強さに応じて AR で顔に貼るテクスチャを動的に変更したい． ベースとして使うプロジェクトについて 上述した検討ポイントの２つについて触れる前に，ベースとして活用させて頂くプロジェクトの具体的な変更点（追加点）に触れておきましょう． Dilmer Valecillos さんがスワップすると顔のテクスチャが変更されるデモを作ってくださっているので，これを参考にします。 https://www.youtube.com/watch?v=Wnu0zm0elHU Audio Reactive にするにあたり，スクリプトを1つだけ追加します． FaceToggle.cs という C# script を新規作成しておきましょう． で，AR Session Origin
ゼロからはじめるUnityでVJ | 音に反応するパーティクルをVisual Effect Graphでつくる
※2020年時点での検証内容になるので、情報が古い可能性があります。 ここでは、Unity 2018.3からの新機能（プレビュー版）の「Visual Effect Graph」を活用したオーディオリアクティブなパーティクル芸について触れておきたいと思います。 ※ Visual Effect Graph（以下、VFX Graph）については、他サイトでも色々と概要が載っているのでここでは触れません。ご参考までに以下の2サイトを載せさせていただきます。 Unity公式：Visual Effect GraphUnityのVFXGraphでパーティクル芸やる方法 Visual Effect Graph × LASPという選択 次の動画は実際にVFX Graphを活用して作ってみた映像となります。 学生時代にProcessingで似たようなこと頑張っていた記憶が蘇りますが、VFX GraphはノードベースのGPUパーティクルシステムなのでサクッと美しいパーティクル芸ができるのがとても魅力的と言えるでしょう。 音に反応する映像とかをつくる際に前提として必須となるのが、映像と音の間の遅延が無いことでしょう。 が、実際にUnityの標準機能のみではどうしても遅延が気になってしまいます。 この課題に対して、Keijiro 氏が github で公開している低レイテンシのオーディオ入力を処理できるライブラリ LASP を活用するのが最も良い選択肢と言えます。 LASPを試してみたい方は、先程のリンクの github から git clone して実際にまずは脳死で動かしてみると良いかと思います。 https://vimeo.com/362935880 どうやっているのか Keijiro 氏の 他のレポジトリを参考にしてたのですが、私の場合は LASP の "AudioLevelTracker.cs" をアタッチして使う方法ではなく VFXGraph をコントロールするスクリプトを別途作成して、"VisualEffect.SetFloat（"音に応じて反応させたいVFXのパラメータ名", LASPで処理した正規化済のオーディオレベル）"で音に応じたエフェクト操作をするようにしています。 ※現在は、変数のバインダーが標準で用意されており↑を準備しなくても大丈夫そうです。 "音に応じて反応させたいVFXのパラメータ名"は、今回のテストの場合には、VFX Graph内でパラメータとして定義しておき、Remapを介してSpawnノードの"Rate"、Update内の乱気流制御で"Intensity"、"Force"にそれぞれインプットするようにしています。 今後も「Visual Effect Graph × LASP」の合せ技は色々と使えそうです。 Reference LASP：Low-latency Audio Signal Processing plugin for UnityLaspVfx：Audio reactive Unity VFX with LASP
ゼロからはじめるUnityでVJ |shaderによるシーン重畳について
※ 2019年時点での検証内容のため、内容が古い可能性があります。 ここでは、Shaderによるシーン重畳について触れていきたいと思います。 Unityで、一度、このような環境を作ってしまって、後はシーンさえ作り込めば、いい感じに映像をブレンディングすることができます！自分の場合、キーボード入力に応じてブレンドするシーンの選択をしていますが、ここをMIDIコントローラに近々変えたいなという感じです。 実現したいこと まずは、実現したいことを振り返っておきます. 前回の投稿「ゼロからはじめるUnityでVJ | 各シーンの映像をRenderTextureに書き出す」でも触れたのですが、最終ゴールは「音楽に反応して動的に変化する映像を手動入力により重ね合わせて表示する」です。 そのために、「オーディオに動的に反応する映像を作る」「各シーンの映像をRenderTextureに書き出す」「各シーンのRendertextureを重畳してスクリーンに表示する」の3点のサブゴールを設定しました。 ここでは、「各シーンのRendertextureを重畳してカメラ映像として描画する」の実現方法について、ざっと紹介したいと思います。 shaderで各シーンのRenderTextureを重畳表示する方法 さて、本題に入っていきます. 各シーン（以下、サブシーンと呼びましょう）をどのようにして重畳するのか？ 基本的には、以下の3ステップで実現させます。 「サブシーンのRenderTextureをMainシーンで受け取りshaderに渡す」「shaderでサブシーンのRenderTextureを重畳する」「メインシーンのカメラに描画する」 サブシーンの RenderTexture を Main シーンで受け取り shader に渡す まずはこれですが、Mainシーンのカメラに以下のスクリプト（ここでは"MixCameraController.cs"とする）をアタッチします. 何をしているかと思うと、インスペクタで設定された RenderTexture を Shader の sampler2D（2次元テクスチャ）として扱えるようにしておきます。後々、任意の RenderTexture（shader 上では sampler2D）のみ shader でブレンディングするためにSetchannelGain 関数を用意しておきます。 shaderでサブシーンのRenderTextureを重畳する 以下はシーン重畳に使う shader（ mixshader と呼ぶことにする）になります（ここでは6シーン分を重畳できるようにしたかったので _Chan1～6 まであります） 上述した「MixCameraController」において、SetTextureで渡したRenderTextureはshader内でsampler2Dとして扱えるようになります. で、ここでは、tex2D関数を使って各sampler2Dのピクセル情報を取得し、色情報を加算します（たぶん） ちなみに、「MixCameraController」において _material.SetFloat(Gain + chan.ToString(), value) として、_Gainを渡しており、_Gainが1であれば、 col += tex2D(_Chan_1, i.uv) * _Gain_1; ここで加算されるので、表示されるようになります。
ゼロからはじめるUnityでVJ | 各シーンの映像をRenderTextureに書き出す
※ 2019年時点での検証内容になります。 前回の投稿から、約2ヶ月が過ぎました。 気がつけばすっかり秋に。さてさて、真夏から秋の間、何もしていないかったわけではなく、UnityでVJ環境の構築を着々と進めまして、ほぼ終わりの状態が見えてきました。 制作を進める中でいくつかの Tips が見えてきたので、複数回に分けて、こちらに記録を残していこうと思います。 ここでは、前回の投稿でも触れていたように、Shader を活用したシーン重畳について紹介する前に「各シーンの映像をRenderTextureに書き出す」方法について触れておきます。 shaderでのシーン重畳については以下の先駆者の方のブログと github を参考にさせていただきました。 UnityでVJシステム作ってパフォーマンスした 全体構成の振り返り 手書きで適当に書いていた全体構成を書き直しました。 実現したいことを抽象化すると以下のようになります（実際には、サブゴールにぶら下がる形でいくつかの機能も実装しています） ゴール：音楽に反応して動的に変化する映像を手動入力により重ね合わせて表示。サブゴール１：オーディオに動的に反応する映像を作るサブゴール２：各シーンの映像をRenderTextureに書き出すサブゴール３：各シーンのRendertextureを重畳してカメラ映像として描画する これらのゴールを実現するために、先程の先駆者の方の知見を元に以下の構成でVJする環境を構築しました。 今回の投稿では、サブゴール2と3について解説したいと思います。 動作環境は以下のバージョンとなります。 2019.2.5f1 今回、構築した環境で各シーンを作り込むことで以下のような映像を作ることができます。 https://www.youtube.com/watch?v=BxDTxO8PEOg https://www.youtube.com/watch?v=X6zye_-oW-4&t=117s やりたいことはいくつかのシーンの映像を RenderTexture として書き出して、複数の RenderTexture を shader を使って重畳処理するということです。 では、どうやって実現するのか？ ここでは Camera.targetTexture で取得したシーン内のカメラの映像を予め用意した RenderTexture に出力するスクリプト「Sub Scene Controller.cs」を書きました（下記をご参考に） シーンに「シーン名+Root」という空のオブジェクトを作成の上、カメラや他のオブジェクトをすべて「シーン名+Root」配下にした上で、「Sub Scene Controller.cs」を「シーン名+Root」にアタッチします. で、書き出したい映像を撮っているカメラと予め用意したRenderTextureをインスペクター上で「Sub Scene Controller.cs」に設定します。 各シーンのカメラ映像を書き出しする RenderTexture を用意した上で上記のスクリプトによりカメラ映像を書き出しするようにすると、以下のように実行中に各シーンの映像が各 RenderTexture に書き出しされるようになります。 https://vimeo.com/367694338 次の投稿では、いよいよ「shaderによるシーン重畳」の実現方法を解説していきたいと思います。 ここまでできると後はシーンの作り込みやシーンの切り替えを詰めていけばうまいことVJ環境を構築することができます。
ゼロからはじめるUnityでVJ | 暑さに敗北したのでこの夏はUnityでVJ環境を作り倒す
※ 2019年に検証した内容になりますので，内容が古い可能性があります． はじめに 今年の夏は去年より暑い.. 都内35℃とか、本当に、来年のオリンピックは大丈夫なんでしょうかね。 そうそう、夏になると何故かやったこともないAudioVisualとかVJのための環境の作り方を調べたり、実装したくなる。去年はというと「ゼロからはじめるTouchDesigner | Visual Experience Designしてみよう」で書いていたように、ワタクシ、TouchDesignerにお熱だったようです。 今年の夏は、Unityを触り始めたこともあって”ゼロからはじめるUnity | 暑さに敗北したのでこの夏はUnityでVJ環境を作り倒す”という題で、UnityでVJ環境をつくるまでの道のりを数回に渡り書いていきたいと思います。 第1回：ゼロからはじめるUnityでVJ | 暑さに敗北したのでこの夏はUnityでVJ環境を作り倒す 第2回：ゼロからはじめるUnityでVJ | 音に反応するパーティクルをVisual Effect Graphでつくる 第3回：ゼロからはじめるUnityでVJ | 各シーンの映像をRenderTextureに書き出す 第4回：ゼロからはじめるUnityでVJ | shaderによるシーン重畳について 第1回目は、下調べ中心になります。 今後の記事に関しては、若干テクニカルな内容を入れていきたいと思いますので、前提として、以下の1〜5についてイメージできることが望ましいです！とか、言いつつ、私自身、Unityは数ヶ月前に触り始めたばかりなので、内容に至らない点や間違いなどありましたら、お気軽にコメントでご指摘ください！ Unityの画面構成と操作方法を理解している オブジェクトの作り方と動かし方を理解している オブジェクト指向にある程度理解がありC#の基礎知識を有している オブジェクトへのスクリプトのアタッチを理解している スクリプトを利用して衝突判定やkey入力ができる スライダーやボタン等のUIの作り方と自作UIによるオブジェクト操作を理解している そもそもUnityでVJできるのか？ そもそも、MAXMSPとかTouchDesigner、NOTCHではなく、UnityでVJする人いるのか？って感じなので、ちょこっとYouTubeで検索してみる。 https://youtu.be/jLmbjudThlA 日本人だと Keijiro Takahashi さんという方が、かなり神…. 今回の下調べの趣旨とは外れますが、Volumetric Capture のデモを Unity で実装してたりとか、他にもめちゃ参考になる情報が満載… 勉強させていただきます.. いやーこれ拝見していると RealSense と Unity の Visual Effect Graph でめちゃくちゃ色々できそうな予感。使いこなせたら表現の幅が広がりますな。 あとは、Unity で VJ 環境つくるメリットとしては、商用でなければツール利用料が無料ってところでしょうかね。TouchDesigner で作ると無料版では 1280x1280 までで、フル HD の書き出しは有料版じゃないとできないので価格の面でのメリットもありですね。 じゃあ、どうやって VJ するような環境だとか、音に反応する Visual Effect を作るのかという感じなのですが、今回は、こちらの記事を参考にさせていただきました。 github で Unity プロジェクトを公開いただいているのが勉強にとても助かります。 特に keyboard アクションに基づいたシーン切り替えや加算のところを参考にさせていただき、頑張って作り方をデコンしつつ、自分なりにプロジェクトを作っていきたいと思います。 作り方を理解しましょう まずは作り方を整理していきたいので、amagi
ライティング文化の系譜 |The history of writing
特に渋谷エリアなんかを散歩していると、誰かが描いたグラフィティを目にする。 単なる違法行為としてではなく、時には芸術として語られるグラフィティは、一体、どういった変遷で醸成されてきたカルチャーなのか、個人的に気になったのでリサーチしてみた。 グラフィティは、元々、イタリア語の graff（落書き）が語源で、この言葉にはネガティブな意味合いが込められているらしい。グラティフィライター界隈では、グラフィティではなく、"ライティング"と呼ぶらしい。私も、カルチャーとしてのグラフィティに敬意を込めて、ライティングと呼ぶことにする―。早速だが、ライティング文化の初動から黄金期までの系譜を一気に振り返ってみよう。 ライティング文化の激動期/The history of writing ライティング文化の初動については、いくつかの説があるのだが、マンハッタンのワシントン・ハイツ、西204丁目に住んでいたジュリオという名の少年が「JULIO204」というタグを近所の壁に書き始めたのが、その始まりであるとされている。 同時期に「JULIO204」の20ブロック先に住んでいた、ギリシャ系の少年、ディミトリウスが、ジュリオのタグを目にして自身のタグを書き始めた。 彼は、後に世界初のグラフィティライターと呼ばれることとなる Taki183 だ。 メッセンジャーであった彼は誰よりも都市全域（オールシティ）を駆け巡り、メディア関係者が多いエリアへ「自分の名前+住んでいる番地」を意味する「Taki183」というタグを書き始める。 69年のことであった。 70年代に突入すると、New York Timesが、Taki183のインタビューを初めて紙面へ掲載する。New York Timesの波及力により、Taki183は「最初の有名なライター」として名を知られるようになった。 Taki183の登場が、NYのライティングブームの火種となり、ライターは激増していった。ライター達はテレビや映画の撮影で頻繁に使用される場所や観光スポットを中心に、自らの名前を公共空間へ描くことで有名性の獲得を競うようになる。 そんな彼らにとって最も魅力的なメディアは「地下鉄」であった。地下ネットワークを日々駆け巡る地下鉄というメディアは、都市全域（オールシティ）へ自身の名前を拡散させるための触媒となり、有名性の獲得とオリジナルスタイルの確立に向けて、ライター達によるスタイルの競争は激化していく。 さらに、”Wild Style（1983）”や、”Style Wards（1983）"などのライティング文化を題材とした映画が公演されると、ライティング文化は、全米全土のみならず、ヨーロッパや日本にも伝搬していった。 この頃、ライターは「ヴァンダリズム型（Bomber：ボマー）」と「アーティスト型（Piecer：ピーサー）」に二極化していく。地下鉄でのライティングから登場した”Keith Haring（キース・ヘリング）”や、今もなお、レジェンドとしてストリートカルチャーへの影響が大きい”Futura2000（フューチュラ2000）”など、ギャラリーとの接点があった一部のライター達のみが、ライティングの媒体を都市からキャンバス（アート）へと移行していった。 80年代の中頃には、ライティング行為そのものが風紀を乱すものであるという認識は社会の共通認識となっていた。この無秩序と戦うためにMTAのロバート・アイリーらが警察官5000人を投入して、割れ窓理論[※]を応用した「クリーン車両プログラム」を実行に移す。 各地下鉄ラインの終点で、車両に１つでもグラフィティが発見された場合、そのグラフィティが完全に消去されるまで走らせないというシンプルなものであったが、これが功を奏し、90年代前後には、地下鉄を中心としたライティングは衰勢していった。 ※ブロークンウインドウ理論ともいい、小さな不正を徹底的に正すことで、大きな不正を防ぐことができるという環境犯罪学の理論 Writing culture first started in New York in the 60s. The first waves occurred in the 70s and it reached its golden age which lasted until the mid-80s. Here, I would like to trace the genealogy of writing culture by
クオーツ時計をArduinoで制御してみる/実験日誌
さて、今回の相談はある作品展示のお手伝いです。 「時計を2～10倍速で動かすにはどうすればよいでしょうか」に対してどう答えていったのか。 まず、時計がどのような仕組みで動作しているのかを知る必要があります。 あなたは時計ってどう動いているか知ってますか。恐らく知らない方の方が多いのではないでしょうか。というこで、まずは、時計の種類と動作原理から簡単に説明したいと思います。 時計は、動作原理で3分類に分けることができます。「機械式時計」「クオーツ時計」「電波時計」です。さらに、機械式時計は手巻き式と自動巻き式があります。まず、機械式についてですが、基本的には、ゼンマイを巻き上げ、巻き上げられたゼンマイが戻ろうとする力を利用して動きます。手巻きと自動巻きの違いはその名の通りで、ゼンマイを手で巻くか自動巻きにするかの違いです。 この機械式の時計の速度を上げたい場合にはどうすればよいか。理科が得意だった方は一瞬で想像できるかと思いますが、そう。ギアのピッチを変更する必要がありますね。2倍速なら2倍速専用、10倍速なら10倍速専用のギアの設計が必要となりますので、かなり手間と労力がいりそうですね。 「クオーツ時計」はどうでしょうか。クオーツ時計は、その名にクオーツという言葉が入っているように、水晶を利用している時計です。水晶は電圧を付加することで振動する性質があります。 ちなみに、時計に利用されている水晶の場合、電圧の付加で32,768回/秒で振動する性質があるので、この振動回数をカウントICでカウントして1秒と定義し、さらに1秒に1回、コイルに電気信号を送ることで、コイル内に電磁誘導を発生させ、ギアを回転させます。 って言っても分かりづらいかと思いますが。これを踏まえると、コイルに１秒に1回、電気信号を付加するとギアが進むので、1秒に2回、電気信号を付加すれば、通常の2倍の速度でギアが進みそうですね。これはArduinoなどの手軽なマイコンで簡単にできそうです。 電波時計は、情報なんちゃら機構から発信している電波そのものを改定しないと無理なのではじめから検討外とします。 https://youtu.be/qux3fLCf2FU ということで、改造方針は決定です。 お題：「時計を2～10倍速で動かしたい」方針１：機械式時計のギアを改造して、各速度毎にギアを設計することで任意の速度で動作させる方針2：クオール時計のパルス間隔をマイコンで制御することで任意の速度で動作させる制約：なるべく小型にしたい。期限は１週間ぐらい。予算が無い。 そりゃ、もう方針２ですよね。 ではでは、実際にクオーツ時計をハッキングしてみましょう。 クオーツ時計をArduinoで制御してみる 早速、改造してみましょう。まず、クオーツ時計の購入。Amazonで数百円で買えます。そして、早速、分解開始。 まず、カバーを開けてみましょう。カバーを開けると、ほう。ギア各種にコイルと電磁誘導で回転する磁石付きのギア、コイルの裏側にはカウント用のIC。至ってシンプルです 回路には水晶振動子がついてますね。なんとシンプルで美しいことよ。 で、今回はパルスを自分でつくるわけなので、下の写真でいうと、左の回路はいりませんので、コイルと切り離します。やることはすごくシンプルで、左をマイコンに置き換えてあげて終了です。上の写真の左上とかいい感じに空間が空いているので、ここにマイコンとか入れられたら最高。 Arduinoによるギア回転の制 今回は、小型のUSBタイプのArduinoを活用してみました。コイルから出ている2本の線をArudinoのD10,D11に接続します。（てか、なんでこのArduino,D9からはじまるの？）そんで、いつでも回転速度を変更できるように、ダイヤル式の可変抵抗をA1につなぎます。アナログinputピンで抵抗値を参照して、抵抗値に応じて、秒針の速度を制御できるようにします。 Arduinoに書き込むプログラムはこちらを参考に自作してみました。 以下はデモ動画. 可変抵抗のダイアルを回すことで秒針の速度も可変する. 小刻みに時を刻む時計の様子がなんとも愛らしい。 今回は展示準備のお手伝いということで作ってみましたが、他の表現への利用もできそうな予感がします。 https://vimeo.com/311676861
ゼロからはじめるTouchDesigner | Audio Visualization
本日は、台風ですね。もはや、猛暑＋台風とか、あれだ、もう、TDやるしかないっすよね。 ってことで、前回、ご紹介したTDの教本から「オーディオビジュアライゼーション」について振り返りをしたいと思います。 下の映像は、教本見ながらTDで作ってみたオーディオビジュアライゼーションです。 基本的には、「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング＆プロトタイピングの極意」に沿って制作すれば、サクッとこんな感じのオーディオビジュアライザーションができるのかと思いきや、少しつまずいたところもあったので、補足的な内容を記載したいと思います。 まだ初心者なので用語の使い方が間違っている可能性も.. ※「Visual Thinking with TouchDesigner – プロが選ぶリアルタイムレンダリング＆プロトタイピングの極意」で基本操作を一通り終えている前提での説明になるので、細かい点は、本を購入してご確認頂くのが良いと思います！ https://vimeo.com/282070549 かなりざっくり言うと、CHOPでオーディオファイルを読み込み解析後、数値データをSOPに渡して、Y軸の変化量として波形描画。その後、feedbackやblurでいい感じにエフェクトかけてるって感じ。 step1~step6のブロックごとに軽く説明したいと思う。 step1. CHOPで音源を数値として扱えるようにする CHOPにも多様なオペレータが用意されている。 音源の読み込みは、「audiofilein」オペレータ、フーリエ変換は「audiospect」、チャネルのデータの時間変化を記録する「trail」オペレータ、入力された音源の最大値や最小値などを分析する「analyze」などなど.. 公式サイトを眺めていると、CHOPだけでも数十種類のオペレータがあるので機会があったら確認したいと思う（※TDはオペレータの種類と定義知っている=目標の表現のためにストラクチャーを考えられる、と言っても過言では無いので） ここでは、「audiofilein」で読み込んだ音源をそのまま、null に渡して、SOP に渡す。（※nullに渡すのが違和感を感じる方もいるかもですが、TDでは他のオペレータに値を渡すためには、nullに保持させて渡すのがお作法なのでここは何も考えずにそうすることにする） step2. CHOPの値に基づき波形を描画する 「grid SOP」「chop to SOP」「geo COMP（3Dモデルを入れるための箱のようなもの）」の順に繋いでいく。 ここで、「chop to」のパラメータパネル上の「CHOP」に、step1で作成した「null CHOP」を参照させることで、grid SOPのY座標Y(1)が、CHOPデータ（ポイントとポイントのアトリビュート（属性））に変換される。また、「Chanel Scope」には参照チャネルを設定、「Attribure Scope」にはY(1)を設定することで、Y値だけを参照するように設定する。 ※ 「geo COMP」を作成後、「chop to」と接続ができないかと。普通に本を読み進めるとここでつまずくはずです。 「geo COMP」をダブルクリックすると「Torus」が配置されているが、「Torus」を削除後に「in」「out」を配置し「out」オペレータの右端の紫ボタンを点灯させておく。上の階層に戻ると波形が描画されているはず。 あとは、「wireframe」のMATオペレータを配置し、geoのRenderでMaterialを「wireframe」に設定（ここは好きなMATで良いです） そして、最後に「geo COMP」→「render TOP」、「render TOP」に「 Camera COMP 」を割り当てることで、レンダリングされる。 step3～4. CHOPの値に基づき波形を描画する ここでは、step2でレンダリングされた波形に対して「残像」をつけてみよう。 残像を加えたい場合には、「Feedback」を活用します。Feedbackは前のフレームの映像を表示してくれるため、ループ系を構成することで残像効果をつけることができる。残像を残したいのが「comp1」になるので、「Feedback」の「Target TOP」のパラメータに「comp1」を参照させる。 これで一旦は完了だが、もう少し味付け。とうことで、キックに合わせて波形の色合いを変化させてみる。 「audioband CHOP」「analyze CHOP」「Trigger CHOP」と「analyze CHOP」「Trail CHOP」を繋げる。 「audioband CHOP」はいわゆるEQ（イコライザ）。詳細は割愛するが、この事例では、高音域をカットするように設定している。キックのタイミングは、「analyze CHOP」のRMS powerのパラメータを活用し「Trigger CHOP」で、RMS powerのパラメータが一定しきい値以上を超えたら、level TOPの透明度を変更するようにしている。 step5～6. ぼかし・背景色を追加し出力設定・書き出しをする 最後に波形にグロー（ぼかし）のエフェクトをつける。下の図のように「Bur TOP」をつなぐだけである。加えて、「constant TOP」で背景色に「黒」を設定し「Over TOP」で背景色として重ねれば完成。 完成したオーディオビジュアライゼーションを全画面で観たい時には、「window COMP」を活用する。「Open as Perform window」で「Perform」を選択すれば、全画面で確認することができる。 駆け足ですが以上が作成フローとなる。詳細は、教本にとても丁寧に記載があるので、是非、ご確認を！ 勝手に本の宣伝みたいですが。