Edited at

ビジュアルプログラミング(vvvv)を覚える

More than 3 years have passed since last update.


ビジュアルプログラミング


ビジュアルプログラミングへの転換期

 3年ほど前から【Scratch(スクラッチ)】、【Unreal EngineのBlueprint】のような、ノードとノードを繋げることによってプログラミングする「ヴィジュアルプログラミング」を見かけたり、仕事で触る機会が増えてきた。

 普段ソースコードをエディタで書くことに慣れきってしまっているせいか、「なぜ、こんな面倒で時間がかかり、処理の重い作業を行うのだろう」と、ビジュアルプログラミングには否定的な立ち位置にいる。

 では、なぜ記事を書いてまで学ぼうと思ったかといえば、

「今までプログラミングをしなくてもよかった人たち(子供、デザイナー)が、プログラミングに興味を持ち始めたり、触らなくてはいけなくなって来たから。プログラミングが出来る人はプログラムができない人にプログラミングができない人のためにある程度準備を準備をすることが発生することが増えるから」

という、ことが大きい。

 やっぱり、ソースコードから流れを想像してみることより、視覚で流れや変化を見ることができるビジュアルプログラミングの方が入り込みやすい。

 PCのスペックが向上したこともあり、容量や処理の重さを気にしなくてもよくなった。

 ちょうど、プログラムにまつわる環境(人、開発環境、興味)がソースコード主体からビジュアルへの転換期に当たっているのかもしれない。


プログラミング言語を覚える

 いろんなプログラミング言語を触って来たけれど、割りと1週間あれば基本的な文法は覚えられてしまうようになった。

 大体どのプログラミング言語も変数、算術演算子(足し算引き算)、条件分岐(if文)、繰り返し(loop)、関数(function)を覚えてしまえば何とかなってしまい、後は使用する言語特有のライブラリー、フレームワークから使用するものだけを調べれば仕事ができる。

 むしろ、調べることがプログラミング言語を覚えるといっていい。

 まずは、ビジュアルプログラミングも変数、算術演算子(足し算引き算)、条件分岐(if文)、繰り返し(loop)、関数の書き方を覚えてみる。


vvvv(ビジュアルプログラミング)

 ビジュアルプログラミングを覚えるにあたって「vvvv」を使用することにした。

 非商用であれば無料ということで触りやすい

 vvvvについてはこの記事を見たほうがわかりやすい。

 ビジュアルプログラミング言語「vvvv」をはじめよう!


↓ここから文法について



文法


変数

変数の代わりをするのがIO BOXと呼ばれるNodeになる。

マウス右ボタンをダブルクリックでいろんな種類のIOBoxを選択できる

- 数値

- Vector

- Button

- 文字列

- 独自ノード

- 色

- Enum(列挙型)

lesson_000.png


算術演算子(足し算引き算)

プログラミング言語で使うMath関数は揃っている

- 足し算(+)

- 引き算(-)

- 掛け算(*)

- 割り算(/)

- 割り算の余り(Mod)

lesson_001.png


条件分岐(if文)

if文も必要なNodeは揃っているが、条件分岐した際に変数の値を別々にするといったことを考えるのに苦戦した

条件分岐のNodeとSwitch(Input)Nodeを使うことで実現することが出来た。

lesson_002.png


繰り返し(loop)

一番面倒くさかった。UnityのC#に近く、基本Framerateで動いているため、静的なfor文みたいな処理を書くのが難しい。

結局、いい方法がなかったのでPluginをC#で書いたほうが早かった。

lesson_003.png


関数(function)

vvvvでは関数をSub Patchと呼ぶらしい。

関数にしたい箇所を囲み、Ctrl + GでSub Patchとして登録することができる。

書き方に迷ったら、PluginにしてC#で書いてしまったほうが早いかもしれない

lesson_004.png


配列(array)

Array,List,Vectorといった配列を扱うときに使う

vvvv Spreadsを使う (2016/02/05追記)


基本機能


図形描画

vvvvで図形描画するのに必要な知識 (2016/02/03に追記)


Midi

vvvv Midiキーボードが手元にない時に仮想Midiキーボードをつかう


OSC

vvvv OSCのメッセージを整理する


ヘルプ

VVVVでノードの使い方が分からなくなったとき (2016/02/04に追記)


パッチ

Githubに今回書いた記事のパッチをコミットしました

記事に書いたパッチ


VVVV以外で困ったことの対応


Git

vvvv用のgitignoreを作る