モノクロタイム

I'm from the future!

【vvvv】昭和の映像っぽいフィルタを作る

こんにちは,れいじです.

何かエモいCGとか映像ないかな~~~とYoutubeをDigっていたらこの動画にたどり着きました.


東京ゲゲゲイ イデオロギー

仄暗い感じが最高にかっこいい……戦中映像もいい…ということで,某昭和の映像っぽいフィルタをvvvvで実装してみました.

パッチは以下のとおり.

f:id:yomoyamareiji:20170924153528p:plain

各種オプションの解説をしていきます.記載のないノードに関しては標準値です

VideoIn側

映像入力側です.USBカメラからの入力を取っていますが,静止画でも大丈夫.

* Blur

カメラ入力をぼかしています.Widthを0.15に設定.

* Lomograph

カメラ入力をグレースケールに変換しています.本当はシェーダ書くべきなんだけど面倒くさかった それぞれ

  • Vignette Start:0.50

  • Vignette Amount:0.50

  • Vignette Dodge:1.00

  • Contrast:1.00

  • Level:0.65

  • Effect:6

  • Type:6

  • Iterations:4

に設定しています.

* Transform

Quadの大きさをRenderに揃えるために使用しています.ScaleX,ScaleYを2.00に設定.

Noise側

古い映像特有のノイズを乗せます.

* Noise

ノイズを発生させます.標準だとノイズが細かすぎる&ノイズの色がはっきりしすぎているので調整します.それぞれ

  • Color A: H:0.00 S:0.00 V:0.00 A:0.25

  • Color B: H:0.00 S:0.00 V:0.25 A:0.25

  • Width:50

  • Height:50

に設定します.

  • FullScreenQuad

Groupで映像をMixする場合,Binの数が大きい方がレイヤ的な意味で上になります.

余談ですが,Quadを使用すると下に存在するレイヤが見えなくなってしまい,別途Blendノードを使用して重畳モードを指定・Transformノードを使用してスケール変更したりとかなり面倒です.

FullScreenQuadだと前述2つの設定がこれ一つで済むので便利です.以下のように設定してください

  • Blend Mode:Blend
Renderer

こんな感じの映像効果になります

f:id:yomoyamareiji:20170924155113g:plain

コスプレ写真の加工にも使えそう

f:id:yomoyamareiji:20170924154857p:plain

かなりピーキーなフィルタを作ってしまいましたが,いい感じに使ってもらえると嬉しいです👌

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

【vvvv】FiducialTrackerでマーカー同士の距離を測るやつ

こんにちは,れいじです.

今回はちょっとしたメモ書き的な感じで.

vvvvではもちろんAR的なプログラムも簡単に作ることが出来ます.

その中でも比較的簡単に使えるマーカーはARToolKitが提供する元祖ARマーカーとFiducialTrackerです.

FiducialTrackerはマーカーがオシャレで好きです.VJCardboardでも使用しました.

FiducialTracker (FreeFrame DShow9) | vvvv

reiji1020.hatenablog.com

vvvvでのFiducialTrackerは非常に有能で,何もしなくてもRenderer上のマーカーの中心座標を取る事が出来ます.

勿論複数のマーカーのトラッキングにも対応しているので,中心座標の差を取ればマーカー同士の距離を取ることが出来ます.

あ,もちろん厳密な距離を取るのであれば多少の計算は必要です.とりあえず簡単な距離が取れればいい人向け.

パッチはこんな感じ.

f:id:yomoyamareiji:20170716222145p:plain

今回は2つのマーカーの距離を取るため,GetSliceを2つ配置してそれぞれindex0,index1の値を持ってくるようにしています.

このGetSliceでは各マーカーの中心座標のうちX座標を取り出しています,Y軸の差を取りたい場合は隣のピンに接続するとよいです.

indexを指定すれば欲しい値を持ってきてくれます(指定したindexが見つからない場合は最大indexの値を持ってきます)

f:id:yomoyamareiji:20170716223040j:plain

画面左下に数値が出ます.

他にも何個かTips的なのが続きます.もし使えそうなのがありましたら自由に使ってください.

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

LOGICOOL ウェブカム HD画質 120万画素 C270

LOGICOOL ウェブカム HD画質 120万画素 C270

【vvvv】マウスオーバーでフワッと動かす

こんにちは,れいじです.

めちゃめちゃ久しぶりにブログ書く気がする…

この前行ったvvvvオフ会の参加レポも後々あげたいですね.

さて,今回はTips的なパッチです.

体験型アートに無くてはならない,所謂「マウスオーバー(タッチ)でCGを変化させるアレ」です.

パッチはこんな感じ.

f:id:yomoyamareiji:20170703225617p:plain

Switchノードが複数ありますが,使っているのはColor,Value,Stringのみです.全て表示の切り替えに使用します.

マウスオーバーはHittestというノードを使用すると簡単に実装できます.パッチで使用しているのはHitTest(2DCircle).

切り替え時にDamperを挟むとヌルっと動いてくれるので気持ちいいです.Damperに関してはパラメータいじってません.

f:id:yomoyamareiji:20170703230048g:plain

ヌルッ

参考にしたのはこことHitTestのヘルプパッチです.

discourse.vvvv.org

vvvvは当たり判定なんかも割と簡単に実装出来ていいですね.

ハッカソンでvvvv使ってあれこれしたいなーなー

ではでは!

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

TouchDesigner Beginners workshop vol.001に参加しました

こんにちは,れいじです.

社会人初の勉強会に行ってきました.

peatix.com

vvvv派じゃなかったのかよ!と突っ込みが来そうですが笑

元々気になっていて,Macにインストールはしたものの放置していたままだったことと,会場がアクセス良好だったことを気に参加.

TouchDesignerの公式ページはこちら

Derivative TouchDesigner

べんきょうしたこと

ビギナー向けのイベントだったので,基本的な操作方法と代表的なノードの紹介.

vvvvがHLSLやVLなどでシェーダを書いたりパッチを書いたりできるのに対し,TDはPythonでノードを書くことが出来ます.

独自ノードを作るなら,TDの方が学習コストは低そう(個人的な感想)

つくったもの

フィルタ芸人なのでEdgeを使ってコソコソしてました.

マイクから音声を入力するノード(Audio Device Inだったかな)を使うとTDがクラッシュして落ちるという悲劇に見舞われたため,外部入力を上手く使いこなせず終了.悲しみ・・・

f:id:yomoyamareiji:20170521221335p:plain

作業画面はこんな感じになりました.

f:id:yomoyamareiji:20170521221729p:plain

vvvvだと.exeを実行した後にメニューも何も無いまっさらな画面が出てきて,操作も独特だし何やねんコレ・・・みたいな事になりがちなんですが,TDはUnityみたいにメニューやGUIなどが配置されていて,何をすればわからない,的なことにはなりにくいです.個人的にはPythonでゴリゴリ拡張していけるのも素晴らしいと思ってます.やはり学習コストが低いのが強み.

OSC通信を使用したアプリとの連携やMIDIコンなどの外部接続ハードウェアに対して親和性が高いのは最近のマルチメディア用プログラミング言語界隈だとスタンダードになってますね.あ,TDだとUnityとの接続がすごく簡単に済むらしいです.

ちょうど今AmazonでTD関連の書籍を探してみたんですが,日本語の本って無いんですね.今回のイベントに参加されてる方々を見ると,勉強したい(使ってみたい)と考えてる方が結構居そうだったので,これから関連書籍・情報が増えてくるといいなあ.

ではでは〜