var stepSize = 2; var stepDistance = 140; var pos = [0,100]; var last; var fps = 60; var fov = Math.PI/2; var inaccuracy=.06; //cannot be 0 var clipView=true; var objects = [ [0,20,20,20,[40,200,255]], [0,20,60,10,[255,255,255]], [1,60,20,[10,10],[255,120,40]], [2,80,80,[5,15],[255,40,40]] ]; var ambPow=.3; var lights = [ [80,50,80,[255,0,0]], [20,50,80,[0,0,255]], [50,50,80,[0,255,0]] ]; var angle = -Math.PI/4; function distance(a,b) { return Math.hypot(a[0]-b[0],a[1]-b[1]); } function sphere(a,b,c) { return distance(a,b)c[0]&&distx0&&a[1]>y0&& a[0]y1&& a[0]x3&&a[1]innerWidth||y<0||y>innerHeight) break; var draw=scene([x,y]); if(draw[0]) { pixels.push([x,y,draw[1]]); if(!clipView) break; } } return pixels; } function shader(x,y,mcolor) { var color = [ambPow,ambPow,ambPow]; for(var i=0;i1) color[0]=1; if(color[1]>1) color[1]=1; if(color[2]>1) color[2]=1; return [color[0]*mcolor[0],color[1]*mcolor[1],color[2]*mcolor[2]]; } document.addEventListener("keydown",e=>{ if(e.key==="w") pos[1]-=1; if(e.key==="s") pos[1]+=1; if(e.key==="a") pos[0]-=1; if(e.key==="d") pos[0]+=1; if(e.key==="ArrowLeft") angle-=.05; if(e.key==="ArrowRight") angle+=.05; }); function frame() { c=document.querySelector("canvas"); c.width=innerWidth; c.height=innerHeight; ctx=c.getContext("2d"); //-=-// var now=Date.now(); if(!last) last=now; var delta=now-last; ctx.fillStyle="white"; ctx.fillText((1000/delta).toFixed(1)+"FPS",0,10); ctx.translate(innerWidth/2,innerHeight/2); ctx.beginPath(); ctx.arc(pos[0],pos[1],10,0,2*Math.PI); ctx.fill(); ctx.closePath(); // pos[0]=Math.cos(Date.now()/2000)*100+150; // pos[1]=Math.sin(Date.now()/2000)*100+150; // var angle = Date.now()/1000; ctx.strokeStyle="red"; ctx.beginPath(); ctx.moveTo(pos[0],pos[1]); ctx.lineTo(Math.cos(angle-fov/2)*stepDistance+pos[0],Math.sin(angle-fov/2)*stepDistance+pos[1]); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(pos[0],pos[1]); ctx.lineTo(Math.cos(angle+fov/2)*stepDistance+pos[0],Math.sin(angle+fov/2)*stepDistance+pos[1]); ctx.stroke(); ctx.closePath(); lights[0][0]=Math.cos(Date.now()/1500)*70+90; lights[0][1]=Math.cos(Date.now()/1000)*70+90; lights[1][0]=Math.cos(Date.now()/2000+Math.PI/3)*140; lights[1][1]=Math.cos(Date.now()/1500+Math.PI/3)*140; lights[2][0]=Math.cos(Date.now()/750+Math.PI/3*2)*140; lights[2][1]=Math.cos(Date.now()/1250+Math.PI/3*2)*140; for(var i=0;i

2D RayMarching