【アルカディア】ネットの海を表現してみました

ケイスです。
土曜日といってもやらなきゃいけないことが沢山あるのですが、なかなか進まないため、現実逃避でトグサと二人していろいろやってしまいました。

今回は3D表示に挑戦。
もちろんJavaScriptのみでチャレンジです。

こんな感じのクラスを作って

var system3D = new function(){
this.display = new Object();
this.display.width = 1024;
this.display.height=1024;
this.display.center_x = 512;
this.display.center_y=428;
this.display.zoom = 10;
this.elements = new Array();
this.add = function(el){
this.elements.push(el);
};
this.draw = function(){
for(var i=0;i this.elements[i].display();
};

this.camera = new Object();
this.camera.x = 0;
this.camera.y = 0;
this.camera.z = 0;
this.camera.apply = function(){
this.draw();
};
};

//3Dイメージクラスのコンストラクタ
function Image3D(){
this.x=0;
this.y=0;
this.z="";
this.w=600;
this.hw=300;
this.h=600;
this.hh=300;
this.img='undefined';
this.load = function(el,url){
this.img = document.createElement("img");
this.img.style.position = "absolute";
this.img.src = url;
el.appendChild(this.img);
system3D.add(this);
};
this.display = function(){
if(this.z- system3D.camera.z > 0 ){
var mag = system3D.display.zoom / (this.z - system3D.camera.z);
this.img.style.left = ( this.x-this.hw- system3D.camera.x ) * mag
+ system3D.display.center_x ;
this.img.style.top = ( this.y-this.hh - system3D.camera.y ) * mag
+ system3D.display.center_y;
this.img.style.width = this.w * mag ;
this.img.style.height = this.w * mag ;
this.img.style.zIndex = 1000000-this.z;
this.img.style.display = "block";

}else{
this.z += 300;
this.img.style.zIndex = 1000000-this.z;
}
};
};


こんな風に使います

var testImg = new Image3D();
testImg.load($('placeholder'),'http://hogehoge');
testImg.x = 100;
testImg.y = 0;
testImg.z = 10+i*2;
testImg.display();


こんなにシンプルでもちゃんと動作するのがJavaScriptの面白いところです。
まさに富豪的プログラミング

WindowsマシンのPentiumD 2GHzでテストしたらサクサク動きました。
まだFirefoxとSafariでしか動かないんですけどね。

今回はお遊びということで、実用性を無視してサイトを3D空間上にちりばめて、"ネットの海"を航海しているというイメージにしてみました。背景とかモロ宇宙だし。これはLeopardに搭載される"タイムマシン"機能へのオマージュです。

さて、このあとどうするか
僕もいろいろアイデアがあるのですが、なにか面白いことを思いついたらどしどしメール下さい
近々「インターネット探索」をテーマに番組を作る予定です