Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
359 lines (327 sloc) 11.3 KB
<!doctype HTML>
<html>
<head>
<style type="text/css">
html {
width: 100%;
height: 100%;
overflow: hidden;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(6,27,77)),
color-stop(0.2, rgb(6,27,57)),
color-stop(0.55, rgb(10,14,14)),
color-stop(1, rgb(20,20,25))
);
background: -moz-linear-gradient(
center bottom,
rgb(6,92,158) 0%,
rgb(6,37,87) 20%,
rgb(0,4,10) 55%,
rgb(27,30,36) 100%
);
background: #def;
}
</style>
<script src="matrix.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script src="color_utils.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script type="text/javascript">
CSS = {
mat4ToCSSMatrix : function(mat, dst) {
dst.m11 = mat[0];
dst.m12 = mat[1];
dst.m13 = mat[2];
dst.m14 = mat[3];
dst.m21 = mat[4];
dst.m22 = mat[5];
dst.m23 = mat[6];
dst.m24 = mat[7];
dst.m31 = mat[8];
dst.m32 = mat[9];
dst.m33 = mat[10];
dst.m34 = mat[11];
dst.m41 = mat[12];
dst.m42 = mat[13];
dst.m43 = mat[14];
dst.m44 = mat[15];
return dst;
},
setPerspective : function(p) {
this.style.webkitPerspective = p;
},
setOrigin : function(x, y) {
this.style.webkitTransformOrigin = x + ' ' + y;
},
setTransform : function(matrix) {
this.style.webkitTransformStyle = 'preserve-3d';
if (!this.cssMatrix)
this.cssMatrix = new WebKitCSSMatrix();
this.style.webkitTransform = this.mat4ToCSSMatrix(matrix, this.cssMatrix);
this.matrix = matrix;
},
setSz : function(w, h) {
this.style.width = w + 'px';
this.style.height = h + 'px';
},
setMinSz : function(w, h) {
this.style.minWidth = w + 'px';
this.style.minHeight = h + 'px';
},
setBg : function(color) {
if (typeof color == 'string')
this.style.background = color;
else
this.style.background = ColorUtils.colorToStyle(color);
},
setColor : function(color) {
if (typeof color == 'string')
this.style.color = color;
else
this.style.color = ColorUtils.colorToStyle(color);
},
setFont : function(font) {
this.style.font = font;
},
setAlign : function(align) {
this.style.textAlign = align;
},
setMargin : function(top, right, bottom, left) {
this.style.margin = [top, right, bottom, left].join(' ');
},
setPadding : function(top, right, bottom, left) {
this.style.padding = [top, right, bottom, left].join(' ');
}
};
D3 = function(){
var div = DIV.apply(null, arguments);
div.style.position = 'absolute';
div.style.left = div.style.top = '0px';
Object.extend(div, CSS);
return div;
};
makeWall = function(rot) {
var wall1 = D3();
wall1.setSz(400, 200);
wall1.setBg([0,0,0,0.5]);
var m = mat4.identity();
mat4.rotateY(m, rot);
mat4.translate(m, vec3.create(0, 0, -200));
wall1.setTransform(m);
return wall1;
};
makeRoom = function(x, y, z, angle, id) {
var room = D3();
var m = mat4();
mat4.translate(m, vec3(x,y,z));
mat4.rotateY(m, angle);
mat4.translate(m, vec3(400, -100, 0));
room.setTransform(m);
room.angle = angle;
var corner = D3(id.toString());
corner.style.borderBottomRightRadius = '10px';
corner.setFont('24px Futura,sans-serif bold');
corner.style.whiteSpace = 'nowrap';
corner.setPadding('0px', '5px', '0px', '5px');
corner.setColor('white');
corner.setMinSz(50,50);
corner.setBg('#f00');
room.append(corner);
room.object = D3();
room.object.setSz(80,160);
room.object.setTransform(mat4.translate(mat4(), vec3(160, 30, 0)));
room.object.baseTransform = mat4(room.object.matrix);
room.object.setBg([0,0,0,0.5]);
room.append(room.object);
room.object.lightUp = function() {
if (this.lit) return;
this.lit = true;
this.setBg([1,0,0,1]);
};
room.object.lightDown = function() {
if (!this.lit) return;
this.lit = !true;
this.setBg([0,0,0,0.5]);
};
var floor = D3();
floor.setSz(399.5, 399.5);
floor.setBg('#30efff');
floor.setTransform(mat4.rotateX(mat4(), Math.PI/2));
room.append(
floor,
makeWall(0),
makeWall(Math.PI*0.5),
makeWall(Math.PI),
makeWall(Math.PI*1.5)
);
room.door = room.childNodes[room.childNodes.length-2];
room.door.open = false;
room.door.baseTransform = mat4(room.door.matrix);
room.door.currentAngle = 0;
room.door.targetAngle = 0;
room.lit = false;
room.toggleOpen = function() {
this.door.open = !this.door.open;
if (this.door.open) {
this.door.targetAngle = Math.PI/2+0.5;
} else {
this.door.targetAngle = 0;
}
};
room.lightUp = function() {
if (this.lit) return;
this.lit = true;
var cc = toArray(this.childNodes);
var walls = cc.slice(-3);
for (var i=0; i<walls.length; i++) {
walls[i].setBg([0,1,1,0.5]);
}
};
room.lightDown = function() {
if (!this.lit) return;
this.lit = !true;
var cc = toArray(this.childNodes);
var walls = cc.slice(-4);
for (var i=0; i<walls.length; i++) {
walls[i].setBg([0,0,0,0.5]);
}
};
room.ontick = function() {
this.door.currentAngle += (this.door.targetAngle-this.door.currentAngle) * 0.1
var t = mat4.translate(
mat4.rotateX(
mat4.translate(this.door.baseTransform, vec3(0, 100, 0), this.door.matrix),
this.door.currentAngle
), vec3(0, -100, 0)
);
this.door.setTransform(t);
if (this.door.open) {
this.object.setTransform(
mat4.rotateY(this.object.matrix, 0.02)
);
this.object.lightUp();
} else {
this.object.lightDown();
}
};
return room;
};
window.addEventListener('load', function(){
var world = D3();
world.setTransform(mat4());
world.setSz(window.innerWidth, window.innerHeight);
world.setOrigin(window.innerWidth/2,window.innerHeight/2);
world.setPerspective(1000);
document.body.appendChild(world);
var camera = D3();
camera.setTransform(mat4());
camera.position = vec3(0,0,10000);
camera.lookAt = vec3(0, 0, 0);
world.append(camera);
var id = 0;
var rooms = [];
for (var i=0; i<5; i++)
for (var j=0; j<10; j++) {
var y = -3000+i*300;
var r = 600*10 / (2*Math.PI);
var angle = j/10*Math.PI*2;
var roomObject = makeRoom(Math.sin(angle)*r, y, Math.cos(angle)*r, angle, id);
var v = vec3(Math.sin(angle)*r, y-window.innerHeight/2, Math.cos(angle)*r);
v.angle = angle;
v.roomObject = roomObject;
rooms[id] = v;
camera.append(roomObject);
id++;
}
var currentRoomNumber = 0;
var zoomIn = true;
window.addEventListener('keydown', function(ev) {
if (Key.match(ev, Key.DOWN)) {
if (Math.floor(currentRoomNumber / 10) == 9) {
currentRoomNumber -= 90;
} else {
currentRoomNumber += 10;
}
} else if (Key.match(ev, Key.UP)) {
if (Math.floor(currentRoomNumber / 10) == 0) {
currentRoomNumber += 90;
} else {
currentRoomNumber -= 10;
}
} else if (Key.match(ev, Key.LEFT)) {
if (currentRoomNumber % 10 == 0) {
currentRoomNumber += 9;
} else {
currentRoomNumber --;
}
} else if (Key.match(ev, Key.RIGHT)) {
if (currentRoomNumber % 10 == 9) {
currentRoomNumber -= 9;
} else {
currentRoomNumber ++;
}
} else if (Key.match(ev, Key.SPACE)) {
rooms[currentRoomNumber].roomObject.toggleOpen();
} else if (Key.match(ev, 'z')) {
zoomIn = !zoomIn;
}
currentRoomNumber = currentRoomNumber % rooms.length;
if (currentRoomNumber < 0)
currentRoomNumber += rooms.length;
}, false);
var stats = new Stats();
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
var tick = function() {
stats.update();
var t = new Date().getTime();
for (var i=0; i<rooms.length; i++) {
if (i == currentRoomNumber) {
rooms[i].roomObject.lightUp();
} else {
rooms[i].roomObject.lightDown();
}
rooms[i].roomObject.ontick();
}
var r = rooms[currentRoomNumber];
var sa = Math.sin(r.angle);
var ca = Math.cos(r.angle);
var zf = zoomIn ? 1 : 0;
camera.lookAt[0] += (r[0]-camera.lookAt[0]) * 0.1;
camera.lookAt[1] += (r[1]-camera.lookAt[1]) * 0.1;
camera.lookAt[2] += (r[2]-camera.lookAt[2]) * 0.1;
camera.position[0] += (r[0]+zf*-250*-ca+sa*(6000-zf*5600)-camera.position[0]) * 0.15;
camera.position[1] += (r[1]-100-camera.position[1]) * 0.15;
camera.position[2] += (r[2]+zf*-250*sa+ca*(6000-zf*5600)-camera.position[2]) * 0.15;
mat4.lookAt(
camera.position,
camera.lookAt,
vec3(0,1,0),
camera.matrix
);
camera.setTransform(camera.matrix);
window.requestAnimFrame(tick);
};
tick();
}, false);
</script>
</head>
<body>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1485935-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>