モノクロタイム

I'm from the future!

HackDay10thに出場してFun賞を受賞しました

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

2017年12月9日~10日にかけて行われたHackDay10thに参加しました.

hackday.jp

秋葉原UDXで24時間ぶっ通しで行われる日本最大級のハッカソンイベントです.

日本最大級なだけあって,周りには手ごわそうなクリエイターがたくさんいました.

我々「CANDY CHUPS Lab.」は2人のチームで,スキ(Like)をこっそりシェアする「Shake(シェイク)」というアプリを作りました.

f:id:yomoyamareiji:20171211210346p:plain

f:id:yomoyamareiji:20171211210716p:plain

あのアニメのこのキャラクターが好きだけど,キャラグッズで武装する重戦車オタクにはなれない…でも仲間を見つけたい…

そんな時に,キャラクターの代表色を抽出しておしゃれ画像に変換してくれるのがShakeです.

ニコニコ生放送のコメントでは「隠れオタク救済」「ヲタクの心を掴んでる」等のコメントをいただきました.ありがとうございます!

周りの参加者がVoiceUI,MachineLearning等のつよい技術を使って素晴らしいプロダクトを作っている中,これらの技術を一つも使っていないShakeがFun賞を受賞することができました!

Fun賞とはプロダクトが楽しいか(使ってみたいと思わせる魅力があるか)を評価する賞です.アイデアを出した身としては純粋にアイデアを評価されているということで,とてもうれしいです!

もちろんアイデアだけでは賞は取れないので,評価されるレベルまで実装し,面白さを伝えることができたのが一番大きいと思っています.

深夜テンションで持ち込んでいたレゴで遊んだり↓

深夜に眠眠打破のつよいやつ「強強打破」を飲んでおかしくなったりしましたが↓

審査員の方や他の参加者の方からあたたかい言葉をかけていただきました!

また,flick!さんが写真付きでツイートしてくださっていました.ありがとうございます!

外部向けのHackDayに出場するのは初めてで,しかも周りのチームが4~6人くらいのメンバーで参加しているのを見て,「次は絶対人増やそう…」と少し落ち込んだりもしましたが,大切なのは人数じゃなくて作るプロダクトだな~!と感じました.あ,どっちにしても次は人増やしたいです💦

次のHackDayは1年後の2018年12月です‼

来年は最優秀賞目指して頑張ります!

ではでは~

【vvvv】昭和の映像っぽいフィルタを作る

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

何かエモいCGとか映像ないかな~~~とYoutubeをDigっていたらこの動画にたどり着きました.


東京ゲゲゲイ イデオロギー

仄暗い感じが最高にかっこいい……戦中映像もいい…ということで,某昭和の映像っぽいフィルタをvvvvで実装してみました.

パッチは以下のとおり.

f:id:yomoyamareiji:20170924153528p:plain

各種オプションの解説をしていきます.記載のないノードに関しては標準値です

VideoIn側

映像入力側です.USBカメラからの入力を取っていますが,静止画でも大丈夫.

* Blur

カメラ入力をぼかしています.Widthを0.15に設定.

* Lomograph

カメラ入力をグレースケールに変換しています.本当はシェーダ書くべきなんだけど面倒くさかった それぞれ

  • Vignette Start:0.50

  • Vignette Amount:0.50

  • Vignette Dodge:1.00

  • Contrast:1.00

  • Level:0.65

  • Effect:6

  • Type:6

  • Iterations:4

に設定しています.

* Transform

Quadの大きさをRenderに揃えるために使用しています.ScaleX,ScaleYを2.00に設定.

Noise側

古い映像特有のノイズを乗せます.

* Noise

ノイズを発生させます.標準だとノイズが細かすぎる&ノイズの色がはっきりしすぎているので調整します.それぞれ

  • Color A: H:0.00 S:0.00 V:0.00 A:0.25

  • Color B: H:0.00 S:0.00 V:0.25 A:0.25

  • Width:50

  • Height:50

に設定します.

  • FullScreenQuad

Groupで映像をMixする場合,Binの数が大きい方がレイヤ的な意味で上になります.

余談ですが,Quadを使用すると下に存在するレイヤが見えなくなってしまい,別途Blendノードを使用して重畳モードを指定・Transformノードを使用してスケール変更したりとかなり面倒です.

FullScreenQuadだと前述2つの設定がこれ一つで済むので便利です.以下のように設定してください

  • Blend Mode:Blend
Renderer

こんな感じの映像効果になります

f:id:yomoyamareiji:20170924155113g:plain

コスプレ写真の加工にも使えそう

f:id:yomoyamareiji:20170924154857p:plain

かなりピーキーなフィルタを作ってしまいましたが,いい感じに使ってもらえると嬉しいです👌

ではでは~

【vvvv】FiducialTrackerでマーカー同士の距離を測るやつ

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

今回はちょっとしたメモ書き的な感じで.

vvvvではもちろんAR的なプログラムも簡単に作ることが出来ます.

その中でも比較的簡単に使えるマーカーはARToolKitが提供する元祖ARマーカーとFiducialTrackerです.

FiducialTrackerはマーカーがオシャレで好きです.VJCardboardでも使用しました.

FiducialTracker (FreeFrame DShow9) | vvvv

reiji1020.hatenablog.com

vvvvでのFiducialTrackerは非常に有能で,何もしなくてもRenderer上のマーカーの中心座標を取る事が出来ます.

勿論複数のマーカーのトラッキングにも対応しているので,中心座標の差を取ればマーカー同士の距離を取ることが出来ます.

あ,もちろん厳密な距離を取るのであれば多少の計算は必要です.とりあえず簡単な距離が取れればいい人向け.

パッチはこんな感じ.

f:id:yomoyamareiji:20170716222145p:plain

今回は2つのマーカーの距離を取るため,GetSliceを2つ配置してそれぞれindex0,index1の値を持ってくるようにしています.

このGetSliceでは各マーカーの中心座標のうちX座標を取り出しています,Y軸の差を取りたい場合は隣のピンに接続するとよいです.

indexを指定すれば欲しい値を持ってきてくれます(指定したindexが見つからない場合は最大indexの値を持ってきます)

f:id:yomoyamareiji:20170716223040j:plain

画面左下に数値が出ます.

他にも何個かTips的なのが続きます.もし使えそうなのがありましたら自由に使ってください.

ではでは~

【vvvv】マウスオーバーでフワッと動かす

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

めちゃめちゃ久しぶりにブログ書く気がする…

この前行ったvvvvオフ会の参加レポも後々あげたいですね.

さて,今回はTips的なパッチです.

体験型アートに無くてはならない,所謂「マウスオーバー(タッチ)でCGを変化させるアレ」です.

パッチはこんな感じ.

f:id:yomoyamareiji:20170703225617p:plain

Switchノードが複数ありますが,使っているのはColor,Value,Stringのみです.全て表示の切り替えに使用します.

マウスオーバーはHittestというノードを使用すると簡単に実装できます.パッチで使用しているのはHitTest(2DCircle).

切り替え時にDamperを挟むとヌルっと動いてくれるので気持ちいいです.Damperに関してはパラメータいじってません.

f:id:yomoyamareiji:20170703230048g:plain

ヌルッ

参考にしたのはこことHitTestのヘルプパッチです.

discourse.vvvv.org

vvvvは当たり判定なんかも割と簡単に実装出来ていいですね.

ハッカソンでvvvv使ってあれこれしたいなーなー

ではでは!