読者です 読者をやめる 読者になる 読者になる

vvvv入門5

vvvv

こんにちは、今回もspreadに関して解説します。

が、その前にインスペクターを使ってみようと思います。

 

vvvv実行時にCtrl+Iを押すだけで表示されます。

f:id:castlejou:20140920061602j:plain

ノードをクリックするとインプット、アウトプットの各パラメータが表示されます。

f:id:castlejou:20140920130407j:plain

それではLinearSpreadを出してください。

f:id:castlejou:20140920132607j:plain

ちょっとしたテクニックですが、IObox(Enumerations)を出してLinearSpreadに繋げてください。

f:id:castlejou:20140920154152j:plain

Styleを右クリックしてListにすると

f:id:castlejou:20140920154237j:plain

IOboxで選択しやすくなりました。

次にSpread CountにつないだIOboxのインスペクタをいじりましょう。

f:id:castlejou:20140920134502j:plainf:id:castlejou:20140920134713j:plain

スライダーを作ることができました。

もっと色々なスライダーも作れるので、ヘルプを見てみましょう。このヘルプを参照にする作業は今後多用するでしょう。

IOboxを選択しF1キーを押します。

f:id:castlejou:20140920135252j:plain

これは非常に便利ですね、vvvvではほとんどのノードにヘルプが用意されているので慣れてきたら未知のノードもヘルプを見たら使い方がわかるようになります。(そのころにはこのブログも卒業ですかね?)

 

さて、それでは本題に入ります。

まず以下のように配置し、LinearSpreadインスペクタを見てみます。

f:id:castlejou:20140920142338j:plain

LinearSpreadのピンについて解説します。

・Input  中心となる値。

・Width  Outputの上限、下限を決める。

・Phase  数値をずらしループさせる。

上のパッチだとInputが0でWidthが1.0なので、下限が-0.5、中心が0、上限が0.5です。

で、Alignment(整列方式)に関してはこちら。

・LeftJustified  下限を固定する

・RightJustified  上限を固定する

・Centerd      中心から左右対称

・Block     上限、下限を固定する

 実際に選択して試す方がわかりやすいです。

 

LinearSpreadをTranslateX、Yに入れたときの動作についてです。

f:id:castlejou:20140920150800j:plain

上の挿入ではタイル状に配置できないのは確認しました。

天下り的にですが以下のようにします。

f:id:castlejou:20140920152020j:plain

TranslateXにWidthが0のスプレッドをいれ、スプレッド数をTranslateYの数以上にしましょう(ここでは同じ値をとっています)。インスペクタをみてどうなっているか考えてみるのも良いですね。

f:id:castlejou:20140920153443j:plain

少し応用したら3Dでも同じことができます。

3Dに関しては次回以降にするとしてこの辺で。

vvvv入門4

vvvv

今回はvvvvで非常に重要なSpreadという複製を行うノードを使ってみます。

いつものようにQuadとTransformを置いておき、新しくLinearSpreadノードを出してください。

f:id:castlejou:20140913161224j:plain

Spread Countを3にしてTranslateXにつなげてみましょう。

f:id:castlejou:20140913161305j:plain

 

....微妙ですね。

ScaleXとScaleYをうまく調節してみてください。

f:id:castlejou:20140913161516j:plain

するとQuadがX方向に複製されていることがわかりますね。

あとはWidthを触ってみましょう。

同じものをTranslateYにもつなげてみると...

f:id:castlejou:20140913163651j:plain

こんな感じ。

え?これじゃないの!?

f:id:castlejou:20140913163833j:plain

と思った方、僕も初めは思いました。

 

タイルやルービックキューブみたいににするには少し頭を使わなければならないので次回解説します。

 

気を取り直して画面を初期に戻して、今度はまた新しいノードCircularSpreadを出してください。

f:id:castlejou:20140913164428j:plain

 

OutputX,YをTranslateX,Yに繋げ、Spread Countを上げます。

f:id:castlejou:20140913164611j:plain

自分でWidthとHeightを触ってみましょう。

ちなみにこのノードのFactorやPhase、TransformのRoll等の回転に関するピンは0~1で一周する物が多いです。LFOで扱いやすいですね。

 

最後にまた画面を初期化しRandomSpreadを出します。

f:id:castlejou:20140913170459j:plain

 

まずは以下のようにパラメータをいじってTranslateXに繋げます。Widthが2とは画面全体(-1~1)の事です。

f:id:castlejou:20140913170434j:plain

Randomに複製されているのがわかります。それでは選択し、Ctrl+Dで複製しTranslateYに繋げます。

f:id:castlejou:20140913170753j:plain

 

Randomじゃないですね。そうです、Seedを与えていませんもの。

f:id:castlejou:20140913170854j:plain

X,Yに異なるSeedに適当に値を入れてやることで、Randomに配置されました。

 

実際にはLFOのCyclesを使うことが多いです。

f:id:castlejou:20140913171210j:plain

アニメーションになりましたがまだあまり面白くないですね。

 

そこでDamperというこれも非常に重要なノードを使います。これは離散値(とびとびの値)を連続値(なめらかな値)にしてしまうノードです。

なにはともあれ使ってみましょう。

f:id:castlejou:20140913171653j:plain

少しそれっぽいですね(笑)

次回はLinearSpreadをもう少し突っ込んで解説していきます。

それでは今回はこの辺で。

 

vvvv入門3

vvvv

今回は色やテクスチャをいじっていきたいと思います。

vvvvでの色の指定にはRGBHSV、HSL方式がありますが扱いやすいHSVを使っていきます。

・これらの違いはMicrosoftこちらで解説されています。

 

それでは画面にQuadを表示させて、新しいノードHSV(Color Join)を出してください。

f:id:castlejou:20140911134038j:plain

 

ピンをつなげ、HSVのピンを適当にいじって色が変わるのを確認してみましょう。

f:id:castlejou:20140911134438j:plain

ほう、汚い色ができました(笑)

 

もう少しわかりやすくするために右ダブルクリックから数値のIOBoxを三つ、同様に色のIOBoxを一つ出してつなげてみましょう。

f:id:castlejou:20140911134849j:plain f:id:castlejou:20140911135424j:plain

数値を適当にいじってみるとさらに汚い色ができました(笑)

 

一旦色を初期値にしましょう。vvvvではノードの初期化をAlt+右クリックで行うことができるので、三つの数値に試します。

 

ではHSVのSaturationピンを1にして(数値を1以上にすると勝手に1になる)LFOノードを出しHueピンに繋ぎます。

f:id:castlejou:20140911140250j:plain

少しきれいですね。変化が速いのでLFOの周期をPeriodピンを大きくして変えておきます。

f:id:castlejou:20140911140437j:plain

 

色はこの程度にしておき、テクスチャを張り付けたいと思います。

まずIOBox(Color)とQuadのリンクを切ってしまい、新しいノードFileTexture(EX9.Texture)を出しましょう。

そしてQuadを初期化(Alt+右クリック)しFileTextureとつなげてください。

f:id:castlejou:20140911141150j:plain

FileTextureの左上のピンFilenameを右クリックしてください。

するとファイルを開くことができるのでvvvvの中にあるサンプル画像を選択しましょう。

f:id:castlejou:20140911141607j:plain

 

するとQuadに画像が表示されましたね。

f:id:castlejou:20140911141731j:plain

 

FileTextureは画像だけではなく様々なメディアファイルを開くことができ今後も多用します。

それでは今回はこのへんで。

vvvv入門2

vvvv

今回は前回作った四角を移動、変形させるTransformノードを触ってみます。

 

まずTransform(Transform 3d)ノードを作ってQuadの入力ピンにつなげてください。

f:id:castlejou:20140911013929j:plain

TransformノードのTranslateXピン(左から二番目)を右クリックし、値を0.5に変えてみます。

f:id:castlejou:20140911014440j:plain

次にTranslateYピンを上下に右ドラッグしてください。値が変化します。

f:id:castlejou:20140911014940j:plain

つぎはパッチの適当なところで右ダブルクリックをしてみてください。

するとIOBoxというノードを一発で出すことができます。(一応普通にやってもIOBoxを作れることも確認しましょう)

f:id:castlejou:20140911015106j:plain f:id:castlejou:20140911015704j:plain

 

初期値のままぽちぽちぽちとTranslateX、Y、Zとつなげておきしょう。

 

次は新しいノード、LFO(Animation)を作ってLFOのOutputピンを右クリックし、TransformのScaleX、ScaleYで左クリックしてください。

このつなぎ方は同じ出力を複数ピンに与えるときに便利なので覚えましょう。

f:id:castlejou:20140911020446j:plain

 

どうでしょう?少し面白いでしょうか?LFOは0~1の値をずっと繰り返して出力するノードです。

 

では今つないだ二つのリンクを消します。リンクを左クリックで選択し、右クリック(かBackSpaceかDeleteキー)で削除です。

f:id:castlejou:20140911020823j:plain f:id:castlejou:20140911020838j:plain

Transformの残りのピンは回転に関するものです。面白いので繋げて確かめてみましょう。

f:id:castlejou:20140911021231j:plain

 

 

今回はTransformノードの基本について学びました。

ちなみに、Renderer画面は以下の座標の通りです。

f:id:castlejou:20140911022029j:plain

vvvv入門

vvvv

 

グラフィック描写やインタラクティブアート制作が簡単にできるらvvvvというVPL(Visual Programming Language)を始めました。

このVPLとはプログラミングをコードの記述ではなく、視覚的に行うので便利な言語です。他にもPure Data、Max/MSPなどがそうです。

 

vvvvは公式のこちらDownloads | vvvvからダウンロードでき、インストールして実行するだけなので導入は簡単ですね。f:id:castlejou:20140910234643j:plain

それではvvvvを実行しましょう。

 

 

初めはこの画面(パッチ)が表示されます。

画面のどこかでダブルクリックしてRendererと入力し、

f:id:castlejou:20140620083655j:plain f:id:castlejou:20140910235505j:plain

Renderer(EX9)を選択しクリックorEnter。

f:id:castlejou:20140910235846j:plain

今後はここに映像を表示させていきます。

とりあえずAlt+2で画面をパッチ内に入れてしまいます。

f:id:castlejou:20140911000108j:plain

 

それでは四角形を表示させてみます。

Quad(DX9)のノードを作成し、この小さな点をクリックしてつなげます。

f:id:castlejou:20140911000625j:plain f:id:castlejou:20140911000734j:plain

すると画面に四角が表示されました。

vvvvプログラミングはこのように進めていきます。

また、終了はCtrl+Wで画面を閉じます。

 

最後に用語の説明を。

f:id:castlejou:20140911002230j:plain

パッチ・・・画面全体の事

ノード・・・プログラミングのコードみたいなもの

ピン・・・・ノードの上下の黒い点

リンク・・・ピン同士をつなぐ線

 

android(2)

Android(どうでもいい)

andoroidアプリでのファイルに関してこのサイトで分かりやすく解説されている。

http://shine32.blog.fc2.com/blog-entry-58.html

フォームはXMLファイルで定義し実行時に展開するのが一般である。res/layout/activity_main.xmlで定義する。

フォームの表示方法

LinearLayout:画面に行状または列状に配置を行うレイアウト。
RelativeLayout:相対的に配置していくレイアウト。一つ基準となるものを決め、そこからの位置を座標表示する。

 

ウィンドウの属性や特徴はテーマとウィンドウズマネージャを使ってカスタマイズする。

 

テーマはアプリ全体またはアクティビティに対して適応できる外観のスタイルである。テーマにはシステムテーマかカスタムテーマかのいずれかがあり、どちらでもAndroidManifest.xmlファイルに設定される。

システムテーマ

androidフレームワークのパッケージに含まれるstyle.xmlにはテーマのためのオプションとカスタムプロパティ集合が含まれる。Theme.NoTitleBar.FullScreenなどとすることでテーマが変更できる

android

Android(どうでもいい)

コンポーネント

androidアプリケーションは”コンポーネント”と呼ばれるオブジェクトから構築されます。これはアクティビティのUIコンポーネント(Widget)とは異なります。

通常コンポーネントとはボタンなどの部品という意味ですがここでいうコンポーネントとはアプリケーションのプログラムを構成する要素としての意味です。

システムの要求に応じて呼び出すことができ、アプリケーションはコンポーネント単位で呼び出すことができる。

アクティビティ、サービス、コンテントプロバイダ、ブロードキャストレシーバーの4種類がある。

アクティビティ

唯一GUIをもつコンポーネントで、アプリはアクティビティを基本一つ以上ふくむ。

サービス

バックグラウンドで実行されるUIを持たないコンポーネントである。

例えばユーザーが選択した曲を流す音楽サービスを考えると、選択された楽曲を別スレッドで再生する。これは音楽の再生を始めたアクティビティがスクリーンから消えた後も再生が続くことをユーザーが期待したからである。

ブロードキャストレシーバ

ブロードキャスト(配信)の名の通り同報通信を受信してそれに反応するコンポーネントである。例えば”タイムゾーンが変更された”、”バッテリーの電圧が低い”など多くの事象を示すブロードキャストがシステムコードから発せられる。アプリから他アプリにブロードキャストを発することもでき、”ダウンロードが終わった”、”リツイートされた”と教えてあげることもできる。

コンテントプロバイダ

あるアプリの特定のデータ集合を他のアプリから利用できるようにすること。データの管理をしている。