var w=128; var h=128; var fov=90; var mind=0; var maxd=12; var maxs=48; var eps=.015; var lbounce=4; var normad=eps*2; function r2d(x,z,a) { var c=Math.cos(a); var s=Math.sin(a); return [c*x+s*z,c*z-s*x]; } function r3d(x,r) { var t0=r2d(x[1],x[2],r[0]); var t1=r2d(x[0],t0[0],r[2]); var t2=r2d(t0[1],t1[0],r[1]); return [t2[1],t1[1],t2[0]]; } function normalize(a) { return [Math.hypot(...a)].map(len=>a.map(x=>x/len))[0]; } function dot(a,b) { return new Array(Math.min(a.length,b.length)).fill().map((x,y)=>a[y]*b[y]).reduce((a,b)=>a+b,0); } function sphere(p,s) { return Math.hypot(...p)-s; } function box(p,b) { var q=p.map((x,y)=>Math.abs(x)-b[y]); return Math.hypot(...q.map(x=>Math.max(x,0)))+Math.min(Math.max(q[0],Math.max(q[1],q[2])),0); } function octa(p,s) { p=p.map(x=>Math.abs(x)); var m=p[0]+p[1]+p[2]-s; var q; if(3*p[0]Math.max(Math.abs(x)-b[y],0)))-r; } function torus(p,t) { var q=[Math.hypot(p[0],p[2])-t[0],p[1]]; return Math.hypot(...q)-t[1]; } function capsule(p,a,b,r) { var pa=p.map((x,y)=>x-a[y]); var ba=b.map((x,y)=>x-a[y]); var h=Math.min(Math.max(dot(pa,ba)/dot(ba,ba),0),1); return Math.hypot(...pa.map((x,y)=>x-ba[y]*h))-r; } var diffuse=0; var reflective=1; function scene(p) { var ms=[maxd,[0,0,0],[0,0,0]]; for(var i=0;ix-objects[i][0][y])); if(dsx+rd[y]*t)); t+=d[0]; if(d[0]maxd) return maxd; } return maxd; } function norm(p) { return [scene(p)[0]].map(x=>normalize([x-scene([p[0]-eps,p[1],p[2]])[0],x-scene([p[0],p[1]-eps,p[2]])[0],x-scene([p[0],p[1],p[2]-eps])[0]]))[0]; } function ruv() { var z=Math.random()*2-1; var a=Math.random()*Math.PI*2; var r=Math.sqrt(1-z*z); var x=r*Math.cos(a); var y=r*Math.sin(a); return [x,y,z]; } function ruvh(n) { var dr=ruv(); return dr.map(x=>x*dot(dr,n)); } function reflect(iv,n) { return iv.map((x,y)=>x-n[y]*dot(iv,n)*2); } var cpf=1; var bg=[.5,.7,.9]; var lightmode=0; var camp=[0,-1.25,-7.5]; var camr=[.2,0,0]; function main(co) { var as=co.map((x,y)=>x/[w,h][y]); var rd=r3d(normalize([as[0]-.5,as[1]-.5,1/Math.tan(fov/180*Math.PI/2)]),camr); var t=Math.min(Math.max((normalize(rd)[1]+1)/2,0),1); var ret=[[0,0,0],[1,1,1],[0,0,0]]; bg=new Array(3).fill().map((x,y)=>(1-t)*[.8,.8,.8][y]+t*[.4,.2,.8][y]); for(var j=0;jx+bg[y]*ret[1][y]); break; } var cr=ro.map((x,y)=>x+rd[y]*ds[0]); var nor=norm(cr); ro=cr.map((x,y)=>x+nor[y]*normad); if(ds[3]===1) rd=normalize(reflect(rd,lightmode===0?nor.map((x,y)=>x+ruv()[y]*ds[4]):normalize(nor.map((x,y)=>x+ruvh(nor)[y])))); else rd=lightmode===0?normalize(nor.map((x,y)=>x+ruv()[y])):normalize(nor.map((x,y)=>x+ruvh(nor)[y])); ret[0]=ret[0].map((x,y)=>x+(typeof ds[1]==="function"?ds[1](cr)[y]:ds[1][y])*ret[1][y]); ret[1]=ret[1].map((x,y)=>x*(typeof ds[2]==="function"?ds[2](cr)[y]:ds[2][y])); } ret[2]=ret[2].map((x,y)=>x+ret[0][y]/cpf); } return ret[2]; } var ak; var ml; function mix(a,b,c) { return a*(1-c)+b*c; } var fras=0; var parts=[8,8]; var ks=0; var im; var nw=128; var nh=128; function frame() { c=document.querySelector("canvas"); [c.width,c.height,ctx]=[innerWidth,innerHeight,c.getContext("2d")]; //-=-// ctx.imageSmoothingEnabled=false; if(ks===0) im=ctx.createImageData(w,h); var cx=ks%parts[0]; var cy=Math.floor(ks/parts[0]); var cw=Math.round(w/parts[0]); var ch=Math.round(h/parts[1]); var tx=cx*cw; var ty=cy*ch; for(var sx=0;sxMath.round(x*255)); if(ml) col=col.map((x,y)=>mix(ml.data[i+y],x,1/(fras+1))); col.map((x,y)=>im.data[i+y]=x); im.data[i+3]=255; } } ks++; var asx=w/parts[0]%1; var asy=h/parts[1]%1; if(ks>=(parts[0]+(asx===0?0:1))*(parts[1]+(asy===0?0:1))) { fras++; ks=0; ml=ctx.createImageData(w,h); for(var i=0;i{ if(["w","a","s","d","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].indexOf(e.key)===-1) return; fras=0; var m={"w":["mov",[0,0,.1]],"a":["mov",[-.1,0,0]],"s":["mov",[0,0,-.1]],"d":["mov",[.1,0,0]],ArrowLeft:["or",[0,.1,0]],"ArrowRight":["or",[0,-.1,0]],"ArrowUp":["or",[-.1,0,0]],"ArrowDown":["or",[.1,0,0]]}[e.key]; camp=camp.map((x,y)=>x+(m[0]==="mov"?m[1][y]:0)); camr=camr.map((x,y)=>x+(m[0]==="or"?m[1][y]:0)); ks=0; im=0; }); //Movement and rotation for pc //This isn't really code anymore, it's just the objects in the scene... var objects=[ [ [-.5,-.5,0], [0,0,0], [1,1,1], [1,1,.75], reflective, function(p) { return box(r3d(p,[.6,.25,0]),this[3]); }, .1 ], [ [-1.25,1.75,-1.5], [0,0,0], function(p) { var ak=sphmap(p).map(x=>Math.min(Math.max(x,0),1)*64); var al=Math.round(ak[0])+Math.round(ak[1]); return al%2===0?[1,1,0]:[0,1,1]; }, .75, diffuse, function(p) { return sphere(p,this[3]); } ], [ [1,1,0], [0,0,0], [.7,.2,.9], 1.5, diffuse, function(p) { return octa(r3d(p,[-.6,0,0]),this[3]); } ], [ [-2.25,-1,-1], [4,0,0], [0,0,0], [1.25,.2], diffuse, function(p) { return torus(r3d(p,[0,0,Math.PI/2]),this[3]); } ], [ [2.25,-1,-1], [0,0,4], [0,0,0], [1.25,.2], diffuse, function(p) { return torus(r3d(p,[0,0,Math.PI/2]),this[3]); } ], [ [0,0,2], [0,0,0], [.1,.7,.9], [2.5,2.5,.025], diffuse, function(p) { return box(p,this[3]); } ], [ [-2.5,0,1.25], [0,0,0], [.1,.7,.1], [.025,2.5,5], diffuse, function(p) { return box(p,this[3]); } ], [ [2.49,0,1.25], [0,0,0], [.7,.1,.1], [.025,2.5,5], diffuse, function(p) { return box(p,this[3]); } ], [ [0,-2.49,1.25], [0,0,0], [.7,.7,.7], [2.5,.025,5], diffuse, function(p) { return box(p,this[3]); } ], [ [0,2.5,1.25], [0,0,0], [.9,.9,.9], [2.5,.025,5], diffuse, function(p) { return box(p,this[3]); } ] ];

Path Marching in 3D