虎の穴開発室ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

vvvvで一風変わったプログラミングをしてみよう

技術エントリ

皆さんこんにちはY.Fです。

本記事は2023 夏のブログ連載企画8日目の記事になります。

7月4日は、iwadyさんの「私的 Pythonライブラリ2選 ~私、気になります！~」でした。 明日は鷺山さんの「KotlinのDIフレームワーク『Koin』でお手軽DI」になります。ご期待ください！

今回の記事では、推しプログラミング言語として、最近個人的に触っているビジュアルプログラミング言語vvvvを紹介してみたいと思います。

vvvvについて

vvvvの概要としては以下のような感じです。

  • ドイツの会社が作っている
  • ビジュアルライブプログラミング環境
  • 2Dや3Dのグラフィックをインタラクティブに作れる
  • データのビジュアライズができる
  • .NET製であり、.NETの資産(nugetなど)を利用できる

vvvv自体はOSSではなく、シェアウェアですが、商用利用でなければ無料で利用できます。ただし、どこまでが商用かの判断についてはユーザーに任せれているので、もしガッツリ使っていくぞ！といった場合は課金するのがよさそうです。

store.vvvv.org

また、現行ではvvvv betaとvvvv gammaの二種類が提供されています。vvvv gammaが次世代版になるようです。この記事では主にvvvv gammaについて紹介してみたいと思います。

はじめの一歩

vvvv gammaをインストールして起動すると以下のような画面が表示されると思います。

左のウインドウが実際のプログラミング領域で、右がヘルプやマニュアルが表示される領域です。左のウインドウはPatchesとも呼ばれます。

Exampleもあるので一番上のExampleを表示してみます。

左のウインドウにフローチャートのようなものと、別のウインドウが表示されます。追加で表示されたウインドウをクリックすると丸が増えていきます。

また、3Dのサンプルを表示してみると以下のように表示されます。

他にも色々サンプルがあるので、表示するだけでも楽しめると思います。

プログラミングスタイル

基本的にはNodesと呼ばれる四角のブロックをLinksと呼ばれるラインで繋いでいく形になります。パッチ上の適当なところでダブルクリックすることで、利用可能なノード一覧が表示されます。使いたいノードがわかっているときは検索もできます。

まずは簡単に足し算をしてみます。

上記は+ノードに100.23と300.20を入力している状態です。 左下のOutputにカーソルを当てると結果がわかります。*ノードを追加してこの出力値を二倍にしてみたいと思います。

+ノードのOutputを*ノードにつなぐことで800.86にできました。

vvvvは基本的にはこのような形でのプログラミングを実施してくことになります。 また、インタラクティブを謳う通り、ノードをおいた瞬間に評価されます。試しに、Rendererノードをおいてみると、即座にウインドウが一つ立ち上がります。

左上から二番目にカーソルを当ててみると、Layerというオブジェクトを要求していることがわかります。 Rectangleノードを用意して、左上から二番目に接続してみると、白い四角が即座に表示されます。

Rectangleノードの左上から二番目がサイズになります。ここを変えてみると、また即座に表示されている四角形の形が変わります。

vvvvでCameraを扱う

カメラから取得した画像をもとに加工することもできます。 カメラ映像にBlurをかけてみます。

自宅なのでかなり強めにBlurかけてます。 vvvvだとこの程度のプログラミングでこういった加工もできます。

また、VideoInノードから取得された画像をDrawImageで書き出し、その際にフィルターとしてBlurをかける、といったことが直感的にわかりやすくなっていると思います。

外部ライブラリを使う(VL.OpenCV)

最後に、外部ライブラリを使ってみたいと思います。OpenCVを使ってカメラから取得された画像の輪郭線にラインを引いてみたいと思います。

カメラから取得された画像の輪郭線にピンクのラインを引いています。

VideoInは先程のVideoInとは異なり、VL.OpenCVが提供しているものになります。そこから取得された画像に対して、GrayScale化(GrayScaleノード)や、2値化(Thresholdノード)を適用し、Controursノードで輪郭線を取得しています。

最終的にはDrawControursを使って元のカメラの入力と同時に、ピンク色の線で書き出しを行っています。

また、今回は描画していませんが、右側にあるObjectDetectorなどは、顔認識用にものになります。こちらもOpenCVに付属しているものです。

まとめ

今回はビジュアルプログラミング言語vvvvを紹介してみました。注意点としては、現状ではWindowsのみでしか動きません。

かなり独特な部分も多いですが、新しい文化やパラダイムにふれることで、自分の中の知見にもなるかなーと思いました。 プログラマであれば手軽にビジュアルプログラミングでグラフィカルなものができるので、興味がある人は是非お試しください。

採用情報

虎の穴では一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧下さい。
カジュアル面談やエンジニア向けイベントも随時開催中です。ぜひチェックしてみてください♪
yumenosora.co.jp