モノクロタイム

I'm from the future!

【vvvv】vvvvでJoyConを入力機器として扱ってみる(接続編)

こんにちは,れいじです.

vvvvは外部入力機器を簡単に扱うことができます.例えばDualShock4.これはPS4のコントローラですが,PS4だけでなくPCゲームのコントローラとしても優秀です.

DualShock4の場合

DualShock4に関しては既にサンプルパッチが出ていてタッチパッドのタッチ入力以外のすべての入力を取得してBangや座標データとして変換・使用することができます.

これに関してはvvvv講座にも動画が上がっており,解説がされています.


【vvvv講座】PS4のコントローラを使う~Contribution探検~

Dualshock4はUSBケーブルを用いた有線接続・Bluetoothを使用した無線接続に対応しています.

JoyConの場合

じゃあJoyConはどうなのさ.

JoyConはNintendoSwitchのコントローラで,本体から外して使うことができます.JoyConは本体とくっついている状態のとき,本体とくっついている部分の端子を用いて有線接続をします.外して使うときはBluetoothを使用して本体と通信を行います.

vvvvにはBluetoothで繋ぐことのできる機器と連携するためのHIDノードというものが存在します.

HID (Devices) | vvvv

このHIDノードはDualShock4を接続するためにも使用されていて,DualShock4と同様にJoyConをHIDデバイスとして認識させてやればその入力を取得することが可能ということになります.

ただしJoyConはPCで扱うためにひと手間必要です.詳しい手順は以下のリンクから.

hyperts.net

要約すると,

  • PCとJoyConをペアリングする

  • vJoy driverというJoyConの設定用ソフトウェアをダウンロードする

  • mfosse\JoyCon-DriverというJoyCon用ドライバを入手する

下2つをやらなくてもPC上で動作確認はできるんですが,ジョイスティックの傾きが正常に取得できなかったりJoyCon内側のランプの点滅が止まらなかったりします.あと下2つをやらないとvvvvで値の取得ができませんでした.

静止画で申し訳ないのですが,取得できた記念のツイート.

わりと通信内容が不明で,飛んできた通信内容(バイナリ)の必要そうなところ,不必要そうなところを勘で切り出してます.ただJoyConの解析はかなり進んでいて通信内容も分かってきたので,微調整すればモノにできそうな気がしています.これ↓読むのかなりつらいけど…

github.com

とりあえず,vvvvでもJoyConが使えそうな兆しがあるということで報告でした.

Switch持ってなくても,JoyCon単体でも買えます.興味ある方はぜひ.

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

↓こいつがあれば有線接続もできるんじゃないだろうか…

Joy-Con充電グリップ

Joy-Con充電グリップ

【vvvv】HitTestについて【技術書典4・補足記事】

この記事は技術書典で頒布したvvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー - CANDY - BOOTH(同人誌通販・ダウンロード)の補足解説記事になります.

こんにちは,れいじです.

技術書典4で頒布したvvvvの本について,補足説明の記事を書きました.

HitTestについて

HitTestはデスクトップ上(もしくはRendererウィンドウ上)のマウスポインタの位置をもとにして,Renderer上に表示されているオブジェクトと接触したらイベントを発生させるノードです.

実際に使うとどういうものが作れるかは以下の記事も参考にしてみてください.

reiji1020.hatenablog.com

HitTestにも様々種類がありますが,今回頒布した本ではHitTest(2d circle)を使用しました.

これはマウスポインタの位置の周囲にある一定の大きさの円の外周を接触範囲とし,この外周とCGが重なり合ったときにtrueを返すboolean関数のような働きをします.

f:id:yomoyamareiji:20180501223419p:plain

HitTest(2d circle)のヘルプパッチでは,五角形の頂点が円の外周として示されています.この五角形の頂点が緑の楕円と重なった時,楕円は青色に変化するようなパッチが組まれています.

つまり,

ので,2種類の処理が書けるのです.

頒布した本では,


マウスポインタがCG(オブジェクトに触れたとき):trueを返す →

  • 図形の大きさ=等倍

  • n角形の角数=三角形

  • CGの色=オレンジ


マウスポインタがCG(オブジェクトに触れていないとき):falseを返す →

  • 図形の大きさ=二倍

  • n角形の角数=五角形

  • CGの色=紫


の処理を複数のswitchノードを使用して作り分けています.

HitTestには2d circle以外にも2d Polygon, 2d Quadなど違う性質を持つノードがいくつか存在します.

ご自分の好みに合わせて&便利なノードを使い分けてくださいね.

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

技術書典4にサークル参加しました

こんにちは,れいじです.

昨日4月22日,同人系技術書の祭典「技術書典4」にサークル参加してきました.

技術書典

サークル情報はこんな感じ↓

techbookfest.org

vvvvの薄い本(拙著)とSVGの薄い本(@dorako321氏著)を頒布しました.

どちらも冊子版は完売御礼,電子版も多くの方に手に取っていただきました.ありがとうございました!

以下,本を書く~頒布までの流れをまとめていこうと思います.

本を書く編

↓この辺にまとめています reiji1020.hatenablog.com

印刷する編

同人イベントにサークル参加している会社の同期の情報をチラ見しつつ,印刷所を株式会社グラフィックさんに頼むことにしました.

冊子・ダウンロードコードカードどちらもグラフィックさんに頼んでいます.私この技術書典4が同人イベント(サークル側)参加初・同人誌製作初なのですが,おまけがめちゃめちゃついててビビりました…本当に儲かってるのかな…好き…(突然の告白)

冊子版は22冊(見本誌とか身内用とか)印刷を依頼しておまけで6部,ダウンロードコードカードに至っては50枚依頼して33枚おまけがついてきました.なんだここ(困惑)

実際に頒布する編

vvvv本はA4判・グレースケール印刷で1冊750円くらいで刷ることができたので,1冊800円(ほぼ原価)で売ることにしました.その分電子版(500円)で諸々利益を出すようにしました.冊子版と電子版をセットで買うと300円引きの1000円で購入できるというセット割もやりました(これは利益云々より冊子版の在庫を出したくなかったということもある).

また,vvvv本・SVG本ともにBOOTHでDL版の販売を行いました.pdfなり何なりで電子版を作って売っているサークルは非常に多くて,電子版を作っているサークルさんはほぼほぼDL販売にも対応しているような感じでした.直接ブースに足を運べなくても,自宅でサッと買ってサッと読める.素晴らしい!

gyaopan.booth.pm

gyaopan.booth.pm

まとめ

今回の技術書典4はサークル参加者含め6000人近くの人が秋葉原UDXに集合したそうです.15時過ぎまで入場制限がかかってたし…来場を諦めた人がTwitterでも多く見られました.天気も良すぎたしね…

今回の技術書典に参加して,自分の手で技術書を作るというとても気力のいる作業を完遂できたことはもちろん,vvvvというニッチ技術しかない本が多くの方に手に取っていただけたこと,大好きなvvvvの布教ができたこと等,参加してよかったと感じた事がたくさんありました.最初は本を手に取っていただけるか,一冊も売れなかったらどうしようか,とても不安でした.

技術書典はエンジニア・デザイナー,いろんなITにかかわる人たちが来るイベントです.どんなにマイナーでも,自分の本を気になって見に来てくれる人が絶対います.

なので,今回技術書典に一般参加して「本出したいな~」と燻っている人は是非本書いてみましょう!メディアアート枠(マイナー枠)でvvvv(日本ではまだまだニッチな技術)を好きに書き散らした本を手に取っていただけるようなイベントで,かなり参加者の懐が深いです.

ではでは!

Gitbookで技術書もどきを作って頒布した時の話+技術書典4にサークル参加します

こんにちは,れいじです.

先日Yahoo Japan Tech Conferenceの展示ブースでHackDay10th Anniversaryで作ったShakeを展示してきました.

techconference.yahoo.co.jp

Shakeについては以下をどうぞ

reiji1020.hatenablog.com

Yahoo Japan Tech Conferenceはヤフー株式会社主催の技術カンファで,主にヤフーで使われている技術やプロジェクト運用,ヤフーでの働き方などを紹介しました.

このカンファレンスに展示側で参加しておりまして,Shakeの紹介とともにvvvvの紹介本を作成して頒布しておりました.

このvvvvの薄い本はgitbookを使用して作成したのですが,色々と苦戦した場面があったのでまとめておこうと思います.

www.gitbook.com

(以前大学で講師をしたときもGitbookを使用してテキストを作成していました)

reiji1020.hatenablog.com

Gitbookで印刷も可能な電子書籍を作る

GitbookはMarkDown形式でドキュメントを執筆できる便利ツールで,技術書をGitbookで作るためのTipsも出ています.

www.gitbook.com

ここがすごいよGitBook

まずMarkdownで書けるところがよいです.必要な機能だけしかないし,コードを載せる際にもシンタックスハイライトが効くので,技術書にはぴったりだと思います. 特にはてなブログやQiitaなどで技術発信をしている方は,執筆の技術的な学習コストがゼロで始められるので良いです.

画像埋め込みも簡単で,GitBook Editorを使用している場合だとEditorにドラッグアンドドロップするだけで画像を入れ込むことができます.

ここがつらいよGitBook

Gitbookは知らぬ間に機能がなくなっているor追加されているor場所が移動しているなどのアップデートが入ります.正直ついていくのがきついです(老人)

さらにGitBookで技術書を書く場合,印刷できる体裁に整えたりフォントの埋め込みをするためにTeXを触る必要があるのですが,そもそもTeXなんて触りたくないという気持ちのほうが大きいです.これは個人的な感想なのですが,そもそもTeXに慣れていないので(卒論・修論はWordで書いた),TeXを学ぶのがきついというところがあります.執筆に学習コストをかけたくないんです.

もともとはWeb上で閲覧できるドキュメントを作成するものなので,紙に印刷する前提のページレイアウトが不可能です.段組みとかもってのほかです.Markdownで表現できるページレイアウトはできるけど,逆を返せばMarkDownでできないことはGitBookでもできないということです.

どうすればよかったのか

今回私が作成したvvvvの薄い本は,

  • コードを載せる場面がほとんどない
  • どっちかというとスクショが多い
  • ゆえにページ量が多くなった

ので,GitBookで作るには適さなかったという面も大きかったんだと思います.執筆に関する学習コストをかけたくなく,Wordおばさんであった私の場合はWordで作るのが適切だったのかもしれません.

ということで

2018年4月22日(日)に開催される技術書典4に「CANDY CHUPS Lab.」のサークル名で参加することになりました.

techbookfest.org

vvvvの薄い本(完成版)やsvgメディアアートを作る本,CANDY CHUPS Lab.ロゴ缶バッヂなど様々なものを作って持っていく予定です.

今回の反省を生かして,よりよい本を作る予定です.

よろしくお願いします!