function project3D(x,y,z,vars){
var p,d;
x-=vars.camX;
y-=vars.camY;
z-=vars.camZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-vars.yaw)*d;
z=Math.cos(p-vars.yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-vars.pitch)*d;
z=Math.cos(p-vars.pitch)*d;
var rx1=-9;
var ry1=1;
var rx2=9;
var ry2=1;
var rx3=0;
var ry3=0;
var rx4=x;
var ry4=z;
var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
if(!z)z=0.000000001;
if(ua>0&&ua<1&&ub>0&&ub<1){
return {
x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
y:vars.cy+y/z*vars.scale,
d:Math.sqrt(x*x+y*y+z*z)
};
}else{
return { d:-1 };
}
}
function Vert(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
function Poly(verts){
this.verts = verts;
}
function elevation(x,y,z){
var dist = Math.sqrt(x*x+y*y+z*z);
if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
return 0.00000001;
}
function rgb(col){
col += 0.000001;
var r = parseInt((0.5+Math.sin(col)*0.5)*256);
var g = parseInt((0.5+Math.cos(col)*0.5)*256);
var b = parseInt((0.5-Math.sin(col)*0.5)*256);
return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
}
function process(vars){
var p,d,t;
p = Math.atan2(vars.camX, vars.camZ);
d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
d -= Math.sin(vars.frameNo / 80) / 20;
t = Math.sin(vars.frameNo / 200) / 105;
vars.camX = Math.sin(p + t) * d;
vars.camZ = Math.cos(p + t) * d;
vars.camY = -Math.sin(vars.frameNo / 100) *20;
vars.yaw = Math.PI + p + t;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
for(var i=1;i<vars.shapes.length;++i){
rotateShape(vars.shapes[i],0,0,0,0,.02*(i%2?-1:1),0);
}
}
function sortFunction(a,b){
return b.dist-a.dist;
}
function rotateShape(shape,ox,oy,oz,pitch,yaw){
var p,d,x,y,z;
x=shape.x-ox;
y=shape.y-oy;
z=shape.z-oz;
d=Math.sqrt(y*y+z*z);
p=Math.atan2(y,z);
y=Math.sin(p+pitch)*d;
z=Math.cos(p+pitch)*d;
d=Math.sqrt(x*x+z*z);
p=Math.atan2(x,z);
x=Math.sin(p+yaw)*d;
z=Math.cos(p+yaw)*d;
shape.x=x+ox;
shape.y=y+oy;
shape.z=z+oz;
for(var i=0;i<shape.polys.length;++i){
for(var j=0;j<shape.polys[i].verts.length;++j){
x=shape.polys[i].verts[j].x;
y=shape.polys[i].verts[j].y;
z=shape.polys[i].verts[j].z;
d=Math.sqrt(y*y+z*z);
p=Math.atan2(y,z);
y=Math.sin(p+pitch)*d;
z=Math.cos(p+pitch)*d;
d=Math.sqrt(x*x+z*z);
p=Math.atan2(x,z);
x=Math.sin(p+yaw)*d;
z=Math.cos(p+yaw)*d;
shape.polys[i].verts[j].x=x;
shape.polys[i].verts[j].y=y;
shape.polys[i].verts[j].z=z;
}
}
}
function draw(vars){
vars.ctx.globalAlpha=.25;
vars.ctx.fillStyle="#000";
vars.ctx.fillRect(0, 0, vars.canvas.width, vars.canvas.height);
var pt,x,y,z,polys=[];
for(var i=0;i<vars.shapes.length;++i){
for(var j=0;j<vars.shapes[i].polys.length;++j){
x=vars.shapes[i].x+vars.shapes[i].polys[j].verts[0].x;
y=vars.shapes[i].y+vars.shapes[i].polys[j].verts[0].y;
z=vars.shapes[i].z+vars.shapes[i].polys[j].verts[0].z;
pt = project3D(x,y,z,vars);
if(pt.d != -1){
poly={};
poly.verts=Array(vars.shapes[i].polys[j].verts.length);
poly.dist=pt.d;
poly.color=Math.PI*2/vars.shapes.length*i;
poly.verts[0]={};
poly.verts[0].x=pt.x;
poly.verts[0].y=pt.y;
for(var k=1;k<poly.verts.length;++k){
x=vars.shapes[i].x+vars.shapes[i].polys[j].verts[k].x;
y=vars.shapes[i].y+vars.shapes[i].polys[j].verts[k].y;
z=vars.shapes[i].z+vars.shapes[i].polys[j].verts[k].z;
pt = project3D(x,y,z,vars);
poly.dist+=pt.d;
poly.verts[k]={};
poly.verts[k].x=pt.x;
poly.verts[k].y=pt.y;
}
polys.push(poly);
}
}
}
polys.sort(sortFunction);
for(var i=0;i<polys.length;++i){
x=polys[i].verts[0].x;
y=polys[i].verts[0].y;
vars.ctx.lineWidth=100/(1+polys[i].dist);
vars.ctx.beginPath();
vars.ctx.moveTo(x,y);
for(var j=1;j<polys[i].verts.length;++j){
x=polys[i].verts[j].x;
y=polys[i].verts[j].y;
vars.ctx.lineTo(x,y);
}
vars.ctx.fillStyle=rgb(vars.frameNo/20+polys[i].color);
vars.ctx.globalAlpha=.75;
vars.ctx.fill();
vars.ctx.strokeStyle="#fff";
vars.ctx.globalAlpha=.8;
vars.ctx.stroke();
}
}
function Torus(x,y,z,radius1,radius2,stacks,slices,pitch,yaw){
var shape={},x,y,z,p,x1,y1,z1,x2,y2,z2,x3,y3,z3,x4,y4,z4,p1,p2,d;
shape.x=x;
shape.y=y;
shape.z=z;
shape.polys=[];
for(var j=0;j<slices;++j){
for(var i=0;i<stacks;++i){
p1=Math.PI*2/stacks*i;
x1=radius2+Math.sin(p1)*radius1;
y1=Math.cos(p1)*radius1;
z1=0;
d=Math.sqrt(x1*x1);
p2=Math.PI*2/slices*j;
p1=Math.atan2(x1,z1)+p2;
x1=Math.sin(p1)*d;
z1=Math.cos(p1)*d;
p1=Math.PI*2/stacks*(i+1);
x2=radius2+Math.sin(p1)*radius1;
y2=Math.cos(p1)*radius1;
z2=0;
d=Math.sqrt(x2*x2);
p2=Math.PI*2/slices*j;
p1=Math.atan2(x2,z2)+p2;
x2=Math.sin(p1)*d;
z2=Math.cos(p1)*d;
p1=Math.PI*2/stacks*(i+1);
x3=radius2+Math.sin(p1)*radius1;
y3=Math.cos(p1)*radius1;
z3=0;
d=Math.sqrt(x3*x3);
p2=Math.PI*2/slices*(j+1);
p1=Math.atan2(x3,z3)+p2;
x3=Math.sin(p1)*d;
z3=Math.cos(p1)*d;
p1=Math.PI*2/stacks*i;
x4=radius2+Math.sin(p1)*radius1;
y4=Math.cos(p1)*radius1;
z4=0;
d=Math.sqrt(x4*x4);
p2=Math.PI*2/slices*(j+1);
p1=Math.atan2(x4,z4)+p2;
x4=Math.sin(p1)*d;
z4=Math.cos(p1)*d;
shape.polys.push(new Poly([new Vert(x1,y1,z1),new Vert(x2,y2,z2),new Vert(x3,y3,z3),new Vert(x4,y4,z4)]));
}
}
for(var i=0;i<shape.polys.length;++i){
for(var j=0;j<shape.polys[i].verts.length;++j){
x=shape.polys[i].verts[j].x;
y=shape.polys[i].verts[j].y;
z=shape.polys[i].verts[j].z;
d=Math.sqrt(y*y+z*z);
p=Math.atan2(y,z);
y=Math.sin(p+pitch)*d;
z=Math.cos(p+pitch)*d;
d=Math.sqrt(x*x+z*z);
p=Math.atan2(x,z);
x=Math.sin(p+yaw)*d;
z=Math.cos(p+yaw)*d;
shape.polys[i].verts[j].x=x;
shape.polys[i].verts[j].y=y;
shape.polys[i].verts[j].z=z;
}
}
return shape;
}
function loadScene(vars){
vars.shapes=[];
var x=0;
var y=0;
var z=0;
var rad1=2;
var rad2=10;
var stacks=8;
var slices=20;
var pitch=0;
var yaw=0;
vars.shapes.push(Torus(x,y,z,rad1,rad2,stacks,slices,pitch,yaw));
var sd=3,p;
for(var i=0;i<sd;++i){
p=Math.PI*2/sd*i;
x=Math.sin(p)*rad2;
z=Math.cos(p)*rad2;
pitch=Math.PI/2;
yaw=p+Math.PI/2;
rad1b=1;
rad2b=3.5*(i+1);
stacks=6;
slices=8*(i+1);
vars.shapes.push(Torus(x,y,z,rad1b,rad2b,stacks,slices,pitch,yaw));
}
}
function loadFloor(vars){
var p1,p2,d=100;
vars.floorTiles=[];
for(var i=0;i<3500;++i){
vert={};
vert.p1=Math.PI*2*Math.random();
vert.p2=Math.PI*Math.random();
vert.x=Math.sin(vert.p1)*Math.sin(vert.p2)*d;
vert.z=Math.cos(vert.p1)*Math.sin(vert.p2)*d;
vert.y=Math.cos(vert.p2)*d;
vars.floorTiles.push(vert);
}
}
function frame(vars) {
if(vars === undefined){
var vars={};
vars.canvas=document.createElement("canvas");
document.body.appendChild(vars.canvas);
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
window.addEventListener("resize", function(){
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
}, true);
vars.canvas.oncontextmenu = function (e) { e.preventDefault(); };
vars.canvas.addEventListener("mousemove", function(e){
var rect = vars.canvas.getBoundingClientRect();
vars.mx = Math.round((e.clientX-rect.left)/(rect.right-rect.left)*vars.canvas.width);
vars.my = Math.round((e.clientY-rect.top)/(rect.bottom-rect.top)*vars.canvas.height);
}, true);
vars.canvas.addEventListener("mousedown", function(e){
switch(e.which){
case 1: vars.leftButton=1; break;
case 3: vars.rightButton=1; break;
}
}, true);
vars.canvas.addEventListener("mouseup", function(e){
switch(e.which){
case 1: vars.leftButton=0; break;
case 3: vars.rightButton=0; break;
}
}, true);
vars.canvas.addEventListener("mousewheel", function(e){
var e = window.event || e; // old IE support
vars.wheelDelta = Math.max(-1, Math.min(1, (e.wheelDelta/120 || -e.detail)));
}, true);
vars.canvas.addEventListener("touchstart", function(e){
vars.leftButton=1;
e.preventDefault();
var rect = vars.canvas.getBoundingClientRect();
vars.omx=vars.mx;
vars.omy=vars.my;
vars.mx = Math.round((e.changedTouches[0].pageX-rect.left)/(rect.right-rect.left)*vars.canvas.width);
vars.my = Math.round((e.changedTouches[0].pageY-rect.top)/(rect.bottom-rect.top)*vars.canvas.height);
}, true);
vars.canvas.addEventListener("touchend", function(e){
vars.leftButton=0;
}, true);
vars.canvas.addEventListener("touchmove", function(e){
e.preventDefault();
var rect = vars.canvas.getBoundingClientRect();
vars.mx = Math.round((e.changedTouches[0].pageX-rect.left)/(rect.right-rect.left)*vars.canvas.width);
vars.my = Math.round((e.changedTouches[0].pageY-rect.top)/(rect.bottom-rect.top)*vars.canvas.height);
}, true);
vars.frameNo=0;
vars.camX = 0;
vars.camY = 0;
vars.camZ = -30;
vars.pitch = 0;
vars.yaw = 0;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
vars.scale=700;
vars.seed=0;
loadScene(vars);
loadFloor(vars);
}
vars.frameNo++;
requestAnimationFrame(function() {
frame(vars);
});
process(vars);
draw(vars);
}
frame();
html,body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
#canvas{
position:absolute;
width:100%;
height:100%;
}
console