目次

Introduction

第1章 vvvvとは

1.1 何でもできるツールキット
1.2 日本のvvvvユーザー

第2章 vvvvの開発環境を整える

2.1 vvvvのダウンロード
2.2 必要なライブラリー・ランタイムパッケージのインストール

第3章 Hello VVVVorld!!

3.1 Rendererについて
3.2 画面に文字列を表示してみる
3.3 Input Pinに任意のデータをセットする

第4章 基本的なCGを作ってみよう

4.1 五角形を表示してみる
4.2 描画された五角形を変形させる
4.3 Inspectorウィンドウ
4.4 図形に穴を開ける
4.5 図形を回転させる
4.6 図形の位置を変更する

第5章 マウスイベントとCGを連携させてみる

5.1 Patchにマウスを連携させる
5.2 マウスイベントとCGを連携する

第6章 インタラクティブなCGを作ってみよう!

6.1 マウスイベントで動かすパラメータを増やしてみる
6.2 フィルターを使ってみよう
6.3 DotsNodeのオプションを変更してフィルターをチューニングする
6.4 フィルターを重ね掛けする

第7章 vvvvの後継プラットフォーム「vvvv gamma」について

7.1 vvvv gammaをインストールする

第8章 vvvv gammaを起動しよう

8.1 vvvv-gammaの画面に触れてみよう

第9章 vvvv gammaでのCGプログラミングについて学ぶ

9.1 vvvv gammaでのパッチングに慣れる
9.2 Input Pinが受け付けるデータについて理解する
9.3 CGに動きを付ける

第10章 Spreadを理解して複数の図形を操作しよう

10.1 Spreadとは何か
10.2 Spreadが生成したデータを利用して図形を描画する

第11章 作成したvvvvパッチを実行ファイルにビルドする

11.1 vvvv gammaの制作物はexeファイルに変換できる
11.2 実行ファイルを作る

付録A vvvvの基本操作&ショートカット一覧

A.1 Patch操作関連
A.2 Node操作関連
A.3 Pin操作関連

付録B vvvvの世界的なコミュニティーやカンファレンス、イベントについて

B.1 デジタルアートの祭典「NODE」
B.2 カンファレンス以外のvvvvコミュニティーについて

おわりに

Introduction

 2021年現在、プログラミング言語は組み込みシステムやWebサービスだけではなく、アートや音楽といった視覚的メディアを制作するツールのひとつにまで進化しています。

 このメディア・アートに特化したプログラミング言語であるvvvvはこの数年で目覚ましい進化を遂げ、2021年現在はvvvv gammaと呼ばれる新しいプラットフォームの利活用が進んでいます。

 しかしその操作性の大きな違いから、vvvv gammaではなく通常のvvvvを使い続ける方も少なくはありません。

 また、vvvv gammaではなくこちらのハンズオン本が今も売れ続けている現状を鑑みて、最新の情報に中身を差し替えた本を作る必要があると考えました。

 さらにこの本では、最後の章にvvvv gammaでのプログラミングについても軽く触れています。両者の違いを正しく理解して、ぜひ使い分けてみてください。1

 本著のメインターゲット層は以下の通りです。

 ・CGプログラミングを始めてみたい!(ProcessingやTouchDesignerなどは聞いたことがある)

 ・グラフィックのプログラミングって何となく難しそうなイメージがある……サクッとCGを作ってみたい!

 ・vvvvについて全く知らない、もしくは聞いたことがあるけど使ったことがない

 ・何らかの理由でvvvv gammaではなくvvvvを使う必要がある←New‼

 これらのいずれかに該当する方は、ぜひ本書を手にとってみて頂けたらと思います。

 vvvvはもちろん、CGプログラミング自体が初めてという方のために、以下の流れでvvvvを触りながらCGプログラミングのハンズオンを実施していきます。

 1.vvvvとは一体何か

 2.vvvvでできること、できないこと

 3.vvvvの基本的な操作

 4.実際にvvvvでカッコいいCGを作ってみる

 大まかな流れはこの通りです。

 改定前のものよりもしっかりと解説を増やし、またハンズオン用の課題も追加しておきました。

 それでは、本書を通してvvvvを使用したCGプログラミングの基礎を身につけていきましょう。

1. vvvv gammaのみを扱う技術同人誌をBOOTHでも頒布しています。https://booth.pm/ja/items/2359970

第1章 vvvvとは

 vvvv1(ブイフォー/ブイブイブイブイ/ファウファウファウファウ)はドイツで生まれたビジュアルプログラミング言語です。

 呼び名は色々ありますが、日本のユーザーはブイフォーと呼ぶことが多いです。

 vvvvは元々、MESO2という会社が社内で使用していたツールを社外向けに公表したことがきっかけで使われるようになった開発ツールです。現在は欧州を中心に、多くのクリエイターがvvvvを使って制作活動を実施しています。

図1.1: オリジナルvvvvの公式ページ(2021/05/31時点でのトップページ)

 vvvvはvvvv betaと次世代ツールのvvvv gammaと二種のツールに分かれたことで、トップページが二種類あります。

 vvvv betaの方はドメインに明確にvvvvとあるのに対し、vvvv gamma3側はvisualprogramming.netという、vvvvを想起させないドメインとなっています。

 以降、本書ではvvvv betaをvvvvと呼称し、vvvv gammaについてはそのままvvvv gammaと呼び分けをしていきます。

図1.2: vvvv gammaのトップページ(2021/05/31時点)

1.1 何でもできるツールキット

 話をvvvvに戻しましょう。

 vvvvは公式サイトで『何でもできるツールキット』と紹介されており、その謳い文句に劣らず本当に何でもできるツールキットのポジションを確立してきました。

 通常のプログラミングに必要な標準入出力勿論、ハードウェアを利用した外部からのアナログデータ(マイクやWebカメラなど)の入出力に対応しています。さらには、MIDIキーボードなどのデバイスを入力機器として使用することも可能です。

 これらの入出力媒体については特にリアルタイム性を重視しており、高いパフォーマンスを維持したままデータの処理を実施することができます。

 vvvvはCG作成だけでなく物理運動のシミュレーション、プロジェクションマッピング、モーショングラフィックスなどの映像作品の作成にも使用でき、何でもできるツールキットの名の通り、活躍場所はどんどんと広がっています。

 具体的にどういった作品が作られているかは、vvvvの公式ページのGalleria4を参照するのが一番でしょう。また、VimeoやYoutubeにもvvvv betaを使った多くの作品のティザービデオが公開5されています。

図1.3: Vimeoのvvvv関連動画

1.2 日本のvvvvユーザー

 主に欧州(ドイツ)を中心に親しまれているvvvvですが、もちろん日本にもvvvvを使用して作品作りを行っているクリエイターが存在します。

 日本のvvvvユーザーは、仕事や創作活動でvvvvを用いることは勿論、その多くが個人ブログやQiita、Youtubeなどで情報発信を行っています。

 TwitterなどのSNSも運用されていることが多く、彼らの作品については先に紹介したGalleriaやvimeoではなく、SNSでチェックすることをお勧めします。

 vvvvを使っていてわからないことを解決するため、あるいは作品発表の場として#vvvv_jpというハッシュタグを付けると誰かが反応してくれる、という文化もあります。

 後者の_jpを除いた#vvvvというハッシュタグを付けると、vvvv公式アカウントが拾ってくれることもあるかもしれません。

 日本のユーザーも海外のユーザーもフレンドリーな方が多いので、ぜひコミュニケーションを取ってみてください。

1. 公式ページのURLはこちら: https://vvvv.org

2. 公式ページのURLはこちら: http://www.meso.net/start

3. vvvv gammaをダウンロードできるURLはこちら: https://visualprogramming.net/

4. Galleriaはvvvvの公式ページからたどっていくこともできます: https://vvvv.org/blog/24

5. vimeoで公開されているvvvvの作品はこちらから閲覧できます: https://vimeo.com/search?q=vvvv

第2章 vvvvの開発環境を整える

 vvvv gammaは2021/06現在Windowsにしか対応していませんが、描画系ライブラリーを中心にMicrosoft製フレームワークから徐々に脱却を果たしており、最終的にはマルチプラットフォームでの動作を目指して開発が進められています。

 しかしvvvv gammaと違い、vvvv betaは既存のままDirectXや.NET Frameworkが利用されているという理由から、Windowsでしか動作しないことが決定しています。

 表2-1はvvvv betaを問題なく利用するためのPCのスペックです。2DCGの製作や簡単な3DCGの製作であれば、この要件を満たすPCを用意することで利用が可能ですが、複雑な描画(パーティクルやモデリング、高度なレンダリングなど)を実行する場合はこの限りではありません。

 さらにHDD容量については本体のみをインストールしたときの容量であり、アドオンパックを追加する場合はもっと余裕を持って空き容量を用意した方がいいでしょう。

表2.1: vvvvをストレスなく動かすための最低要件
要件
OS Windows10
RAM(メモリー) 4GB
HDD(SDD) 64GB

2.1 vvvvのダウンロード

 vvvv betaのダウンロードは、以下のURLから実行することができます。

 https://vvvv.org/downloads

図2.1: vvvv betaのダウンロードページ

 これまでに何度か述べてきている通り、現在vvvvにはvvvv gammaとvvvv betaの二種類が存在します。1

 今回この本のメイン言語として取り上げるvvvvは、二段目の右側の枠からダウンロードできます。しかし、2021/07時点ではOffline Installerと表記されている方がデッドリンクとなっており、インストーラーのダウンロードが実施できません。

 従って、上部の濃い灰色の枠で囲われた「vvvv」の中にあるリンクをクリックしてダウンロードします。 

 このとき、使っているWindowsのビット版に合ったバージョンをダウンロードして下さい。2

 また、addonpack3はvvvv beta本体がインストールされていることが前提で動く関数パックのひとつなので、単体では動きません。公式サイトの記述にもありますが、addonpackの導入前には必ずvvvv beta本体のダウンロード及びインストールを済ませておいて下さい。

 addonpackといいつつ、vvvv betaでCGプログラミングを行う際には、ほぼ必須になるプログラムが含まれているので、同じタイミングでインストールしておくと後々楽になります。

試し読みはここまでです。
この続きは、製品版でお楽しみください。