モノクロタイム

I'm from the future!

【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.ロゴ缶バッヂなど様々なものを作って持っていく予定です.

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

よろしくお願いします!

micro:bitとSeedStudioのGroveを使ってみる【音出す編】

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

先週の土曜日に秋月電子でmicro:bitを購入しました.

BBC micro:bit (マイクロビット)

BBC micro:bit (マイクロビット)

小さなチップの中に

の機能が詰め込まれており,これでお値段2000円ちょっと.うーんすごい.電子工作で遊ぶならArduinoを買ってもろもろのセンサを用意するより安いんじゃないんだろうか.

そして合わせて購入したのがSeedStudio社が販売しているGroveというモジュールセット.私はアンプ付きスピーカーと24連の白色LEDを購入. これらのモジュールをmicro:bitで使用するためには専用のシールドも必要です.

www.switch-science.com

www.switch-science.com

www.switch-science.com

このスピーカーを使用して音を出すところまでやってみます.

プログラムは以下の通り.

f:id:yomoyamareiji:20180122213156p:plain

いたってシンプルです.micro:bitには2つのボタンが内蔵されており,それぞれのボタンに役割を与えることが可能です. Aボタンに真ん中のド,Bボタンに1オクターブ上のドを割り当ててみました.

配線は以下の通り. シールドにmicro:bitを差し込んで,P0プラグにアンプモジュールを接続します.これでOK.

f:id:yomoyamareiji:20180122214713j:plain

ちなみに開発環境ですが,私はiPadを使用してプログラムを組んでいます.もちろんPCでも開発は可能ですが,iPadならmicro:bitとペアリングしておけばBluetooth経由でプログラムが書き込める点が非常によいです. 手軽に開発開始できるのもいいところです.

micro:bit

micro:bit

  • Laurence Rogers
  • 教育
  • 無料

作ったプログラムをmicro:bitに書き込むと「ブー」,「ブー↑」と音が出ました!

Groveは特殊なモジュールの場合だと専用のライブラリを読み込む必要があるようですが,超音波センサやアンプモジュールなど,割と一般的な機能を備えるモジュールに関しては接続するだけで使用できるみたいです. 次は白色LEDを光らせてみたいと思います!

ではでは~

micro:bitではじめるプログラミング ―親子で学べるプログラミングとエレクトロニクス (Make:PROJECTS)

micro:bitではじめるプログラミング ―親子で学べるプログラミングとエレクトロニクス (Make:PROJECTS)