[vvvvオフ会]感想：第一回vvvvオフ会実施しました！

本日、主催側で、第1回vvvvオフ会を実施させていただきました！

詳しい説明は次回にしようかと思いますが、
内容をさっくり報告させていただこうと思います！




















第一回内容はこんな感じ。


















vvvvを使ってVJパッチを作ろう！という企画でした！
目標は、こんな感じ！！

みんなでこんな感じでがんばりました！

今回使用したノードは以下です。

Quad 

Renderer

XY 座標について

Transform(Scale,Translate,Rotate)

I/O box

Color(HSV,RGB)

LFO

Helpパッチの開き方

Beat Detector(Value) （Helpパッチの開き方）

Random

Map

Damper

Group

Inspectorの開き方

Segment(Resolution,Inner radius)

FFT(4ch)

FileTexture

CircularSpread

Camera

詳しい解説は、ブログに[vvvvオフ会]という名前であげようと思っています。

…ちなみに全部終わりませんでした。←

意外と詰め込んだ内容になってしまったみたいで…。

以下に、今回使用したパッチと、途中までのパッチを残させてもらってます。

https://drive.google.com/open?id=0B-aWXftvAHSxNWF1aEVOaFpQb0k&authuser=0

変顔になってますが、僕が基礎編を担当させてもらいました！

応用編、vvvvの魅力についてビデオチュートリアルでおなじみの
平野さん（@yhy_jp）が解説してくれました！

ひたすら緊張していたのですが、
多くの人に興味を持ってもらって、一緒に勉強して本当に楽しかったです！
来てくださった方ありがとうございました！

1か月に1回くらい継続して開催していければと思ってますので、
ゆるーく、楽しくつづけられたらと思います！
今回これなかった方、興味ある方も次回とかにでも顔出してもらえればと思います。
これからもよろしくお願いしまーす！


今日の感想、次回の内容、ブログに書いてほしい内容など
なんでもお待ちしております！



Junky_Inc

[VVVVJ_10]音の高さごとにエフェクトを加えてみよう！FFT

インタラクティブに音に反応させていくにあたって、
今まではBeat Detectorというノードを使い、
ビートのみを検出してきました。

しかし、VJでは高い音に反応しているものや、
メインの音に反応しているもの
低い音に反応しているもの…様々だと思います。


それをするためには、
解析をしなきゃだめなんですが・・・

vvvvには、便利なノードがあります！！
FFT　です！！
今回は、4chのノードを用いてパッチをつくりました！

アウトレットの一番左を一つあけて
Bass、LowMid、HighMid、Highの
４chで出力しています！

Mapの値は、Sourceを0-0.3、Destinationを0-2に設定しています。

ちなみに、一番左のアウトレットFFT(256)は256段階に音を分解することができます。
一つ前のブログで上げた動画の背景は256段階に分解したものを利用してます。


Junky_Inc

[VVVVJ_10]パッチ作ってみたのであげてみた。

VVVVでノリでVJ用パッチつくってみた。

基本的なコードの組み合わせで書いてみた！

よかったらご覧ください！

FFTとかも、今後簡単に解説するのでー！

Tumblurに動画あげてますー！

http://junky-inc.tumblr.com/post/102687304516/vvvvj-music-lets-easy

VVVVJ流行るといいなぁー。

オフ会の内容これでもいいかもなー。

Junky_Inc

[VVVVJ_9]ドット絵のエフェクト

Texture Filterシリーズ！
Dotsを使ってみました！

Texture Filterの使い方は前回参照！
色々使い勝手が良いですね！

画像のようにつないでもらうことで、
エフェクトBeatに合わせていろいろな変化をつけることができます！
ドットもおしゃんてぃですねｗ

こんな感じ！
動かしてみると楽しいですよー！！

あっ…
カラフルな画像使ってるのは色々わかりやすいかなーと思ってです。
自分の撮影した画像でよければ、
サンプル用に利用してもらえればと思いますー！

以下画像です。

Junky_Inc

[VVVVJ_8]ポリゴン迫る。

前回ポリゴナイズをかけたやつをつかって、
画像が近づいたり遠のいたりというものを作ってみましょう！

使うのは何回か前のブログで書いたCamera(3d)ノード！
Rendereに接続してみましょう！

今回は滑らかさを出す方法をDamperではなく
Oscilatorを用いてます。
Animationノードたちも様々なものがあるので探検してみると楽しいですね！

Junky_Inc

[VVVVJ_7]Polygonized！！ポリゴナイズ！

どんどん実験していきます１
Texture Filterはvvvvのパワフルなところを存分に生かせます！

今回はPolygonized！
FiletextureとQuadの間にいれこみましょう！

動きがあるようにポリゴンの数をLFOで変化させてみました！！
Control Point Amountの数値をいじってみましょう！

以下、こんな感じ！！

このノードを知ったとき、結構胸アツでした！
これこそvvvvのパワフルなところ！
Texture Filterはおもしろいのがいっぱいあります！

Junky_Inc

[VVVVJ_6]画像をいれこむ。

VJでは画像にエフェクトをかけたり、
動画にエフェクトをかけたりすることが多いと思います。

Renderer内に画像を入れ込むには
Filtetextureノードを用います。

QuadのTextureノードに接続します。
Filetetextureの一番左インレットはI/O BOXのStringを接続してます。

以下のように接続後、
右クリックで画像を選択し、入れることができます！

次のブログで軽くエフェクトをかけてみましょう！



Junky_Inc

[VVVVJ_5]三角形へのあこがれ…。

VJでは何かと四角だけではなく、
さまざまな図形を使ってることが多いと思います。

今回は、三角形をつかって、
音を利用しながら、大きさ、中の空間（？）をつくりたいと思います！

使うノードはSegment！
一番右上のインレットのResolutionの数値を変えることで
○角形をつくることができます！！

内部の切り抜きはInner Radiusを使います！
前回のBeat DetectorのMapからの出力値をInnner Radiusにつっこみましょう！

Mapの最大値は適宜いじってます。
一応わかりやすいようにI/O BOXつけてますので、参考までに。

以下、完成形。

Junky_Inc

[VVVVJ_4]大きさを変える方法その②Camera(3d)

物体の大きさを変えるためのアプローチとして、
物体自体を大きくする方法と、
物体に近づく方法があります。


物体にちかづくためにCamera(3d)ノードをうまく使ってみましょう！
ほかの数値も変えることで見る位置をかえることができます！
Rendererの右から２つめのインレットにつないでみましょう！

Mapに数値を入力し、自分のコントロールしたい範囲をうまくきめてくださいねー！
前回同様Beat Detectorを用いて音に反応させてみます。

あとは、新しくDamperを使ってます。
これは数値の変化をスムーズにするためのノードです！
他にもDecayなどのノードがあるので、
ヘルプパッチでものぞいてみてください！

以下のような感じです！

Junky_Inc

[VVVVJ_3]さっそくインタラクティブ。Beat Detector

わりと行き当たりばったりで書いてるので、
話が色々なところに飛ぶと思いますが、お許しください。


やっぱVJといえばインタラクティブ！！
ということで、音に反応するパッチBeat Detectorを使いたいと思います。

ヘルプパッチをうまく活用しましょう！
ヘルプパッチはF1で開けますよー！

Beat Detector(Value)

こんな感じで出てくるとおもうので、Contorl+Cでコピーして
新しいパッチにはっつけてください！

以下、割と手抜きですが
ScelaとMapをつかってます。

音にあわせてうごいてまーす。

Junky_Inc

[VVVVJ_2]逆回転も加えてみよう。ついでに色も。

前回のつづきパターンで、
逆回転をさせたいと思います。

今回もLFO、Circular Spreadをつかいたいと思います。
あとは、色を塗るのにHSVノードを用います。

まずは、逆回転について。
0-1と数値の変化を1-0に変えたいということですね。
LFOの３番目のインレットにReversがあります。
それをON（１）にします。
Toggleを用いてももちろん同様です。


これで、時計回りと反時計回りになりますね。



あとは、色塗り。
LFOを用いてパターンでさくっと塗りましょう。
今回はHSVノードのAlphaとHueをにLFOをつなぎました。
HSVノードは過去のブログで説明済みです。

完成形が以下です。

はじめてみたものの、かっこいいのつくれるのかな…？汗

Junky_Inc

[VVVVJ_1]継続的にくるくるまわーる。Circular Spread、LFO

さてさて、記憶がはっきりしているうちにどんどんやっていきたいと思います。

普段のvvvvlogより、ざっくりしか説明しないので、
わからないことは、Twitterやら、コメントやらください。


まずは、曲のテンポにあわせて、継続的に動くパターンをやってみたいと思います。
テンポに合わせるといっても、
リアルタイムに音を収集するパターンではなく、簡易的なアプローチをしたいと思います。


重要ノード
LFO：
0-1の数値をくりかえす
Circular Spread：
円上に物体を配置できるようSpreadを出力する。
（説明ちがってたらすみません。）

今回はこの２つをつかいたいと思います。

Circular SpreadのアウトレットをそれぞれTranslateX、Yにつなぎ、
右上インレットのSpread Countを今回は10に。
QuadのScaleは、0.1にします。

LFOは、アウトレットの部分をCIrcular SpreadのPhaseへ！
これによって回転がスタートします！
LFOの左上インレットPeriodが繰り返すスパンをしめしているので、
今回は5secにしてます。

以下こんな感じ！

次は、逆回転のやつも加えてみましょー！

Junky_Inc

[VVVVJ_0]VVVVでVJやってみよう！！

突然ですが…VVVVJということで、VJでもやってみようかと。
ガチのかっこいいVJチュートリアルは@yhy_jpさんがあげてくれると思うので、期待しましょう！！

僕の方では、
めーっちゃ基礎的なところをやってみようかと。

といっても、VJを本格的に見たのはチャネル９というスーパーデラックスイベントのみ。←
しかも、さっき。←
その中で吸収してきたことを備忘録的にあげたいと思います！！



本物のVJの方には、突っ込みどころ満載かと思いますが、
あたたかく見守り、意見をくださると幸いです。




まずは、分析からしてみたいと思います。

VJのパターン
①映像主体パターン
②プログラム主体パターン

エフェクトをかけるパターン
A.曲のテンポに合わせる
B.ビートに合わせてインタラクティブ


４つに分類してみました。
実際のイベントではすっごい高度なことをやってたと思いますが、
頭でっかくなりすぎちゃうので、
まずは、ざっくりこれをイメージしながらやっていきたいと思います。




さて、今回は分析のみで終わるという…
フェイクでした…
次からあげていきますねー！


長文読んでくださりありがとうございます。
本日のイベントのレポは後日あげます。
また、僕もVJやりたいです。←


Junky_Inc

[VVVVlog17 チュートリアル⑭]一つのRendererに複数の図形を表示。Groupノード！

前回ブログから少し時間があいてしましました。

進みがマイペースな感じで申し訳ないですー。

間の時間にやってたアートワークも今後公開できたらと思ってますので！ご興味がある方は公開した時にでもよろしくおねがいします。m(_ _)m

では、今回は一つのRendererに複数の図形を表示する方法を学んでみましょう。

前回形状を変えることができたと思いますが、

目標としているプロジェクションの図形は四面体だったと思います。

投影対象は3面なので、３つの図形を表示する必要があります。

そのままでは、複数の図形を表示できないのですが…

まず、以下のようなパッチを組み立ててみましょう。

Scaleを0.1、Translateをそれぞれ、0.5と-0.5に設定しています。

ちなみに、

今回はRendererをパッチ上に表示しています。

Alt + 2　を押すことで、パッチの中に内包することができます。

また、Alt + 1でパッチの外に出し、別画面にすることができるので、

試してみてください！

次に、一つのRendererに複数のQuadを表示したいと思います。

目標はこんな感じ。

新しく覚えるノードはGroupです！

今回はRenderer(EX9)を用いているので、Group(EX9)を用いましょう。

Groupノードの１番目と２番目のインレットに

先ほどの２つのQuadを接続し、

GroupのアウトレットからRendererに接続します。

こんな感じが完成形です。

これで、一つのRendererの中に複数の図形を描くことができます。

なーんだ！簡単じゃん！

って感じですが、Group内での前後の関係などもありますので、

色々試してみてください！

前回のHomographyと合わせることで、

マッピングの道もいよいよ近づいてきましたね！

Junky_Inc