• Processing アニメーションプログラミング入門

  • 240ページ 単行本（ソフトカバー） ISBN: 477414715X / 978-4774147154
  • 著者: 田中孝太郎
  • 出版社: 技術評論社
  • 価格: ￥ 3,360
  • Amazonの情報
  • 技術評論社の情報（目次、ページサンプルがあります）
  • Facebookページ
    

Processingの入門書というどうにも狭いジャンルで同じ著者がなんさつも本を出すのにはわりと抵抗感があったのですが、編集さんからのすすめもあり、BwPではできなかったことをふくめ、スタンスや打ち出しを変えた別のかたちの入門書にできないかなというのが個人的なチャレンジでした。具体的には、つぎのような方針を立てました。

• CD-ROMにサンプルプログラムを付属し、未完成のひな形プログラムを読者が修正・追加してサンプルを完成させながらプログラムを学んでいくレッスン形式の構成にする（これは編集さんのオファー）
• 本の最後の段階で、あるていどの規模からなる完結した（「作品」と呼べるくらいの）プログラム作品が完成する
• 各ステップでのサンプルプログラムは、最終的にできあがるプログラム作品の途中段階としてそれぞれで完結したプログラムにする
• プログラムの説明をするためだけの便宜的な章やサンプルプログラムを〔極力）用意せず、すべてのサンプルや解説を最終的なプログラム作品の部分として機能するものとして構成する
• オブジェクト指向を実践的に盛り込んだ内容にする
• 個性的なイラストレーターを起用して、本文図版やサンプルプログラムの素材をたくさん用意して楽しい紙面にする

みたいな感じです。

ゲームプログラム本などではサンプルのゲーム作品をひな形サンプルから完成させていくような内容の入門書がよくありますけども、だいたいは序盤でプログラムの座学をへて、（それとは分離された）実践編にうつる感じの構成のものが多いみたいでした（ちがうのもあったらすいません。教えてください）。そうじゃなくて、「ゼロからプログラムを学びつつサンプルを打ち込んでいると、いつのまにか作品が完成する」みたいな本ができないかなーというのが考えていたところでした。いやそれはさすがにムリなんですけども、ひとつのパターンとしてゼロからはじめてあるていどの規模のプログラム作品を完成させるプロセスが疑似体験できるような内容にはできたかなと思っています。

で、どんな感じのサンプルを作る本かというと、こんな感じです。

• 完成プログラム作品（java applet) – java appletに書き出しているため、OSや環境によっては重かったりするかもしれません

ご覧いただいて明らかなとおりで、今回はサンプルプログラムのキャラクターデザインや本文図版制作などを土壁綾さんに全面的にご協力いただきました。　土壁さんの不思議ビビッドイラストがサンプルや本文に満載なのでこれだけでも新鮮で楽しい本になっております。内容的にもBwPではあまり盛り込めなかった図解を多くしてとっつきやすくしたつもりです。

冒頭の方針を満たすステップの構成とサンプルの内容のすり合わせがかなり大変で、サンプルを修正するとその後のすべてのサンプルに影響するあたりが地獄だったりして（震災の影響も多少あり）、当初去年の夏に出すはずが一年遅れてしまいましたがようやく刊行にたどりつきました。書店でぜひ手にとってみてください！

あと今回実験的にFacebookページを設置してみたので情報共有や質問などにお使いくださいませ（本内の誤記や不具合がもしあったらこちらにお知らせください）。

• 『Processing アニメーションプログラミング入門』Facebookページ

■9月末から10月にかけて、女子美の一年生後期授業「コンピュータ実習B」を担当しておりました。学生は2組80名超、週4日なんで講師も4人2日づつというハードな授業が先日なんとか終了したところですが、この授業のなかで、現在BCCKSがクローズドベータで運営しているオンデマンド出版サービス「bccksBunko（ブックス文庫）」を使った作品集を使う課題をしましたのでせっかくなのでレポートしておきます。

ブックス文庫についてはサイトのほうを見てもらえればわかりますが、「文庫サイズモノクロ48ページ、1冊525円から出版可能！！」という、いわゆってしまえばいわゆるオンデマンド出版サービスですね。電書だ自炊だとやたらと「紙の本」がおとしめられがちな世の中ではありますが、BCCKSの場合は「もともとオンラインでコンテンツをつくれるサービスだったのに、いまから紙をはじめる」という、時流の逆行ぶりがただごとではないサービスとして提供されようとしているわけです。ちなみにクローズドベータは第一期モニターが受付完了していて、今後も時期をみて増員されたりするみたいです。今回はBCCKSさんに授業課題での使用をご理解いただいて特別にモニター参加させていただいています。

ブックス文庫むけの課題としては今回、学生全員に「Looking Into a Drawing」というタイトルで、「ある風景の写真と、その風景の一部をその場でドローイングしてその絵と風景がつながるようにかざしながら撮った写真とを並べる」というルールの写真を制作してもらいました。これは講師の一人である西本太郎さんがアイデアとして紹介してくれたflickrグループの「Looking Into the Past」（昔の写真と同じ地点で撮った写真を公開するグループ）をアレンジしたものです。学生には各自テーマを決めてこのルールの写真を連作してもらい、BCCKSの本として編集してもらってもいますが、ブックス文庫には各自そのなかから1枚づつ提出してもらって、それぞれを見開き裁ち落としのレイアウトで配置した写真集になっております。BCCKS側での編集、出版の作業は助手やら講師やらでおこない、バグに遭遇したりしてバタバタしつつも10/10に出版完了し、10/16には無事に届いて10/18の授業最終日に学生に配布することができました。ちなみに今回160pまでのプランでカラー/カバーありで95冊発注したので、1冊1,922円になりました。

オンラインのブックはこちらで見られます。出版したブックはそのまま販売もできるんですが、授業の本は印税が誰に入るべきか微妙なんで販売はしておりません。

実際に使ってみて、こうした授業だとかワークショップのたぐいなどで、ブックス文庫をアウトプットにするのはかなり使えるんではないかなーと思いました。ブックス文庫の印刷や製本、レイアウトの「本物の本」感については天然文庫を購入するなりして実際に手で確かめてみていただきたいですけど、たとえば１日くらいでBCCKSで作成したポートフォリオやプロジェクトドキュメントが、１週間そこそこ後にこの形ででてくるというスピード感までふくめたコストパフォーマンスは驚異的だなと。授業を構成するうえで課題の最終的な落としどころというのは結構迷ったり困ったりするものなのですが（やりすぎると授業時間内に終わらずそのために出校したりとか大変だったりする…）、その意味でブックス文庫のまとめやすさと仕上がりの充実感はすばらしいものがあります。そのあたりお悩みのかたがいたら検討してみたらいかがでしょうか。

ちなみに今（というか今日まで）開催中の女子美祭の授業課題展示にて、このブックス文庫も展示されているのでお寄りのさいはお手に取ってみてくださいませ。

■　デザインハック・ミーティングVol.2 「第2回おばかアプリ選手権」にて発表したアプリです。スクリーンセーバとしてこれまでのデスクトップ作業を巻き戻すムービーを流すことで「ぼーっとしていると時間が戻って作業が無になる」感覚を得られる（かもしれない）アプリです。

• 「第2回おばかアプリ選手権」　優勝しました！
  • http://collisions.doppac.cc/?p=245

これは

■MacOSXデスクトップスクリーンショットを定期的に記録するムービーを記録し、一定時間操作しない状態がつづくと保存されたデスクトップ画像を全画面ウインドウで逆転再生します。手を止めていると、そのままの画面でこれまでしてきた作業が元に戻っていくように見えるため、手を止めることへの焦燥感や、全てが無に帰すような無常観を得られるかもしれません。

デモムービーで動作をご覧ください。

“Time stall” Timemachine screensaver prototype app from dotimpact on Vimeo.

使ってみたい

BehindStone同様、バグ修正やアイコン登録などトリートメントが終わったら公開したいと思います。まだ実際にスクリーンセーバとして開発されてないですし。

■　デザインハック・ミーティングVol.2 「第2回おばかアプリ選手権」にて発表したアプリです。MacOSXデスクトップを「生きている」ように動かし、デスクトップに散らかったアイコンが片付く（ように見えなくもない）アプリです。

• 「第2回おばかアプリ選手権」　優勝しました！
  • http://collisions.doppac.cc/?p=245

これは

■　デスクトップアイコンが虫のようにデスクトップで動きまわり、ウインドウの下に隠れます。ウインドウを動かすと、その下に隠れていたアイコンがわらわらと動き始めます。

現状ではダミーのアイコン画像をフルスクリーンのデスクトップ画像上で動かしているのみのため、このアプリを起動したままデスクトップ操作を行うことはできません。ジョークアプリのたぐいとお考えください。

デモムービーで動作をご覧ください。

• 作成したムービーの問題(?)のため実際の速度のよりも早く表示されているみたいです。あとで修正しますー

“Behind Stone” Living desktop concept app from dotimpact on Vimeo.

使ってみたい

おばかアプリ選手権での発表後も何人かの方から「ぜひ使ってみたいので公開してください」というお話をいただいたんですけど、現状まだアプリとして公開できる状態にないので（はじめてのCocoaアプリだったのでメモリリークしまくりです）、バグ修正やアイコン登録などトリートメントが終わったら公開したいと思います。

それと本来はこの状態でOSとして使用できる状態にしたいと思っていたので、本物のデスクトップアイコンを動かせるものかなど、アプリの挙動が技術的に可能なのかを検証して、もし可能なら完全版としてまた公開したいですねー。

とりあえず以下を修正しました。

• レシピ詳細ページ
  • コツ・ポイントを表示するようにした
  • つくれぽの数を表示するようにした
  • 手順リストに番号を振り、不要な欄は表示しないようにした

■ちなみにこのブログ関連の情報をアナウンスしたり受け付けたりするtwitterアカウントを作ってみました。なんかありましたらお気軽にどうぞです（ご期待に添えるとも限りませんけども）。

• http://twitter.com/doppac_cc

あとgithubにてソース一式も公開しております。

• http://github.com/dotimpact/iCookpad/tree/master

ものすごい盛況でイベント自体もすごい面白かったですね。人のプログラミングの様子を見る45分ってどんな時間になるのかなーと若干不安に感じていたんですが、始まってみると思った以上に興味深くてあっという間だったです。プログラムなんてさっぱり、という感じの友人（女子）も何人か来ていたんですけども、そういう人から見ても噂には聞いていたプログラムなるものが実際に目の前でかなりのスピードで打ち込まれていくのは新鮮な体験だったみたいでした。あとASゴングのみなさま（とくに小坂さんのDirector使いっぷり＆饒舌っぷり！）も4nchor5 la6のトークもすごすぎでした。

いっぽう自分のデモはなんとも残念な感じで公開しきりでしたが…　ともかくこのイベントにむけて作ってみたものをこちらでも公開しておきます。YouTubeのストリーミング動画を物理シミュレーションで落下させて映像と音声をミックスするというコンセプトのコンテンツ「TubeObstruction」です。

• http://work.doppac.cc/as3/TubeObstruction/index.html
  • FireFox, Safariにて動作確認してます
  • ※FireFoxだと動かないこともあるみたいで、確認中です

TubeObstruction Demo from dotimpact on Vimeo.

これは

■Box2DFlashAS3の物理シミュレーションオブジェクトとしてYouTubeからダウンロードする動画を表示して、動画同士を衝突させて映像や音をミックスして遊ぶコンテンツです。動画のボールは壁や別のボールとの衝突による衝撃が起きた際だけ力の強さに応じて再生されます。

操作方法

• 入力フィールド（画面上段）
  • 検索ワードを入力してリターンすると、YouTubeでの検索結果から動画をダウンロードして、円形のオブジェクトとして落下します。
  • “＜検索ワード＞,3″のようにカンマ区切りで数字を指定すると、落ちる個数を指定できます
  • 検索ワードの代わりにYouTubeの動画パーマリンクを入力することで、特定の動画を指定できます
• スライダーパネル
  • 入力フィールドにマウスオーバーすることでスライダーパネルがスライドします
  • スライダーはマウスを載せてマウスホイール（スクロール操作）をすることで値の増減を操作します
  • TimeStep: 物理シミュレーションの時間単位を変えます。増やすことで時間単位が細かく（＝動きがスローに）なります
  • Gravity: 重力の値を変えます。増やすことで重力が強くなります
  • Density: オブジェクトの密度の値を変えます。増やすことで重量が増し、慣性が強くなるため衝突の衝撃が強くなります
  • Restitution: 衝突時の力の減衰を変えます。最大だと完全反射ですが減らすと衝突するたびに力が弱くなります
  • Friction: 摩擦力を変えます。増やすと衝突時に回転がつきやすいです
  • Impulse_Decay: 衝突時の動画再生の減衰を変えます。増やすと減衰が緩くなるので、再生される時間が長くなります
  • Play_Vibrate: 衝突時の動画再生を一定期間ごとに止めて擬似的なスローモーションをかけます。数値を小さくすると一時停止の間隔が速くなり、スローになります
  • Volume_Fade: 衝突時の動画再生のボリュームの減衰を変えます。減らすと速くフェードアウトします
• 動画ボールオブジェクト
  • 衝突時の衝撃の強さにより、動画が再生されます
  • ボールをドラッグして好きな場所に移動できます
  • マウスがボールの上にある時（ドラッグ中）にマウスホイール（スクロール操作）をすることでボールの大きさが変わります
  • ボールが大きいとボリュームが大きくなります
  • 動画の再生が進むと徐々にボールが大きくなり、再生が終了するとボールは消えます
  • ※動画ストリームの問題により、再生されないまま消滅する場合もあります
• ウインドウ
  • ウインドウのサイズを変えることで、オブジェクトが飛び回るフィールドを広げることができます
  • ウインドウを画面内でドラッグして移動させると、ドラッグ距離に応じてすべてのボールに力を与える（画面を揺らす）ことができます
  • フィールドは上部の見えないところで上端が切れているので、ボールを上に大きく飛ばすと戻ってこないことがあります。

ボールが増えれば増えるほど音像としては混沌になってしまうので、多少練習してデモではもうちょっとうまく「演奏」できるかなと思っていたんですが、前のデモの流れから説明中心のデモにしてしまったんでいまいちだったかなと。みなさまにも触ってみていただけるとうれしいです。

■http://realtimemachine.sakura.ne.jp/mashup/tokyoheightmap/

■Sun×RECRUITマッシュアップアワード応募作品です。

桃鉄ネタにつづく、GoogleMaps×ゲームインターフェイスのマッシュアップ（？）でもあります。

これはなにか

■Smatch物件検索APIで取得した物件情報を、価格を「高さ」で表しながらGoogleMapsにマッピングします。東京周辺の地価情報がグラフィカルに一望できます。

詳しくは解説ページを見てください。

つーか内部的にはたたみラボのサンプルをほとんどそのままなんですけど。あんま時間かけてなくてすいません。でも、あんまやられてないけどGoogleMapsのマーカーアイコンの切り替えをうまくすると、けっこういろんなことできるんじゃないかなーと思いまして。

GoogleMaps×スプライト

■あとGoogleMapsのマーカーをスプライト的に動かしたかったので（今回でいうと雲ですね）、APIv2でどうするか調べました。

v1のときはABAさんがやってたみたいにGMarker.point.x/yを触ってGMarker.redraw(true)、とかだったんですが、このへんががらっと変わってます。Gmarker.setpoint(latlng)というメソッド（非公開）がありました。実際のとこ、内部的には今までと変わらないみたい。ちゃんと表示順位をいじってくれるし、影も管理してくれるんで、けっこうスプライトとしてうれしいですよね。重いけど。

APIv2の非公開命令については、Unofficial API 2 Referencehttpがくわしいです。

■2年前にオープンキャンパスの子供向けワークショップで使うために作っていた「iOdorokiban」というソフトがあるんですが、また使いたいとのことで、ProcessingBETAで動くよう修正したので、公開しておきます。

久しぶりに遊んでみたけど、いまでもけっこう楽しい。

• iOdorokiban for ProcessingBeta
  • http://processing.dotimpac.to/?sample%2FProcessing%2FiOdorokiban
• iOdorokibanと映像ワークショップ
  • http://collisions.dotimpac.to/project/iOdorokiban.html

実行形式アーカイブ

■せっかく実行形式でのexportをProcessingがサポートしてるので、バイナリでも置いておきます。

• iOdorokibanアプリケーション（Windows/MacOSX/Linux)
  • http://processing.dotimpac.to/sketchbook/iOdorokiban/iOdorokiban_app.zip
  • 実行にはUSBカメラ（MacならDVカメラでも）が必要です。

Windowsでの使用方法

WinVDIG（USBカメラをQuickTime(forJava)で制御出来るようにするソフト）をインストールする必要があります。

• iOdorokibanをダウンロードして展開します。
• WinVDIG Release NotesからWinVDIG ver 1.0.1をダウンロードしてインストールしてください。
  • WinVDIGは1.0.5が最新ですが、不具合があり、前バージョンでないと正常に動作しません
• 展開フォルダの”application.windows”内にある”iOdorokiban.exe”を実行してください。
• ウインドウが出て、カメラの画像が動いていれば正常に動作しています。

MacOSXでの使用方法

Macでは特にソフトのインストールなしに、使用できると思います（が、未確認です。キャプチャデバイスの選択でこける可能性大なので、できなかったら教えてください）

• iOdorokibanをダウンロードして展開します。
• 展開フォルダの”application.windows”内にある”iOdorokiban.app”を実行してください。
• ウインドウが出て、カメラの画像が動いていれば正常に動作しています。

動かない場合の注意点

• QuickTime7.1 + WinVDIG1.0.1の環境でのみ動作確認してます。QuickTimeのバージョンなど確認してください。
• キャプチャデバイスの選択でさぼっています。デバイス名に”cam”/”CAM”が含まれるものを探すので、接続したデバイスによっては失敗します。その場合は、ソースにデバイス名直接描いて、Processingで実行するとうまくいくかもしれません。

あそびかた

ビデオ画像で驚き盤をつくります。

キーボード、マウスボタンで操作します。

• スペースキー：映像を撮影し、コマを進めます。
• バックスペースキー：前のコマを削除し、戻します。
• マウスボタン：押している間、驚き盤を回転させて動きを確認します
• pキー：画面をjpgで保存します。印刷すれば驚き盤になります。
• cキー：画面をクリアして、驚き盤を作り直します。
• !キー：デモモードです。自動的に撮影を繰り返して驚き盤風のアニメーションが表示されます。

■エイプリルフールエントリはなんかもっともらしいこと書いときゃいいだろ、と思って書いたらぜんぜんウソになってなかった。来年の4/1までにはもうちょっとウソがつけるようになっておかないと。

そんなわけで、「GoogleMaps上でサイコロが振れると桃太郎電鉄みたいでいいなー」というまえまえから暖めていたアイデアをあわてて作ってみたものです。

このページでダイスを振る

GoogleMaps上での使用例

bookmarkletとしても動作するようにしました。以下のスクリプトを任意のwebページを開いてアドレスバーかブックマークに登録しておいて実行すると、そのページでサイコロが転がります。

javascript:(function(){var d=document;var h=’http://realtimemachine.sakura.ne.jp/dice/js/’;var s=d.createElement(‘script’);s.src=h+’dice.js’;d.body.appendChild(s);var s=d.createElement(‘script’);s.src=h+’dicebm.js’;d.body.appendChild(s);})();

まあネタ以外のなにものでもないですが、桃鉄のあのゲーム画面にサイコロが転がる感じはいまだに好きなんで、なんかこういう感じがWebにもあるといいよなーと思っているところです。

■ RecommuniHacks の続きで、 Recommuniでダウンロードした曲にアートワークを追加 なんてのを作って遊んでいたんですが、これがけっこう楽しくてふつうの曲でもやりたくなったので、Amazonから（アーティスト名とアルバム名で該当すれば）アートワークを追加できるスクリプトを書きました。

blog.bulknews.net で宮川さんがつくってた「 iTunes のアートワークを Amazon Web Services からとってくる 」とおんなじですが、まあActivePerlとモジュールがインストールされてなくても使える、というのが利点かなと。AWSのディベロッパトークン（というのですか）は必要です。 Amazon Web サービス登録ページ で登録すればもらえます。ぼくもさっきもらいました。

だいたいもともとCDDBのアーティスト名／アルバム名だろうからAmazonで引っかからないのも多いし、てきとうに書いてるのでうまくいかないかもしれませんが、とりあえず。

• http://processing.dotimpac.to/index.php?sample%2FJavaScript%2FAddArtworkfromAmazon