//Made by Baron alert("Move the light by tapping it!"); alert("You can play with the sliders!"); var color = [0,255,120]; var ncount = 20; var ndis = 140; var ncolor = "white"; 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; document.addEventListener("touchstart",e=>{ if(e.changedTouches) e=e.changedTouches[0]; if(e.clientY<40) return; last=[e.clientX,e.clientY]; }); document.addEventListener("touchmove",e=>{ 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("touchend",()=>follow=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(parseInt(document.getElementsByTagName("input")[6].value)!==ncount) { ncount=parseInt(document.getElementsByTagName("input")[6].value); blocks=[]; genNode(ncount); } if(rotdirection) roy+=rotspeed*delta; else 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,"white",true); if(drawspheres) { var blox = blocks; for(var i=0;i=innerWidth/4) { blox[i][4]=-blox[i][4]; blox[i][0]+=blox[i][4]*delta/10; } if(blox[i][1]<=-innerWidth/4||blox[i][1]>=innerWidth/4) { blox[i][5]=-blox[i][5]; blox[i][1]+=blox[i][5]*delta/10; } if(blox[i][2]<=-innerWidth/4||blox[i][2]>=innerWidth/4) { blox[i][6]=-blox[i][6]; blox[i][2]+=blox[i][6]*delta/10; } for(var j=0;jndis) opac = 0; ctx.lineWidth=1; if(opac!==0) ctx.strokeStyle="rgba("+color+","+opac+")"; else ctx.strokeStyle="rgba(0,0,0,0)" ctx.beginPath(); var c1 = convert3D(blox[i][0],blox[i][1],blox[i][2],rox,roy,roz); ctx.moveTo(c1[0],c1[1]); var c2 = convert3D(blox[j][0],blox[j][1],blox[j][2],rox,roy,roz); ctx.lineTo(c2[0],c2[1]); ctx.stroke(); ctx.closePath(); } } } 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/4; 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) ]; } function genNode(a) { for(var i=0;i{ genNode(ncount); setTimeout(()=>{ setInterval(frame); },100); })();

3D Nodes