Cafe Diary ログに戻る

2013-12-11

お風呂でスクリーンに浸かる! フロジェクションマッピングに挑戦

今年もProcessing Advent Calender 2013に参加しました。今回はごく単純なプロジェクションマッピングの話題です。やり方は工学ナビ:Processingで手抜きプロジェクションマッピングを見ていただければOK!

プロジェクションマッピングの歴史についてはいまさらプロジェクションマッピングを追う!の記事が分かりやすいですので、ぜひご覧ください。

――以上――

というわけにはいかないので続きます。

でも、これから紹介するものはそんな大層なものでもなく、Processingのわずかなプログラムとプロジェクター、そして風呂があればできる単純なものです。

風呂……そうです。風呂の水面に映像を投影する、俗にいう風呂ジェクションマッピングというやつですね。

プロジェクターはなんの湿気対策もなく素っ裸で配置するので、スリル満点というか、壊れそうなのが懸念でしたが、扉のそばだったのでそれほど湿気はありませんでした(短時間では)。

むしろ高い位置から投影するために椅子の上に三脚を乗せたりしてたのが危なかったです。以前、Kinectをカーテンレールから落として、こんな有り様にしてしまった戦いの記憶が蘇りました。

※今回、Kinectは使用しません。KinectをProcessingから使うサンプルゲームは遊んで作るスマホゲームプログラミングなどで解説してます(for Androidなのに)ので、興味がありましたらぜひ。

お風呂の水が透明な場合は、バスタブの底面や側面に映ります。

水面に映したい場合は、しずかちゃんの憧れる牛乳風呂にするとか、
薬用ソフレなどの入浴剤をたっぷり入れるなどして、なるべく白い面を作っておくと綺麗に表示されます。

スクリーンの角を右ドラッグ(Macの場合はCTRLを押しながらドラッグ)すると、
スクリーンの形状を変形して、お風呂の水面の形にあわせられます。
最初にプロジェクターでお風呂の水面全体が映るように三脚その他を駆使して頑張りましょう。

本来は真上から真下に向けて投影するのがベストですが、そうするのは設置が難しく、湯気、落下、感電、その他悲劇が待っているかもしれませんのでご注意を。

真っ暗にしなくても映ってるのは見えましたが、分かりやすいようにしてテスト。
水面が光ってること自体が新鮮です。

マウスドラッグでカラフルな球を描けます(座標は変形前の座標)。

(撮影時に使った前バージョンのプログラムはカラフルな箱でした)

なんてことはない、単に水面の色が変わったり、絵や模様が出たりするだけなのですが、
実際にお風呂で浸かってみると、なんか楽しいです。

スペースキーでモード切り替え。
「なにもしない→タイル状に白と赤の箱を表示→ランダムに箱を表示→ランダムに球を表示」
を繰り返します。

水面に絵が出るなんとも言えない違和感があり、自分がその中にいて色を触るとぐにゃぐにゃ変形したり、不思議な感覚です。

こういう銭湯があってもいいんじゃないかと思ったりしました。

※レーザーショーのある温泉施設とかはあります。

あと同時に窓シミュレーターのように壁にもバーチャルな窓を作ったり、地平線テープみたいな謎の空間にするのも面白そうです。

プログラム冒頭のIS_DEVをtrueにすると(デフォルトでtrue)、風呂の背景画像の上にスクリーンを変形して投影しているような、開発用のテストモードになります。

これを使うと、プロジェクターが無くてもプロジェクションしている気分に。

Bキーで背景画像切り替え。dataフォルダに入っているscreenBG0〜6の画像を順番に切り替えます。

プログラム冒頭のIS_FULLSCREENをtrueにすると(デフォルトはfalse)、
フルスクリーンでプログラムを起動します。
プログラムはESCキーまたはQキーで終了させられます。

Processingで書いたプログラムはこちら。250行ほどです。

最後に、動かしている様子を動画で簡単にご紹介。

クリスマスツリーの飾り付けのようにしたり、キラキラ輝く南の海のようにしたり、
青の洞窟のようにしたり、札束風呂にしたり、
溶岩風呂や、クリームシチュー、大理石に入浴したり、
ミクでも、目玉おやじでも、スライムでも好きなキャラと入浴したり
サメが追ってくるようにしたり、
人や血が湧き出てくるようなホラーテイストにしたり、
いろいろ応用できると思いますので、気が向いた方はぜひ。

enjoy it!

続報

2014年4月25日
フジテレビ・スーパーニュースでバージョンアップ版をお披露目しました。

2014年7月28日
風呂の水面+浴槽にも投影する、風呂ジェクションマッピング2を自宅で撮影して、
動画を公開しました。



Trackback(0)

2013-9-26

自宅でエスプレッソ、カフェラテ、カプチーノ

ネスカフェ・ドルチェグストなるコーヒー・エスプレッソメーカーを購入して使っているのですが、なかなか楽しいです。専用カプセルをセットするだけで、手軽にいろんなコーヒーを楽しめます。

最初はネスカフェ・バリスタが気になったのですが、ラテやカプチーノなどがひと手間かかるのでもっとズボラなタイプはないかなぁと探したら、ドルチェグストなるものを見つけた、という感じです。

水を本体に入れた状態で、カプセルをセットするだけでコーヒーやカフェラテを作れます。ミルク系はコーヒーのカプセルとミルクのカプセルの系2つを使います。なので、一杯100円くらい。コーヒー系はその半分くらいのコストです。(バリスタはインスタントなのでもっとコストが安いはず)

選べるカプセルの種類はこちら。エスプレッソから、甘いチョコチーノ(ココア)、カプチーノ、カフェラテ、ティーラテ、カフェインレスのレギュラーブレンドコーヒーまでひと通りあります。

詳しくは公式ページ ネスカフェ・ドルチェグストって何?へどうぞ。いろんな形の機種があるのですが、主に水の入る量と本体色、自動ストップか手動ストップかの違いです。

自分自身はコーヒーにこだわりのない人なので、味の良し悪しなどはよく分かりませんが、普通においしく、あと単純に楽しいので、気に入っています。

難点をあげるなら抽出時にそこそこ大きな振動音がひびくので、静かなオフィスとか、赤ちゃんが寝てるときなどには困るかもです。(オフィスへの導入をお考えの方にはネスカフェアンバサダーなるプログラムもあるようです)

そうそう、こないだスタジオジブリのドキュメンタリーを見ていたら、ドルチェグストが置いてあって宮崎駿監督が使ってましたよ。

ちなみに、アイスコーヒーは先に氷を入れて抽出するだけでできます。より濃い味がお好みの方は、プラスチックで中に液体が入っているような溶けない氷をまぜると便利です。

ちょっと変化がほしいときは、季節にあわせていろんなアレンジレシピを試したり、考えたりするのも新鮮で面白いですよー。



Trackback(1)

2013-9-5

え、そうなの? ゲーム作り本を書いてよく聞かれた4つの質問と答え

Q1. 印税生活ですね?

いや、印税だけで生活していけるようなことは1冊技術書(?)出したぐらいじゃ、なかなかないですよ!

「直接お金を稼ぐ」目的だとすると、本を書くのはそんなに効率のよいやり方ではない気はします。もちろんやり方、内容、知名度など条件がそろえば別ですが。

今回は、数年前から調べて書いて書き直してとやり続けたので、かけた時間と労力、パソコン、プロジェクター、Kinect、Android端末などの機材費、各種ソフトウェア、その他かかった費用を考えると、当面は全然プラスじゃないというか、同じ時間バイトした方がよほど儲かると思います(※出版社の印税率が低いといったことはないです)。

でも本を書くというのは夢のひとつでしたから、そんなことはどうでもいいのです(いや家計的にはよくはないけど)。でも、せっかく書いた本なので、やっぱりいろんな方に読んでもらいたいですし、感想いただいたりすると本という形で普段は出会えない人の役に立てるのはとても嬉しいことだと実感します。あと、書くことで自分自身、とても勉強になりました。

あ、でももちろん買っていただいた分、しっかりいただいています。読者の皆様、ありがとうございます!

遊んで作るスマホゲームプログラミング」好評発売中です。

この本についての詳しい情報はdev.eyln.com

ちなみに元々のタイトルは「ゲーム作りの冒険」。
つまり、ゲーム作りを楽しく冒険する手引き書です。

Q2. いつ書いたの?

休日は家庭メインにしていたので、主に平日に書きました。

最初は仕事が終わったあと家で書いてたのですが、途中から仕事に行く前の朝に書くように変えました。

まず、仕事と家庭と趣味(本)の3つを全部を同じくらい頑張ろうとして、1日の時間割を書いてみたら、あまりに時間がなかったので、朝パターン、夜パターン、毎日パターン、まとめパターンなどいろいろな時間配分を考えました。

それで試してみたら、いつ何をするかで自分の能率が全然違うことに気づいたのです。考えてみたら、あたりまえか……でも自分は夜型だと思っていたのに今の自分はどうもそうではないらしい、と。

仕事だとまだ気が張ってるし、会話もあるしで夜でもそんなに効率落ちてる気はしないのですが、そのあと家に帰るともう、頭がぼーっとしているらしく、やり直しが多くて、朝の方が3倍ぐらい早く同じことができる有様です。

一度いろんな生活パターンを試してみると発見があるかもしれませんよ。

Q3. どこで書いたの?

家とカフェで書きました。

カフェ? あれか、例のモナド…じゃなく、ミスドでもなくって、ノマドってやつか、ケッ、という感想を抱く方もいるかもしれないですが、家だと基本的に子供が寄ってきて集中した作業ができないのです。子供というのはそういうものなのでよいのですが、か、書けない……というわけで朝カフェです。

これはコメダ珈琲店での1枚。朝コーヒー飲むとトーストとゆで卵のサービスまで。

普段よく行ってたのはBECK'S COFFEE SHOPです。6枚つづりの回数券が1,050円で売ってて、月曜に買うとその日1杯無料だったり、至れり尽くせりのお店です。

たまたま混み合ってない時間が多く、出社しないといけないからあまり長時間利用もなかったですが、お店で執筆するときは空気を読むように気をつけましょう。何度も行くお店ですしね。

執筆とプログラミングに使っているMac Book Airはもともと外に持ち出す気などはなく、家の中で移動して使う目的だったのですが、Airなら持ち出せるな、やってみるかと試してみたら意外とよかった、という感じです。でもワンショルダーのバッグだと重いので、持ち運びにはリュックを使用。

Windows環境でのテストも必要なのでParallelsでWindows8を入れて動かしていました。

Q4. どうやって出版社に話を?

知人の紹介などが一番スムーズだと思いますが、私はWebのフォームからストレートにプロフィールと企画内容を送りました。

分かりやすくそういうページを書いてある出版社は限られるかもですが、私は秀和システム ビジネスパートナー募集から問い合わせてみました。秀和システムという出版社はゲームプログラマになる前に覚えておきたい技術などを出していて好印象だったので。

その後はメールで少しやり取りして、直接打ち合わせて、あとは出来上がったものを順次お送りして、みたいな感じでした。

とアッサリ書きましたが、何か参考になるでしょうか。
「出版までの流れ」や「執筆に使ったツール」などは、また後日書くかも。

それでは、また!



Trackback(0)

2013-8-16

イチから簡単なアクションゲームを作る15分ぐらいの動画

夏休みの特別企画!
イチから横スクロールアクションゲームを作る、15分ぐらいの解説動画です。

プログラミングして完成させるソースコードは100行。

でも全部手入力で途中間違えて修正したりもしてるのでそこそこ時間がかかりました。
倍速再生なので実際は30分ぐらいです。

ただ、ムービー作成の方が時間がかかった…。実際は夏休みでもなく非常に忙しかったので、深夜に何日かかけて準備しました。忙しいときこそ、仕事と家庭と趣味を。

ソースコードや実際にWebブラウザ上で動作するデモはこちらのサイトからどうぞ。



Trackback(0)

2013-7-27

ゲーム作りで冒険! 「遊んで作るスマホゲームプログラミング」

長ーい執筆期間を経て、ようやく本が完成しました。

遊んで作るスマホゲームプログラミング for Android」というタイトルの本で、ゲーム作りを楽しく学べる冒険の手引きです。「for Android」とあるとおり、Androidネイティブアプリを作ります……なのですが、iOSでも動くHTML5ゲーム、PCで動くゲームやツール、さらにはKinectまで扱うという、脱線っぷり。

本日、秀和システムから発売です。

Amazonの書籍ページを見る

ただオンライン書店のステータスが「取扱いしていません」に変わってるところも多いようなので、再入荷に少し時間がかるのかも。 また注文できるようになったようです。あと、もし奇遇にも実際の書店に並んでたら、パラパラめくっていただけると嬉しいです。

開発環境にはProcessingを使っていて、ソースコードも短めなので、気楽にゲーム作りをしたり、改造したりできます。巻末にはプログラミング入門的なオマケ付き。

書籍とサンプルゲームの紹介動画はこちら!

これまでこのホームページでもProcessingのプログラムを公開してきましたが、実はこの本のためでもありました。そう――そんなに前からこの本を書いていたのです。でも、ホームページで公開したおかげで、アドバイスをいただいたり、Processing界隈の知り合いができたり、理解も進んで、読者の方に伝える内容をよりよくできたのではないかと思っています。

ここで公開していないプログラムも本書には収録しています。公開しているものも、バグを修正したり、機能を発展させたり、Processing 2.0やAndroid、HTML5対応したりといろいろ変わっています。そして、ホームページにはあまりなかった解説的なものも、本書にはあります。

プログラミング以外に、ゲームのアイデアの発想、企画作り、データ制作、ストア申請、プロモーションなど、ゲーム作り全体を「楽しく作る」をコンセプトに書きました。

詳しくは特設サイトのEYLN -ゲーム作りの冒険-をご覧ください。ページの雰囲気が分かる写真や、動作環境、小話などもこちら。

この本を読んで誰かがわくわくしてくれたり、何か少しでも役に立てていたらいいなと思います。

本を書く間、「時間の使い方」「ノマド」「楽しいゲーム作り」「原稿を書くツール」「出版までの流れ」など、色々と気付いたこともあって、そういうことも共有すると楽しそう&何かの役に立てそうなので、またちょこちょことそのあたりの話をするかも。



Trackback(0)

2013-4-12

Processing.jsの画像の透過処理を高速化

いつもTwitterのつぶやきを拝見させていただいている@clockmakerさんがHTML5のグラフィック系JavaScriptライブラリのパフォーマンス検証をされていて、興味深いです。

HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証

しかし、Processing.js(ProcessingのJavaScript版)がやけに遅いのが気になりました。tint()を使わなければ速いようです。

たぶん、ライブラリ側で正直な実装をしているせいなんだろうな…と思いながら、processing.jsのソース見てみるとピクセル単位で色を合成していることが分かりました。tint()は画像を好きな色にフィルタリングできるので、先にそういう画像を作ってからdrawImageしている、と。HTML5のCanvasにはglobalAlphaなるものがあるようなので、透明度だけを変えているときにはこれを使うようにハックしてみると――

6fps→24fpsと4倍ぐらい高速になりました。

ライブラリのソースはここに置いてありますので、ご自由にお使いください。

# あとProcessingも初期化時に指定すればWebGL使えるはずですが、パフォーマンスは謎です。



Trackback(0)

Cafe Diary ログに戻る