//Made by Baron alert("Move the light by tapping it!"); function sortThingArray(a) { for(var i=0;i=wc[1]) { t0=j; t1=i; } var tes = a[t0]; a[i]=a[t1]; a[j]=tes; } } } return a; } var lsst; var blocks = [ ]; var lightangle = 0; var lightdownangle = 0; var lightposition = [0,120,100]; var listen = false; var rotspeed; var rotdirection; var last; var bgn = false; var ev1 = "mousedown"; var ev2 = "mousemove"; var ev3 = "mouseup"; if("ontouchstart" in document) { ev1="touchstart"; ev2="touchmove"; ev3="touchend"; } document.addEventListener(ev1,e=>{ bgn = true; if(e.changedTouches) e=e.changedTouches[0]; if(e.clientY<40) return; last=[e.clientX,e.clientY]; }); document.addEventListener(ev2,e=>{ if(!bgn) return; if(e.changedTouches) e=e.changedTouches[0]; if(e.clientY<40) return; if(!last) last=[e.clientX,e.clientY]; if(!follow) { roy+=(e.clientX-last[0])/1.5; if(rox+(e.clientY-last[1])/1.5>5&&rox+(e.clientY-last[1])/1.5<90) rox+=(e.clientY-last[1])/1.5; } else { var ang = Math.atan2(innerHeight/2-e.clientY,e.clientX-innerWidth/2); lightangle = ang-Math.PI; } last=[e.clientX,e.clientY]; }); document.addEventListener(ev3,()=>{ follow=false; bgn=false; }); var rox = 0; var roy = 45; var roz = 0; var start = true; var drawspheres = false; var multiplier = 110; function frame() { c=document.querySelector("canvas"); c.width=innerWidth; c.height=innerHeight; ctx=c.getContext("2d"); //-=-// var averager = 1000; var now = Date.now(); if(!lsst) lsst = now; var delta = (now-lsst)/(1000/averager); lightposition[0]=Math.cos(lightangle)*multiplier; lightposition[1]=Math.sin(lightangle)*multiplier; lightamount = document.getElementsByTagName("input")[0].value / 100; drawspheres = document.getElementsByTagName("input")[1].checked; drawplane = document.getElementsByTagName("input")[2].checked; multiplier = parseInt(document.getElementsByTagName("input")[3].value)+10; rotspeed = document.getElementsByTagName("input")[4].value/2000; rotdirection = document.getElementsByTagName("input")[5].checked; if(rotdirection&&!bgn) roy+=rotspeed*delta; else if(!bgn) roy-=rotspeed*delta; if(rox<45&&start) rox+=.05*delta; else start = false; if(drawplane) plane3D(0,0,0,innerWidth/2,innerWidth/2,rox,roy,roz,"limegreen"); if(drawspheres) { var blox = sortThingArray(Object.assign([],blocks)); for(var i=0;i{ if(e.changedTouches) e=e.changedTouches[0]; if(e.clientY<40) return; var p1 = convert3D(lightposition[0],lightposition[1],lightposition[2],rox,roy,roz); if(gdis(p1,[e.clientX,e.clientY])<20) follow=true; }); var lightamount = 55/100; function sphere3D(x,y,z,r,rx,ry,rz,co,tr) { var amj = 360/Math.PI; var nma = 10; var off = Math.PI/2; var wms = r*(Math.PI*3)*lightamount; var p0 = convert3D(x,y,z,rx,ry,rz); if(!tr) { var grd = ctx.createRadialGradient(p0[0]-Math.cos(roy/amj+lightangle-off)*nma,p0[1]-Math.sin(rox/amj+lightangle-off)*nma,0,p0[0]-Math.cos(roy/amj+lightangle-off)*nma,p0[1]-Math.sin(rox/amj+lightangle-off)*nma,wms); grd.addColorStop(0,co); grd.addColorStop(1,"black"); ctx.fillStyle=grd; } else ctx.fillStyle=co; ctx.beginPath(); ctx.arc(p0[0],p0[1],r,0,2*Math.PI); ctx.fill(); ctx.closePath(); } function plane3D(x, y, z, xr, yr, rx, ry, rz, co, tr, sh) { var amj = 360/Math.PI; var nma = 10; var wms = Math.max(xr,yr)/2*(Math.PI*3)*lightamount; ctx.fillStyle=co; ctx.strokeStyle=co; var p0 = convert3D(-xr/2+x,-yr/2+y,z,rx,ry,rz); ctx.moveTo(p0[0],p0[1]); var p1 = convert3D(xr/2+x,-yr/2+y,z,rx,ry,rz); ctx.lineTo(p1[0],p1[1]); var p2 = convert3D(xr/2+x,yr/2+y,z,rx,ry,rz); ctx.lineTo(p2[0],p2[1]); var p3 = convert3D(-xr/2+x,yr/2+y,z,rx,ry,rz); ctx.lineTo(p3[0],p3[1]); ctx.lineTo(p0[0],p0[1]); if(!tr) { if(!sh) { var ew = convert3D(lightposition[0],lightposition[1],lightposition[2],rx,ry,rz); var grd = ctx.createRadialGradient(ew[0]-Math.cos(roy/amj+lightangle)*nma,ew[1]-Math.sin(rox/amj+lightangle)*nma,0,ew[0]-Math.cos(roy/amj+lightangle)*nma,ew[1]-Math.sin(rox/amj+lightangle)*nma,wms); grd.addColorStop(0,ctx.fillStyle); grd.addColorStop(1,"black"); ctx.fillStyle=grd; } ctx.fill(); } else ctx.stroke(); } function convert3D(x,y,z,rx,ry,rz) { var cos = Math.cos(ry/180*Math.PI); var sin = Math.sin(ry/180*Math.PI); return [ innerWidth/2+(x*cos - y*sin)*Math.cos(rz/180*Math.PI), innerHeight/2-(x*sin + y*cos)*Math.sin(rx/180*Math.PI) - z*Math.cos(rx/180*Math.PI) ]; } (()=>{ var colors=[ "red", "white", "orange", "aqua", "gold", "pink" ]; for(var i=0;i{ setInterval(frame); },100); })();

3D Prototype