ラベル vvvv基礎講座 の投稿を表示しています。 すべての投稿を表示
ラベル vvvv基礎講座 の投稿を表示しています。 すべての投稿を表示

2015年1月3日土曜日

vvvvでシェーダー入門②

2.Tutolial Effects - Manipulatig Colors

20~23行目に注目!!

最初の部分では、
return 1;
になっており、Rendererには白が出力されているはず。
今回はこのCOLORの部分をさわります。

◎float4 = color of a pixel
 float4はピクセルの色


float4(red, green, blue, alpha)を示してる。
float4(1,0,0,1);で赤を示す。

return float4(1,0,0,1);
に変えてみましょう!

Control + S で保存し、結果を反映。
赤になったはず。





















次に、colでまとめて扱いやすくするために、
float4 col;
col = float(1, 0, 0, 1);
return col;

こんな感じで書いてもらったら、同じ結果が返ってくるはず。



さらに、
float4 col;
col = float(1, 0, 0, 1);
col /= 2;
return col;

これで、colの値を半分に。
得られた結果は(0.5, 0, 0, 0.5)
になるはずだから、色も半分になってるはず。





















◎Accessing individual color components/channels
 個々の色をについて扱う場合

個々の値について、扱う場合は、
Colorを出力する場面での、float4は(r,g,b,a)を示すので、

col.g = col.r/2;
と書きかえれば、gの値を先述のrの値を利用して書くことができます。



















col = col.bgra;
のような書き方を加えるとまた色がかわりますね。
この場合は結果は、(1,0.5,0,1)が返ってきてるはずです。
.rb 
.rbba など色々ためしてみてください。
























◎Displaying a texture
 テクスチャーを表示させるには

FileTexture(EX.9 Texture)の入力をしているますが、表示されていないはず。
結果を返すためには、
return tex2D(Samp, In.TexCd);
を入力する必要があります。

公式ページとちょっとちがいますが、colを定義しているので、
col = tex2D(Samp, In.TexCd);
return col.rgba;
と書いてみました。

こんな感じ。
























return col.rgba; を 
return col.b;にすると青色だけぬけるみたいです。
























◎Inverting a texture
 テクスチャーの色を反転させる

col.rgb = 1 - col.rgb;

return col.rgbaを return colに変更
returnでcolの結果を返すことにより、Invertさせてます。
























◎Constracting a texture
 テクスチャーのコントラストを扱う

       float4 col;
      col = tex2D(Samp, In.TexCd);
      col.rgb -= 0.5;
      col.rgb *= Contrast;
      col.rgb += 0.5;
      return col;
      return tex2D (Samp, In.TexCd);

と、打ってみたんですがちょっとエラーが発生。
本文では、Contrastを定義しましょうってことで、定義しましたが、
思った反応が得られなかったらので、
コントラストは外部からいじることにしました。

上記の入力後、3行目くらいに
float Contrastを入力し、Inputピンを増やし、
パッチ上で入力できるようにしました。






























◎Converting to grayscale
 グレースケールの作り方

無理やりやる方法は 
redを30%にGreenを0.59%に、blueを10%にすれば良いので、
こんな感じで書きます。
col.rgba = col.r*0.3 + col.g*0.59 + col.b*0.11;
を入力します。

















もっとエレガントにやるには dot productを使いましょう
const floats lumCoeff ={0.3, 0.59, 0.11};
col.rgb = dot(col.rgb, lumCoeff);
を入力します。






















◎Reusing code in functions
 functionを使い、再利用するっていう方法

今まで、COLORの中を触ってきましたが、
その上にConvertToGrayというfunctionを作り、
COLORの中でつかいます。

以下、functionの部分
float4 ConvertToGray(float4 col)
{
    const float4 lumcoeff = {0.3, 0.59, 0.11, 0};
    return dot(col, lumcoeff);
}

COLORの中に、return ConvertToGray(col); を入力し、
functionを利用し結果を返してください。























こんな感じです。


Junky_Inc

vvvvでシェーダー入門①

あけましておめでとうございます!

昨年は色々な方に読んでもらえて本当に光栄でした。
今年もちょくちょくブログ書いていくので、
是非ともご覧ください。



今回はやっと正月の休み(1日ですが←)もらえたので、
せっかくなのでブログ書こうかと思いまして。

シェーダーとか今までやったことなかったので、
基礎だけでも勉強しようと思います。

vvvvの公式ページ翻訳しながらゆるゆるやります。

公式ページのシェーダーについてのチュートリアルページ



PixelShadingとVertexShadingっていうのがあるらしい。

順番通り、PixelShadingからやってきます。


1.Tutolial Effect - PixelShader Prepalation

Pixel Shaderを書くための準備。


今回はTemplate(EX.9 Effect)を使いましょう。
Template EX.9 Effect をコントロールを押して、
クローンをつくっていいところに名前をつけて保存。
















つくったノードを右クリックでプログラムを開けるので、
とりあえず、公式ページのコードをコピペ。

以下コピペです。
「
//texture
texture Tex <string uiname="Texture";>;
sampler Samp = sampler_state    //sampler for doing the texture-lookup
{
    Texture   = (Tex);          //apply a texture to the sampler
    MipFilter = LINEAR;         //sampler states
    MinFilter = LINEAR;
    MagFilter = LINEAR;
};
 
//the data structure: "vertexshader to pixelshader"
//used as output data with the VS function
//and as input data with the PS function
struct vs2ps
{
    float4 Pos  : POSITION;
    float2 TexCd : TEXCOORD0;
};
 
float4 PS(vs2ps In): COLOR
{
    return 1;
}
 
technique TSimpleShader
{
    pass P0
    {
        VertexShader = null;
        PixelShader  = compile ps_2_0 PS();
    }
}
」
コピペ終了。



あとは、パッチを組むのですが、今回は公式ページどおりではなく、
カメラの方が扱うのが楽な気がしたので、勝手にカメラでためしてますw
cameraはよく使う、camera[transform sofrimage] (3d... です。
いっつも camera 3dでノード出してます!

View、ProjectionをそれぞれRendererの同様の名前に接続し、
操作は、
control + P:遠近
control + O:回転
で、なんとなくでうごかせるはずですw






準備完了。


Junky_Inc

2014年11月23日日曜日

[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オフ会]という名前であげようと思っています。
…ちなみに全部終わりませんでした。←
意外と詰め込んだ内容になってしまったみたいで…。

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


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











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

















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

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


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



Junky_Inc

2014年11月15日土曜日

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

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

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


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

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

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

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




















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


Junky_Inc

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

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

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

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




















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

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

以下画像です。




























Junky_Inc

[VVVVJ_8]ポリゴン迫る。

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

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

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





















Junky_Inc

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

どんどん実験していきます1
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の右から2つめのインレットにつないでみましょう!

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の3番目のインレットにReversがあります。
それをON(1)にします。
Toggleを用いてももちろん同様です。


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



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

完成形が以下です。



























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

Junky_Inc

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

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

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


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


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

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

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

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

以下こんな感じ!
















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

Junky_Inc