今回は、世田谷デジタルものづくりフェスで一緒にVIVIWARE Cellのブースを企画・運営してくださった、駿台電子情報&ビジネス専門学校の吉田侑介さんの作品です！

---

この「幾何学デッサン」は、◯・ ▢・ △の基本図形を使ってお絵かきするプログラムで、ここではその内の△で描画するプログラムについて紹介します。

▼世田谷デジタルものづくりフェスとは

11月5日6日に開催された駒澤大学文化祭と同時開催されたイベントです。
駒澤大学の「アントレプレナーシップ養成講座」から生まれたイベントで、「学びとは何か？」という問いから生まれました。

▼作品はこちら

デジフェス幾何学デッサン

それでは、プログラムから見ていきましょう。

プログラム

全体像がこちらです。

それぞれの枠内は

① VIVIWARE Cell Joystick（以降、Joystick Cell）での操作
② VIVIWARE Cell Button（以降、Button Cell）の操作
③ VIVIWARE Cell Color Picker（以降、Color Picker Cell）を使用したとき

のプログラムとなっています。

では、各部分を詳しく見ていきます。

① Joystick Cellでの操作

1. ここではCompareモジュールを使って、Joystick Cellを動かしたときの値とアナログ値、20を比較・判定します。
   なお、Joystick Cellの値は、上下左右それぞれ Max：100, Min：-100の範囲と設定します。

2. 手順1.の判定結果がtrueの場合、0.01秒間trueを出力し続けます。
   これは後述のOSC Sendモジュールがtrueをずっと送り続けると、Joystick Cellが誤作動を起こしてしまうのを防ぐためです。

3. OSC Sendモジュールの設定をします。
   手順2.からtrueが出力されたら、Sound Player モジュールで操作音を出します。
   続いて、アナログ値（上: 51, 下: -51, 右: 51, 左: -51）をOSC Sendモジュールに出力します。
   OSC SendモジュールのIP Addressには、接続先PCのIPアドレスを指定します。
   ※Port NoOSC Addressについては、後に出てくるPC側のプログラムでご紹介します。
   

Joystick CellとButton Cellを固定したコントローラ

② Button Cellの操作

この部分は、描画とリセットの操作についてプログラムしています。

描画

• Xボタン: 効果音が鳴り、OSC SendモジュールがPCに値を送る
• Yボタン: 描画図形のモードをframe（枠線のみ）に変える
• Aボタン: 描画図形のモードをmoire（縞模様）に変える
• Bボタン: 描画図形のモードをfill（塗りつぶし）に変える

リセット

全てのボタンで同じ動作になるように、一つでもボタンが押されるとtrue判定し、効果音が鳴るのと同時にOSC SendモジュールがPCに値を送り、画面がリセットされます。

この箱の中にButton Cellが入っています

③ Color Picker Cell

ライト調整

Color Picker CellのLightの強度を調整します。

（LightについてはこちらのTipsもご参照ください）

1. Color Picker Cellで取得したHSVをRGBに変換します。
2. 手順1.で取得したRGBの各値の間に文字「z」をいれて文字列に変換し、OSC SendモジュールでPCに値を送ります。

以上が、VIVIWARE Cell 側のプログラムです。

PC側のプログラム

この作品では、Processingという視覚的表現がしやすいプログラミング言語を使用しました。

こちらからプログラムのダウンロードができます。

三角形を描くプログラムの大まかな仕組み

1. カーソルを操作し、点を３つ打つ。
2. 最初の３点を基に三角形が描かれる。
3. 新しい点を１つ打つ。
4. 描画された三角形の３点の内、新しい１点との距離が近い２点を結び、三角形を描画する。
5. 手順3～4を繰り返す

描画モード

frame（枠線のみ）、moire（縞模様）、fill（塗りつぶし） の３種類のモードがあります。
線の色は、Color Picker Cellで読み取った色を使うことができます。

frame（枠線のみ）

moire（縞模様）

fill（塗りつぶし）

OSC通信

OSC通信についてくわしくはこちらをご参照ください。

Processingのプログラムを開くと、次のような画面になります。

OSCのタブをクリックすると、OSC通信のコードが表示されます。

枠①

VIVIWARE Cellのプログラムで使っているOSC SendモジュールのOSC Addressと同じであることが確認できます。
それぞれ、以下のような処理をしています。

• /vvc/updown：カーソルの上下を制御
• /vvc/leftright：カーソルの左右を制御
• /vvc/draw      ：新しい点を打つ
• /vvc/fill          ：描画モードを塗りつぶしにする
• /vvc/frame    ：描画モードを枠線にする
• /vvc/moire    ：描画モードを縞模様にする
• /vvc/color      ：色を変える

枠②

先程説明したVIVIWARE Cellの Joystick Cellのプログラムでは、OSC Sendモジュールでアナログ値（上: 51, 下: -51, 右: 51, 左: -51）を送っています。

条件分岐（50よりも大きいか、小さいか）で、カーソルを上下左右にそれぞれ 50pxずつ動かしています。

所感

今回は、OSC通信を使って外部のプログラムと連携してみる作品を制作しました。

当日、OSC通信ではWi-Fiを使用しましたが、大学などの公共の場ではWi-Fiの設定等でトラブルが起きてしまうことがよくあります。

準備の段階でWi-Fiの管理者の方などにご確認下さい。

プログラム次第、アイデア次第で、VIVIWARE Cellを拡張させることができると思います。

是非、みなさまもお試しください！

プロジェクトシェア

（Created by Yusuke Yoshida）

今回は、世田谷デジタルものづくりフェスで一緒にVIVIWARE Cellのブースを企画・運営してくださった、駿台電子情報&ビジネス専門学校の吉田侑介さんの作品です！

---

この「幾何学デッサン」は、◯・ ▢・ △の基本図形を使ってお絵かきするプログラムで、ここではその内の△で描画するプログラムについて紹介します。

▼世田谷デジタルものづくりフェスとは

11月5日6日に開催された駒澤大学文化祭と同時開催されたイベントです。
駒澤大学の「アントレプレナーシップ養成講座」から生まれたイベントで、「学びとは何か？」という問いから生まれました。

▼作品はこちら

デジフェス幾何学デッサン

それでは、プログラムから見ていきましょう。

プログラム

全体像がこちらです。

それぞれの枠内は

① VIVIWARE Cell Joystick（以降、Joystick Cell）での操作
② VIVIWARE Cell Button（以降、Button Cell）の操作
③ VIVIWARE Cell Color Picker（以降、Color Picker Cell）を使用したとき

のプログラムとなっています。

では、各部分を詳しく見ていきます。

① Joystick Cellでの操作

1. ここではCompareモジュールを使って、Joystick Cellを動かしたときの値とアナログ値、20を比較・判定します。
   なお、Joystick Cellの値は、上下左右それぞれ Max：100, Min：-100の範囲と設定します。

2. 手順1.の判定結果がtrueの場合、0.01秒間trueを出力し続けます。
   これは後述のOSC Sendモジュールがtrueをずっと送り続けると、Joystick Cellが誤作動を起こしてしまうのを防ぐためです。

3. OSC Sendモジュールの設定をします。
   手順2.からtrueが出力されたら、Sound Player モジュールで操作音を出します。
   続いて、アナログ値（上: 51, 下: -51, 右: 51, 左: -51）をOSC Sendモジュールに出力します。
   OSC SendモジュールのIP Addressには、接続先PCのIPアドレスを指定します。
   ※Port NoOSC Addressについては、後に出てくるPC側のプログラムでご紹介します。

Joystick CellとButton Cellを固定したコントローラ

② Button Cellの操作

この部分は、描画とリセットの操作についてプログラムしています。

描画

• Xボタン: 効果音が鳴り、OSC SendモジュールがPCに値を送る
• Yボタン: 描画図形のモードをframe（枠線のみ）に変える
• Aボタン: 描画図形のモードをmoire（縞模様）に変える
• Bボタン: 描画図形のモードをfill（塗りつぶし）に変える

リセット

全てのボタンで同じ動作になるように、一つでもボタンが押されるとtrue判定し、効果音が鳴るのと同時にOSC SendモジュールがPCに値を送り、画面がリセットされます。

この箱の中にButton Cellが入っています

③ Color Picker Cell

ライト調整

Color Picker CellのLightの強度を調整します。

（LightについてはこちらのTipsもご参照ください）

1. Color Picker Cellで取得したHSVをRGBに変換します。
2. 手順1.で取得したRGBの各値の間に文字「z」をいれて文字列に変換し、OSC SendモジュールでPCに値を送ります。

以上が、VIVIWARE Cell 側のプログラムです。

PC側のプログラム

この作品では、Processingという視覚的表現がしやすいプログラミング言語を使用しました。

こちらからプログラムのダウンロードができます。

三角形を描くプログラムの大まかな仕組み

1. カーソルを操作し、点を３つ打つ。
2. 最初の３点を基に三角形が描かれる。
3. 新しい点を１つ打つ。
4. 描画された三角形の３点の内、新しい１点との距離が近い２点を結び、三角形を描画する。
5. 手順3～4を繰り返す

描画モード

frame（枠線のみ）、moire（縞模様）、fill（塗りつぶし） の３種類のモードがあります。
線の色は、Color Picker Cellで読み取った色を使うことができます。

frame（枠線のみ）

moire（縞模様）

fill（塗りつぶし）

OSC通信

OSC通信についてくわしくはこちらをご参照ください。

Processingのプログラムを開くと、次のような画面になります。

OSCのタブをクリックすると、OSC通信のコードが表示されます。

枠①

VIVIWARE Cellのプログラムで使っているOSC SendモジュールのOSC Addressと同じであることが確認できます。
それぞれ、以下のような処理をしています。

• /vvc/updown：カーソルの上下を制御
• /vvc/leftright：カーソルの左右を制御
• /vvc/draw      ：新しい点を打つ
• /vvc/fill          ：描画モードを塗りつぶしにする
• /vvc/frame    ：描画モードを枠線にする
• /vvc/moire    ：描画モードを縞模様にする
• /vvc/color      ：色を変える

枠②

先程説明したVIVIWARE Cellの Joystick Cellのプログラムでは、OSC Sendモジュールでアナログ値（上: 51, 下: -51, 右: 51, 左: -51）を送っています。

条件分岐（50よりも大きいか、小さいか）で、カーソルを上下左右にそれぞれ 50pxずつ動かしています。

所感

今回は、OSC通信を使って外部のプログラムと連携してみる作品を制作しました。

当日、OSC通信ではWi-Fiを使用しましたが、大学などの公共の場ではWi-Fiの設定等でトラブルが起きてしまうことがよくあります。

準備の段階でWi-Fiの管理者の方などにご確認下さい。

プログラム次第、アイデア次第で、VIVIWARE Cellを拡張させることができると思います。

是非、みなさまもお試しください！

プロジェクトシェア

（Created by Yusuke Yoshida）