inClip..『Hands On -Prototyping Prototypes』展

2009年9月19日

今回の「inClip」の仕様

  • アプリケーション・アイコン・プレート
    黒枠のアイコン・プレートで、コンピュータ上のアプリケーションに対応している。デバイスではさむことでの起動と、離すことによる終了を行う。アプリケーション・ランチャー
  • ファイル・アイコン・プレート
    枠なしの透明なアイコン・プレートで、コンピュータ上のファイルひとつひとつに対応している。デバイスではさむことでファイルの内容に応じてアプリケーションを起動して、コンテンツを表示・再生する。デバイスをプレートから離すとファイルは閉じられる。

想定した使用例

  • アプリケーション・アイコン・プレート on Desk (OR, in Room)
    アプリケーション・アイコン・プレートに限らず、双方のプレートにねらったものだが、プレートはデスク上や部屋の棚などに置いたり並べたりして生活空間に配置されることを想定した。人が生活の中でその場所にあった(パソコンで扱ってきたような)コンテンツを扱えるようになる。
  • ファイル・アイコン・プレート with Binder
    ファイル・アイコン・プレートはB5変型のバインダーに収納できるようになっている。コンピュータ内にフォルダの階層構造によって管理していたデータファイルを、書類をファイリングするように物理的に整理でき、視覚的にデータファイルを確認できる。一枚のバインダーに12枚のプレートが収納。
  • ファイル・アイコン・プレート with Book
    ファイル・アイコン・プレートは4隅のうち1点だけをネジ止めしてあり、紙ならばプレートをはさみ止めておくことができる。書籍に関連する動画や、ウェブホームページのブックマークをプレートに登録し、しおりの様に本にはさんでおくことができる。こうすることで本というアナログメディアと動画やブックマークといったデジタルコンテンツを一緒に管理し、いままで通り本棚に本を並べることで、間接的にデータファイルを本棚に整理することができる。

展示中にいただいたコメントなどから

  • プレートの使い方として、キーボードにスロットがついていて、それにはめる。プレートが並ぶことでアプリケーションやファイルの状態を俯瞰でき、それらはタンジブルである。
  • アプリケーション・アイコン・プレートではなく、アプリケーション・アイコン・クリップとしたらどうか。そのクリップを使って、ディスプレイにはさんでいくことでアプリケーションが立ち上がり、状態を確認できる。また、ファイル・アイコン・プレートをはさむことで、そのファイルをクリップの対応したアプリケーションで開くなど。
  • カラフルなプレートを使っていることについて、視覚的に好印象を得られた。(化粧品のパレットのよう。きれい。ながめて楽しい。子供は色だけでファイルを識別できるかも。)
  • 同じファイル・アイコン・プレートでも、複数のクリップデバイスではさむことで、開くファイルや挙動が変わるとか。
  • デジタルデータをプレートに登録する方法。いかに簡単に登録ができるか。
  • ネットワークと繋がったシステムを考えてみては?
  • 出力装置をコンピュータの画面ではなく、フォトフレームやオーディオセットなどの他の機器で行えるようしたらどうか。
  • プレート以外のモノへの登録。
  • クリップデバイスとプレートをはさむ方向の不自然さ。説明なしでは使えないレベル。
  • クリップデバイススタンド(サイン灯)のサインを説明するボードかなにかしらが必要。

次回バージョンアップ

  • プレートへの登録機能を実装(AppleScriptによるドロップレットを使用)
    コンピュータのデスクトップ画面上に、ドロップレットを常駐させ、そのアイコンへ登録したいファイルをドロップする。そのときにクリップデバイスがはさんでいるプレートへ登録。
  • クリップデバイスの再設計
  • クリップデバイスの充電スタンドの制作

FMC2nd_p56_Blobs01

2009年6月21日
p56_Blobs01

p56_Blobs01


イメージからアプレットを起動

円が重なると円の外郭が一緒になる表現
FlashでのMovieClipにあたるオブジェクトをクラスで生成するのがポイント。これからこのような書き換えが基本的なメソッドになると思う。
Flashの方ではMovieClipのインスタンス名によってレイヤーが操作でき、白抜きのための円オブジェクト群を外郭にあたるオブジェクトより上の階層に位置するようにすれば、難しいことは無いサンプルプログラムでした。
Processingでは、フレーム毎にプログラムでは上から順に描画して行くのが一般で、先に描画されたものはそのあとに描画されるものによって上書きされてしまいます。
一つの円ごとに描画すると、外郭がひとつになるのではなく円が単に重なるようになってしまうので、まず、外郭となる円を描画してから、白抜きとなる円を描画するという順番になりました。
難しいと感じたポイントは、クラス設計でContainerとBallとEdgeという3つのクラスを用意したのですが、Containerにどんな役割を持たせるかが難しいところでした。

FMC2nd_p43_Lines16

2009年6月9日
p43_Lines16

p43_Lines16


イメージからアプレットを起動

Lines12をもとに、線が伸びていくときにアルファ値を設定
ただアルファ値を設定してあげるだけ。
見た目にもあまりおもしろくないので、Lines14の回転も加えた。こっちのがおもしろい。

FMC2nd_p43_Lines14

2009年6月9日
p43_Lines14

p43_Lines14


イメージからアプレットを起動

Lines13を元に、線が延びていく時に回転。
Lines13のメインはそのまま、再びLines.pde(クラス)の変更。

FMC2nd_p43_Lines13

2009年6月9日
p43_Lines13

p43_Lines13


イメージからアプレットを起動

Lines12を元に、線の描画を1本ずつ。
Lines12で変更したLines.pde(クラス)はそのままに、インスタンス化しているメインだけの変更。

FMC2nd_p42_LInes12

2009年6月9日
p42_Lines12

p42_Lines12


イメージからアプレットを起動

Lines11を元に、線が伸びる様子を一定にする。
Lines11では加速度的に線が延びていたが、その速度を一定に変更。
コードはLine.pde(クラス)のみ変更したので、そちらだけ記述することにする。

FMC2nd_p42_Lines11

2009年6月9日
p42_Lines11

p42_Lines11


イメージからアプレットを起動

Lines01を元に、線を伸びていくように描画
FlashのコードではMovieClip._xscale (_yscale)を使ったプロパティの変更だけでコードの書き替えは完了であったが、ProcessingではMovieClipオブジェクトから存在しないので、Lines05などで行ったLineのクラス作成とインスタンス化、さらにそれらに対して、scale()を使ってサイズの変更と、スケール変更に伴う座標位置の調整をpushMatrix()、popMatrix()とtranslate()で行った。
僕自身が座標の扱いに慣れていないため、書いてみれば簡素なコードに気づくまで時間がかかってしまった。
今回のポイントは、Line.pde内に集約されているといっても過言でないと思う。

FMC2nd_p41_Lines10

2009年6月6日
p41_Lines10

p41_Lines10


イメージからアプレットを起動

FMC2nd_p41_Lines09

2009年6月5日
p41_Lines09

p41_Lines09


イメージからアプレットを起動

描画され回転する画面と、それをマスクした表現。の再現
マスクの方法はp41_Lines08と同じです。
用意したマスク用外部ファイルはこちら。(真っ白画像。右クリックなどで「リンク先を別名で保存」などでダウンロードしてください。)
しかし、この方法ではrotate()を使って画面を回転させたとき、マスクとなる画像も含めすべて回ってしまうので、レイヤーとしてマスクの下にあるLineだけを回すには、他の処理が必要となった。
その方法は、Lineをオブジェクト化して一本一本にx,yの座標情報を持たせ、そのオブジェクト群の座標をrotate()で更新させていく。さらに一方で「見せかけマスク」となる画像を上書きするときには座標を戻して、常に同じ位置で描画するようpushMatrix()とpopMatrix()を使いました。

FMC2nd_p41_Lines08

2009年6月5日
p41_Lines08

p41_Lines08


イメージからアプレットを起動

マスクを利用した描画のサンプル。の再現。
実は、マスクと言っても今回は見せかけです。background()と同色の切り抜き画像を用意し、フレーム毎に描画されたものに画像を貼付けて、抜けているように見せているだけです。

最初は、コード内でマスクとなる画像を生成し、その画像をPImageのmask()を使ってマスクを実現しようとしましたが、それは断念しました。
理由は、コードでマスクとなる画像も生成しようとしたが、円形の画像保存ができず、すべて四角形になってしまう。(その方法がわからなかった。)
次に外部ファイルとして円形の画像を用意しmask()を使った方法を試みたが、 フレーム毎の処理がとても重く現実的でないので断念。mask()の処理は「同じサイズの二つの画像を用意し、マスクとする画像でもう片方の画像を切り抜く」といったもののようだが、今回の場合はline()で描画した画面を一度save()で画像出力し、その画像を読み込んでマスクされる画像とするという手順を試みたため、この手順がよくない原因だと思いました。
ということで最終的に、見せたくない部分を白く塗りつぶすという「見せかけマスク」の方法をとりました。
用意したマスク用外部ファイルはこちら。(といっても真っ白なのが表示されるだけですね。万が一使うようだったら右クリックなどで「リンク先を別名で保存」などでダウンロードしてください。)