What is vvvvjs?

・vvvvの皮を被った、なんか別物。笑
・node.js上で動いています。
・開発途上ではあるが、アップデートが少しずつされている。
・vvvvと挙動が異なるところも、多々ある。
・Onclickとか、ButtonのHTMLでつかえるものが多々ある
・vvvvとちがってWindows Onlyじゃないよーーーー！

何ができるの？

vimeoの動画をぜひご覧ください！
https://vimeo.com/255544587

vvvv.jsの良いところ、悪いところ

Good↑

・vvvvを習得したままwebへ考え方を移行できる
・ユーザーがめちゃくちゃ少ない。
　Developper コミュニティ：35人…。
　→ But…開発者は、すごく優しい！！

Bad↓

・情報が本当にない（公式のチュートリアルすら途中になっている。）
・ヘルプパッチがない

Let's Setuppppp!!!

初学者向けに丁寧に書いているので、わかる人はバシバシ飛ばしてください。
（MacOSでセットアップした内容を記載しています。同様の手順でWindows10も問題なく動いておりました。）

各種ダウンロード

A. FireFox

公式は、Chrome対応と書いてますが、Chromeで動かないことが多く、
僕の環境ではFirefoxが安定的に動いてます。
（mac OS Mojave 10.14.2)
https://www.mozilla.org/ja/firefox/new/

B. node.js

公式ホームページより
10.15.1 LTS は挙動確認済み
https://nodejs.org/ja/

C. vvvvjs パッケージ

vvvv.jsのパッケージをダウンロードします。
公式のではなく、下記リポジトリの方が失敗なくインストールできました。
https://github.com/zauner/vvvv.js

インストール

1.zip解凍後、適当な場所へフォルダを移動

フォルダ名に " . " が入っているとパスがうまく通らない可能性もあるのでフォルダ名を変更してください。
ex) User / vvvv_dev / vvvvjs

2.コマンドラインツールでの操作
mac：terminal
windows:コマンドプロンプト

2.terminal/コマンドプロンプトで上記フォルダへ移動
ex)上記のフォルダで準備した場合
cd vvvv_dev
cd vvvvjs

3.vvvvjsフォルダ内で、”npm install”　コマンド入力

4.上記、エラーないかを確認
※Xcode/コマンドプロンプトが入ってなかったら、エラーがccdでる。

動作確認1:vvvv.jsが動いているか確認

FireFox上でvvvvjsを動かしてみる

terminalからcdコマンドでvvvvjsフォルダへ移動
“node server.js . -e” で起動
※ . -e はエディットモードでの起動という意味です。編集しない場合は、
"node server.js"でOK

FireFoxにて、下記URLで動くか確認 http://localhost:5000/examples/01_canvas_arcs/ 下記画像が出てればOK！！

動作確認2:vvvv.jsが編集可能か確認

エディット用のパッチの展開下記、URLをFireFoxで開く localhost:5000/examples/01_canvas_arcs/#edit/example01.v4p

これは、User/vvvv_dev/vvvvjs/examples/01_canvas_arcsのフォルダ内のexample01.v4pを編集しているということになります。

パッチ画面でなんらか編集をする
”Control + S” で保存を行う
ポップアップが出て、保存ができればOK
（MacでもControlを使います）

4.ウィンドを閉じる時は、”Command+W”
（こっちはMacはCommand+W/Winはcontorl+W）

セットアップ完了！

Enjoy vvvv.js！！！！

基本操作などは、また別記事で！！

参考までに。
札幌市立大学クリエイティブコーディングスクールで実施したvvvv.jsワークショップの様子はこちら。
https://note.mu/junky/n/n9e40a24e7c0e

About vvvv.js / 環境構築