E=document.getElementById("c");M=Math;c=0;X=[];Y=[];function S(a,b){C=[];for(y=V=0;y<a.length;){C[V]=[];for(x=0;x<b;x++){W=a.charCodeAt(y++)-48;C[V][x]=b<4?[0,7,8,9,-12.6,-3.7,-2.1,12,-2.5,-.3,-9.5,-1.3,-14.2,-11,-5.5,-.9,-7.1,-1.9,-7.8,-11.9,-1.5,-5,-3,-10.2,-.7,-10,-16,-1,-2,-4,1,4,6,7.5,6.7,-.5][W]:W}V++}return C}h=S("000I@H1@H1>9I>9I:;1:;1B?IB?ICA1CA1GDIGDI<81<8146I4623023E=3E=30=5E=50=JE=JF2502JF2JE25E1371F71F0130IF0IF7I37I30FFOFF3MF2MFOKFOKF3LF3LFONF30F3KFQKFP0FONFOSFRKFP",3);n=S("123456789:;<=>?@ABCDEFDCGHFEIJKLAILBFIADGKJHMNOPQRSTONRQSMPTUVWXYZ[\\]^_`abcd",4);setInterval("w=innerWidth-24;j=innerHeight-24;E.width=w;E.height=j;with(E.getContext('2d')){strokeStyle='#555';clearRect(0,0,w,j);H=M.sin(c);O=M.cos(c+=.02);for(g in n)for(u in f=n[g]){l=h[f[u]];m=h[f[[1,2,3,0][u]]];P=[l[0],m[0]];Q=[l[1],m[1]];R=[l[2],m[2]];for(i in R){Z=-P[i]*O*O-Q[i]*H*O+R[i]*H+27;X[i]=j/2*(-P[i]*H+Q[i]*O)/Z+(w/2);Y[i]=j/2*(-P[i]*O*H-Q[i]*H*H-R[i]*O)/Z+j/2-6}beginPath();moveTo(X[0],Y[0]);lineTo(X[1],Y[1]);stroke()}}",30)
/*
A rotating 3D computer wireframe.
Luis Gonzalez - lobster@luis.net
released for http://www.js1k.com
Features:
- CPU, Keyboard and Monitor
- 3D Text that displays "1K" on the monitor
- browser scaling and auto-centering
- works in firefox, chrome, safari and opera
3D Model created in 3D Studio Max 9 then exported to wavefront OBJ format (quads).
The 3D model was hand tweaked to occupy as many whole numbers as possible for its points.
then manually compressed using ASCII table reference
download 3D computer model here:
http://luis.net/projects/1k/3d/computer.obj (Wavefront OBJ quads)
screenshot:
http://www.flickr.com/photos/luis2048/4930263977/
http://luis.net/projects/1k/3d/screenshot.png
*/
// set it up
E=document.getElementById("c");
M=Math; // its math time
c=0; // our global counter used for rotation
X=[];
Y=[];
// numbers used for verticies
points = [0,7,8,9,-12.6,-3.7,-2.1,12,-2.5,-0.3,-9.5,-1.3,-14.2,-11,-5.5,-0.9,-7.1,-1.9,-7.8,-11.9,-1.5,-5,-3,-10.2,-0.7,-10,-16,-1,-2,-4,1,4,6,7.5,6.7,-0.5];
// decompress data points in either 3(verticies - [[X1,Y1,Z1]]) or 4(faces - [[1,2,3,4]]) using ASCII table charcodes
function S(a,b){
C=[]; // array we are building
for(y=V=0;y<a.length;){ // loop through entire string "000I@H1@H1>9"
C[V]=[]; // create a sub array to contain points(4) or vertice(3) defined by b
for(x=0;x<b;x++){ // loop either 3 or 4 times
W=a.charCodeAt(y++)-48; // G = (charcode 71)-48 = (23 array index) = "-10.2" or 23
C[V][x]=b<4?points[W]:W; // append either points to new array or index position
}
V++;
}
return C; // return our newly assembled array
}
// verticies (X,Y,Z)
// returns the following format: h=[[-10,-7.1,-.7],[7,-7.1,-.7],[7,-5.5,-.3],[-10,-5.5,-.3],[-10,-9.5,-1.3]];
h=S("000I@H1@H1>9I>9I:;1:;1B?IB?ICA1CA1GDIGDI<81<8146I4623023E=3E=30=5E=50=JE=JF2502JF2JE25E1371F71F0130IF0IF7I37I30FFOFF3MF2MFOKFOKF3LF3LFONF30F3KFQKFP0FONFOSFRKFP",3);
// faces - connect four vertices to make a quad
// returns the following format: n=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,16],[17,18,19,20]];
n=S("123456789:;<=>?@ABCDEFDCGHFEIJKLAILBFIADGKJHMNOPQRSTONRQSMPTUVWXYZ[\\]^_`abcd",4);
// main animation loop
setInterval(
function(){
w=innerWidth-24; // get browser dimensions - 24 margin to prevent scrollbars
j=innerHeight-24;
E.width=w; // set canvas to occupy full screen
E.height=j; // ditto for height
with(E.getContext("2d"))
{
strokeStyle='#555'; // light gray
clearRect(0,0,w,j); // clear the screen
H=M.sin(c); // im spinning
O=M.cos(c+=0.02); // counter spin and increment c for animation
// our tiny 3D engine
for(g in n) // loop through each face(4) which have 3 vertices in it
for(u in f=n[g]){
l=h[f[u]];
m=h[f[[1,2,3,0][u]]]; // connect our verticies to form a quad 1-2 then 2-3 then 3-0 then 0-1
P=[l[0],m[0]];
Q=[l[1],m[1]];
R=[l[2],m[2]];
for(i in R)
{
Z=-P[i]*O*O-Q[i]*H*O+R[i]*H+27;
X[i]=j/2*(-P[i]*H+Q[i]*O)/Z+(w/2);
Y[i]=j/2*(-P[i]*O*H-Q[i]*H*H-R[i]*O)/Z+j/2-6;
}
// draw our 3D line in 2D space
beginPath();
moveTo(X[0],Y[0]);
lineTo(X[1],Y[1]);
stroke();
}
}
},30)
