PRODUCTION NOTE スタート
エスキース
- 「インターネットのブラウザで閲覧できる形式で記述された、21世紀の横浜・元町商店街への提案」という課題を受けてスタディを開始。関連ウェブサイト等による資料収集と現地調査を行う。
コンテンツ
- コンセプト・ワーク「元町商店街を空間的に再現したバーチャル・モールのようなものではなく、抽象的で双方向的な消費空間―通常のリジッドな建築空間では達成できない変幻自在な空間」
- 「情報そのもののビジュアライゼーション」
- 「情報の階層構造の破棄・平準化」
- 「テューブとセル」のイメージを検討。スケッチ作成。
- セルの基本的な情報コンテンツ、操作のイベントやアクションを検討。初期画面バーストイメージ。(見送り)
- 形状確認のためスタディモデリング。（formZ）
モデリング
- 「商店」「商品」「人」「一般」を基本的な情報コンテンツとすることに決定。セルの画像およびセルに対応するHTMLファイルの作成準備。
- 元町商店街で写真撮影および商品パンフレット等の入手。商品イメージの使用許可願い。
- セルの作成(合計296種類）。 50×100pixelのPNGファイルにアルファを設定。画像は全て反転。(Photoshop)
- HTMLファイルの作成(合計234種類)。 (NetscapeComposer)
プログラミング （VRML＋JavaScript）
- VRML空間内に表示する地図をモデリング（formZ）
- テューブのモデリング開始。直径と長さの関係をスタディし、24角形×20列（＝480セル）に決定。それぞれのセルにPNGの画像をマッピング。（formZ）
- 完成したデータをVRML2.0形式で書き出し。（formZ）
プレセンテーション
- VRMLのスクリプトノード内にJavaScriptで実装。
- すべてのセルが、タッチセンサおよびプロキシミティセンサを保持。
- 全てのセルが自身のプロパティのコピーを別の場所に保存。
- クリック：セルがクリックのイベントを検知するとブックマークの配列に格納されて、同時にセルのプロキシミティセンサがONになって常に画面手前側に表示されるようになる。ブックマーク上のセルをクリックすると、そのセルのプロパティのコピーを参照し、テューブ上の元の位置に戻る。
- ブックマークの配列は独自にプログラムされたマネージャをもっていて、あるセルがテューブに戻ったとき、残りのセルが空席部分に再配列されるように管理されている。
- オンマウスオーバ：セルがオンマウスオーバのイベントを検知すると、1)自身に関連付けられたHTMLファイルを別フレームに表示、2)地図の該当個所を強調表示、3)自身の透明度を0.5から1.0に変化させる。(点灯）(Mule for WIN32 : text editor)
- 元町商店街の認識レベルのダイアグラムをモデリング・レンダリング。(Lattice Designer)
- HTMLファイルにwrlをEmbedし、完成。
//////////////////////////////////////////////////////////
//// セルをクリックする際に呼ばれる関数 ////
//// チューブとブックマーク間のセルの移動、 ////
//// セルに対応する地図の強調表示、を行い、 ////
//// それらの情報をブックマークマネージャに伝える。////
//////////////////////////////////////////////////////////
function Move_0101(){
if(frag0101 == 0){ // if cell is NOT bookmarked
m0101.transparency = 0;
SetBmXForm(cel0101, cel0101in);
SetBmCoord(coord0101,texcoord0101);
prox0101.enabled = TRUE;
frag0101 = 1;
bmNum = bmNum + 1;arrayNum = arrayNum + 1;
nodeArray[arrayNum] = 'ob0101';
lastObj = 'ob0101';
}else{ // if cell is bookmarked
prox0101.enabled = FALSE;
m0101.transparency = 0.5;
Reverse();
frag0101 = 0;
bmNum = bmNum - 1;ShiftBookmark('ob0101');
}
}//////////////////////////////////////////////////////////
//// セルのOnMouseOverイベントにより呼ばれる関数 ////
//// セルにリンクされたHTMLファイルの表示、 ////
//// セルに対応する地図の強調表示、を行う。 ////
//////////////////////////////////////////////////////////
function OnMouse_0101(frag){
if(frag){ // OnMouseOver In
m0101.transparency = 0;
Browser.loadURL(new MFString('../information/info-shops/html/1a/1a13-MOTOMACHI_SSA.htm'), new MFString('target=html'));
mat_1a13.diffuseColor = red;
ScaleUpMap(coord_1a13.point);
}else{ // OnMouseOver Out
m0101.transparency = 0.5;
mat_1a13.diffuseColor = yellow;
ScaleDownMap(coord_1a13.point);
}
}