// Created by Baron (Qyther) [12AM-10PM(CET)] //Baron var lights=[ //Lights... [[0,20,-3],[1,1,1]] ]; var ambient=[.1,.1,.1]; //Ambient lighting var fogintensity=.015; //Intensity of the fog var fogcolor=[.2,.6,.9]; //Color of the fog var fov=90; //Field of fiew var mind=0; //Clipping distance var maxd=10; //Maximum ray distance var eps=.005; //Epsilon var maxs=100; //Maximum steps var maxb=4; //Bounces of reflection var orient=[0,0,0]; //Orientation of camera var pos=[-.25,2.25,-5.5]; //Position of camera var sens=.5; //Sensitivity of edit mode var quality=Math.min(Math.max((parseFloat(prompt("Enter the quality percentage from 0-100% (Default is 50)")||50)/100),0),1); var REFLECTIVE=0; var REFRACTIVE=1; var DIFFUSE=2; var tilesize=1; //Size of checker pattern var itsh=16; //Shadow iterations var itao=8; //Ambient Occlusion iterations var aodi=.07; //Ambient Occlusion start distance var aopo=1.5; //Ambient Occlusion power var ngd=Math.min(Math.max(parseFloat(prompt("Enter the size of the render tile in percentage from 0-100 (Default is 20)")||20),0),100); function nid() { return Math.floor(Math.random()*1e16); } class Torus { constructor(sets) { this.p=sets.position; this.rt=sets.rotation; this.s=sets.size; this.t=sets.type; this.c=sets.color; this.ri=sets.refrindex; this.rf=sets.reflectivity; this.sh=sets.shininess; this.bm=sets.bump; this.id=nid(); } col(p) { if(Array.isArray(this.c)) return this.c; return this.c(rot3d(this.p.map((x,y)=>p[y]-x),this.rt)); } bump(p) { if(typeof(this.bm)==="number") return this.bm; return this.bm(p); } sdf(p) { p=rot3d(this.p.map((x,y)=>p[y]-x),this.rt); var ed=0; if(this.bm!==undefined) ed=this.bump(p); var q = [Math.hypot(p[0],p[2])-this.s[0],p[1]]; return Math.hypot(...q)-this.s[1]-ed; } } class Sphere { constructor(sets) { this.p=sets.position; this.rt=sets.rotation; this.r=sets.radius; this.t=sets.type; this.c=sets.color; this.ri=sets.refrindex; this.rf=sets.reflectivity; this.sh=sets.shininess; this.bm=sets.bump; this.id=nid(); } col(p) { if(Array.isArray(this.c)) return this.c; return this.c(rot3d(this.p.map((x,y)=>p[y]-x),this.rt)); } bump(p) { if(typeof(this.bm)==="number") return this.bm; return this.bm(p); } sdf(p) { p=rot3d(this.p.map((x,y)=>p[y]-x),this.rt); var ed=0; if(this.bm!==undefined) ed=this.bump(p); return Math.hypot(...p)-this.r-ed; } } class Cylinder { constructor(sets) { this.p=sets.position; this.rt=sets.rotation; this.s=sets.size; this.t=sets.type; this.c=sets.color; this.ri=sets.refrindex; this.rf=sets.reflectivity; this.sh=sets.shininess; this.bm=sets.bump; this.id=nid(); } col(p) { if(Array.isArray(this.c)) return this.c; return this.c(rot3d(this.p.map((x,y)=>p[y]-x),this.rt)); } bump(p) { if(typeof(this.bm)==="number") return this.bm; return this.bm(p); } sdf(p) { p=rot3d(this.p.map((x,y)=>p[y]-x),this.rt); var ed=0; if(this.bm!==undefined) ed=this.bump(p); var d=[Math.hypot(p[0],p[2]),p[1]].map((x,y)=>Math.abs(x)-[this.s[0],this.s[1]][y]); return Math.min(Math.max(d[0],d[1]),0)+Math.hypot(...d.map(x=>Math.max(x,0)))-ed; } } class Box { constructor(sets) { this.p=sets.position; this.rt=sets.rotation; this.s=sets.size; this.t=sets.type; this.c=sets.color; this.ri=sets.refrindex; this.rf=sets.reflectivity; this.sh=sets.shininess; this.bm=sets.bump; this.id=nid(); } col(p) { if(Array.isArray(this.c)) return this.c; return this.c(rot3d(this.p.map((x,y)=>p[y]-x),this.rt)); } bump(p) { if(typeof(this.bm)==="number") return this.bm; return this.bm(p); } sdf(p) { p=rot3d(this.p.map((x,y)=>p[y]-x),this.rt); var ed=0; if(this.bm!==undefined) ed=this.bump(p); var d=p.map((x,y)=>Math.abs(x)-this.s[y]); return Math.min(Math.max(d[0],Math.max(d[1],d[2])),0)+Math.hypot(...d.map(x=>Math.max(x,0)))-ed; } } var SPHEREMAP=0; var CYLINDERMAP=1; var fload=true; var imgcolors=[]; function gettex(imgc,dw,dh,p,t) { var uv=[0,0]; var sz=[dw,dh]; if(t===SPHEREMAP) uv=sphmap(p); if(t===CYLINDERMAP) uv=cylmap(p); uv=uv.map((x,y)=>Math.min(Math.max(Math.round(x*(sz[y]-1)),0),sz[y]-1)); return imgc[uv[0]+uv[1]*dw]; } function sphmap(p) { p=normalize(p); var u=.5+Math.atan2(p[2],p[0])/Math.PI*.5; var v=.5-Math.asin(p[1])/Math.PI; return [u,v]; } function cylmap(p) { p=normalize(p); var u=.5+Math.atan2(p[2],p[0])/Math.PI*.5; var v=.5+.5*p[1]; return [u,v]; } var ground=new Sphere({ position:[0,-100,0], radius:100, rotation:[0,0,0], type:DIFFUSE, color:function(p){ return (Math.floor(p[0]/(tilesize/2))+Math.floor(p[2]/(tilesize/2)))%2===0?[.4,.7,.4]:[.45,.85,.45]; } }); var scenes={ "World":[ new Sphere({ position:[0,.75,0], radius:1, rotation:[0,0,0], type:DIFFUSE, color:function(p){ return gettex(imgcolors[0],dw,dh,p,0); }, bump:function(p) { var tx=gettex(imgcolors[0],dw,dh,p,0); return -(tx[0]+tx[1]+tx[2])/3/10; } }) ], "Mixed scene":[ ground, new Sphere({ position:[-1.25,.5,0], radius:.5, rotation:[0,0,0], type:REFRACTIVE, color:[1,0,0], refrindex:1.54425, shininess:.85 }), new Sphere({ position:[-1,1.25,2.5], radius:1, rotation:[0,0,0], type:REFLECTIVE, color:[0,1,0], reflectivity:.85 }), new Box({ position:[-.25,.5,1], size:[.5,.5,.5], rotation:[0,.5,0], type:DIFFUSE, color:[0,.4,1] }), new Torus({ position:[0,1.1,-2.15], size:[.5,.25], rotation:[-.5,0,0], type:REFRACTIVE, color:[0,0,0], refrindex:1.2, shininess:1 }), new Cylinder({ position:[1,1,0], size:[.5,1], rotation:[0,0,.5], type:DIFFUSE, color:function(p){ return gettex(imgcolors[1],dw,dh,p,0); }, bump:function(p) { var tx=gettex(imgcolors[1],dw,dh,p,0); return -(tx[0]+tx[1]+tx[2])/3/15; } }) ], "Glass":[ ground, new Box({ position:[-.6,.6+eps,-.6], size:[.6,.6,.6], rotation:[0,Math.PI/8,0], type:REFRACTIVE, color:[0,0,0], refrindex:1.54425,//Crystal shininess:1 }), new Sphere({ position:[0,.75,1], radius:.75, rotation:[0,0,0], type:DIFFUSE, color:function(p){ return gettex(imgcolors[0],dw,dh,p,0); }, bump:function(p) { var tx=gettex(imgcolors[0],dw,dh,p,0); return -(tx[0]+tx[1]+tx[2])/3/15; } }) ], "Sky":[ new Sphere({ position:[-1,0,0], radius:1, rotation:[0,0,0], type:REFRACTIVE, color:[0,0,0], refrindex:1.54425, shininess:1 }), new Sphere({ position:[1,0,0], radius:1, rotation:[0,0,0], type:REFLECTIVE, color:[0,0,0], reflectivity:1 }) ], "Cube":[ new Box({ position:[0,.75,0], size:[1,1,1], rotation:[0,0,0], type:DIFFUSE, color:function(p){ return gettex(imgcolors[0],dw,dh,p,0); }, bump:function(p) { var tx=gettex(imgcolors[0],dw,dh,p,0); return -(tx[0]+tx[1]+tx[2])/3/10; } }) ], "Brick Cube":[ ground, new Box({ position:[0,1.07,0], size:[.75,.75,.75], rotation:[0,0,0], type:DIFFUSE, color:function(p){ return gettex(imgcolors[1],dw,dh,p,1); }, bump:function(p) { var tx=gettex(imgcolors[1],dw,dh,p,1); return -(tx[0]+tx[1]+tx[2])/3/10; } }) ], "Three Balls":[ ground, new Sphere({ position:[-1,.375,0], radius:.375, rotation:[0,0,0], type:REFLECTIVE, color:[1,1,0], reflectivity:.75 }), new Sphere({ position:[0,.375,0], radius:.375, rotation:[0,0,0], type:DIFFUSE, color:[0,1,1] }), new Sphere({ position:[1,.375,0], radius:.375, rotation:[0,0,0], type:REFRACTIVE, color:[1,0,1], refrindex:1.54425, shininess:.75 }) ] }; var flaosd=10; var rots={ "World":[ [0,[.0005,.0015,.0007]] ], "Glass":[], "Mixed scene":[], "Sky":[], "Cube":[ [0,[.0005,.0015,.0007]] ], "Brick Cube":[ [1,[.0005,.0015,.0007]] ], "Three Balls":[] } var scnk=Object.keys(scenes); var cns=parseInt(prompt("Please select a scene from 1 - "+scnk.length+" from this list\n"+scnk.map((x,y)=>(y+1)+" - "+x+"\n").join(""))||1)-1; alert("The buttons are kind of weird/fidgety, you have to press a little bit underneath them.\n\nThis is just a prototype, it is still not done.\n\nEnable debug mode for faster rendering without shading.\n\nEdit mode is not finished yet."); var rotab=rots[scnk[cns]]; var objects=scenes[scnk[cns]]; function mix(x,y,a) { return x*(1-a)+y*a; } function scene(p,rc,als) { if(rc) { var fs=[maxd,0]; for(var i=0;ilk) fs=[lk,i]; } return [fs[0],objects[fs[1]]]; } var fs=maxd; for(var i=0;ilk) fs=lk; } return fs; } function march(ro,rd,fm=maxs,nep=eps,md=mind,als) { var t=md; for(var i=0;ix+rd[y]*t),true,als); t+=d[0]; if(d[0]maxd) return [maxd]; } return [maxd]; } function norm(p) { var d=scene(p); return normalize([d-scene([p[0]-eps,p[1],p[2]]),d-scene([p[0],p[1]-eps,p[2]]),d-scene([p[0],p[1],p[2]-eps])]); } function occlude(p,n) { var dist=aodi; var occ=1; for(var i=0;ix+n[y]*dist); occ=Math.min(occ,scene(np)/dist); dist*=aopo; } return Math.max(occ,0); } function shadow(ro,rd,dmin,dmax,k) { var res=1; var t=dmin; for(var i=0;ix+rd[y]*t)); res=Math.min(res,k*h/t); t+=Math.min(Math.max(h,.001),.1); if(h<.001||t>dmax) break; } return Math.min(Math.max(res,0),1); } function light(cl,p,d) { var l=normalize(cl[0].map((x,y)=>x-p[y])); var n=norm(p); var sd=shadow(p,l,.1,50,4); var ao=occlude(p,n); var dl=(Math.min(Math.max(dot(n,l),0),1)*.6+.4)*(sd*.6+.4)*(ao*.4+.6); return cl[1].map(x=>dl*x); } function rot2d(x,z,ang) { var c=Math.cos(ang); var s=Math.sin(ang); return [c*x+s*z,c*z-s*x]; } function rot3d(x,r) { var t0=rot2d(x[1],x[2],r[0]); var t1=rot2d(x[0],t0[0],r[2]); var t2=rot2d(t0[1],t1[0],r[1]); return [t2[1],t1[1],t2[0]]; } function refract(iv,n,rei) { var k=1-rei*rei*(1-dot(iv,n)*dot(iv,n)); if(k<0) return 0; return iv.map((x,y)=>x*rei-(rei*dot(iv,n)+Math.sqrt(k))*n[y]); } function reflect(iv,n) { return iv.map((x,y)=>x-n[y]*dot(iv,n)*2); } function refl(np,rd,dsa) { var n=norm(np); var nr=reflect(rd,n); var nf=np.map((x,y)=>x+nr[y]*eps*7.5); var d=march(nf,nr,maxd*4,.01); return [d,nf,nr]; } function refr(np,rd,dsa) { var n=norm(np); var nrr=reflect(rd,n); var nfr=np.map((x,y)=>x+nrr[y]*eps*7.5); var dr=march(nfr,nrr,maxd*4,.01); var nr=refract(rd,n,1/dsa[1].ri); var d=march(np,nr,maxd*4,.01,0,dsa[1].id); return [d,np,nr,dr,nfr,nrr]; } function shade(ro,rd,d,dsa,np=5,lk=0,fg=0,sd) { if(np===5) np=ro.map((x,y)=>x+rd[y]*d); var dif=[0,0,0]; if(!sd) { for(var i=0;ix+td[y]); } } else dif=[1,1,1]; var fog=1-Math.pow(2,-fogintensity*d*d); fog=Math.min(Math.max(fog,0),1); var col=dsa[1].col(np); if(sd) fog=0; var fc=dif.map((x,y)=>mix(x*col[y],fogcolor[y],fog)); if(lk>=maxb) { var t=(normalize(rd)[1]+1)/2; return fogcolor.map((x,y)=>(1-t)+t*fogcolor[y]); } var trs=1-dot(normalize(ro),normalize(norm(np))); var mrs=(trs*trs*trs); if(dsa[1].t===REFLECTIVE&&lkx+ng[2][y]*ng[0][0]); return fc.map((x,y)=>mix(x,shade(ng[1],ng[2],ng[0][0],ng[0],nl,lk+1,fog,sd)[y],dsa[1].rf)).map((x,y)=>mix(x,fogcolor[y],fog)); } var t=(normalize(ng[2])[1]+1)/2; return fc.map((x,y)=>mix(x,fogcolor[y],fog)).map((x,y)=>mix(x,(1-t)+t*fogcolor[y],dsa[1].rf)); } if(dsa[1].t===REFRACTIVE&&lk(1-sa)+sa*fogcolor[y]); } if(ng[0].length===2) { var nl=ng[1].map((x,y)=>x+ng[2][y]*ng[0][0]); var nlr=ng[4].map((x,y)=>x+ng[5][y]*ng[3][0]); var cj=shade(ng[1],ng[2],ng[0][0],ng[0],nl,lk+1,fog,sd); return tc.map((x,y)=>mix(fc[y],mix(cj[y],x,trs),dsa[1].sh)).map((x,y)=>mix(x,fogcolor[y],fog)); } var t=(normalize(ng[2])[1]+1)/2; return tc.map((x,y)=>mix(x,fogcolor[y],fog)).map((x,y)=>mix(fc[y],mix(x,(1-t)+t*fogcolor[y],trs),dsa[1].sh)); } return fc.map((x,y)=>mix(x,col[y],mrs)*.1+x*.9).map((x,y)=>x+ambient[y]); } function main(co,sd) { var ro=pos; var rd=normalize([(co[0]-w/2)/h,(co[1]-h/2)/h-.4,1/Math.tan(fov/180*Math.PI/2)]); rd=rot3d(rd,orient); var dsa=march(ro,rd); var d=dsa[0]; if(d(1-t)+t*fogcolor[y]); } function dot(a,b) { return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]; } function normalize(a) { var len=Math.hypot(...a); return a.map(x=>x/len); } var sz; var movd=[0,0]; var touched; var drag=[]; var clcl=[0,0]; var mp=[0,0]; var rsa; document.addEventListener("ontouchstart" in document?"touchend":"mouseup",()=>{ drag=[]; selax=undefined; rsa=true; }); document.addEventListener("ontouchstart" in document?"touchmove":"mousemove",e=>{ if(e.changedTouches) e=e.changedTouches[0]; mp=[e.clientX,e.clientY]; if(!rsa&&(clcl.length!==0||movd.length!==0)) { clcl=[0,0]; movd=[e.clientX,e.clientY]; } if(!edt) return; if(drag.length!==0&&selax===undefined) { var mx=(e.clientX-drag[0])/sz*sens*Math.PI; var my=(e.clientY-drag[1])/sz*sens*Math.PI; camorient[0]-=my; camorient[1]-=mx; drag=[e.clientX,e.clientY]; } else if(drag.length!==0&&objects!==undefined) { var mx=(e.clientX-drag[0])/sz*sens*10; var my=(e.clientY-drag[1])/sz*sens*10; var nvd=0; for(var i=0;i{ if(e.changedTouches) e=e.changedTouches[0]; drag=[e.clientX,e.clientY]; clcl=[e.clientX,e.clientY]; }); var kc=[0,0]; var img; function loadTexture(elm) { dw=Math.floor(sz); dh=Math.floor(sz/(elm.width/elm.height)); if(elm.widthx-camfocus[y]*[1,-1,1][y]); var tv=rot3d(x,r.map((x,y)=>x*[1,-1,1][y])); tv=tv.map((x,y)=>x+campos[y]); if(tv[2]<=0) return; return tv; } function rot3dn(x,r) { var t0=rot2d(x[0],x[2],r[1]); var t1=rot2d(x[1],t0[1],r[0]); var t2=rot2d(t1[0],t0[0],r[2]); return [t2[1],t2[0],t1[1]]; } function line(a,b,c) { ctx.strokeStyle=c; ctx.beginPath(); ctx.moveTo(...a); ctx.lineTo(...b); ctx.stroke(); ctx.closePath(); } var camfocus=[0,0,0]; var campos=[0,1,4]; var camorient=[0,0,0]; var dbg=false; var edt=false; var selob; var selax; var rnde; var onr; var cntrt=performance.now(); var ls=cntrt; var dfds=0; var nw; var nh; function frame() { c=document.querySelector("canvas"); c.width=innerWidth; c.height=innerHeight; ctx=c.getContext("2d"); //-=-// sz=Math.floor(Math.min(innerWidth,innerHeight)); w=Math.floor(sz*quality); h=Math.floor(sz*quality); if(edt) { var kls=performance.now(); var cnda=[]; for(var i=0;ix*[1,-1,1][y]); var rol=objects[i].rt; var pl=conv3d(pol,camorient); if(pl===undefined) continue; var szc=1/Math.abs(pl[2]); ctx.font=Math.floor(szc*75)+"px monospace"; pl=proj(pl); if(Math.hypot(...clcl.map((x,y)=>x-pl[y]))Math.round(x/Math.PI*180))+")",pl[0],pl[1]); } cnda.sort((a,b)=>{ return conv3d(objects[a].p.map((x,y)=>x*[1,-1,1][y]),camorient)[2]-conv3d(objects[b].p.map((x,y)=>x*[1,-1,1][y]),camorient)[2]; }); if(cnda.length!==0) { var cds=objects[cnda[0]].p; camfocus=cds; selob=objects[cnda[0]].id; } if(selob) { var nvb=0; for(var i=0;ix*[1,-1,1][y]),camorient); var le=conv3d(objects[nvb].p.map((x,y)=>x*[1,-1,1][y]+rot3dn([-1,0,0],objects[nvb].rt)[y]),camorient); var up=conv3d(objects[nvb].p.map((x,y)=>x*[1,-1,1][y]+rot3dn([0,-1,0],objects[nvb].rt)[y]),camorient); var ri=conv3d(objects[nvb].p.map((x,y)=>x*[1,-1,1][y]+rot3dn([0,0,-1],objects[nvb].rt)[y]),camorient); pl=proj(pl); le=proj(le); ri=proj(ri); up=proj(up); ctx.strokeStyle="rgb(255,255,255)"; ctx.beginPath(); ctx.arc(...up,sz/100,0,2*Math.PI); ctx.stroke(); ctx.closePath();; line(pl,le,"rgb(255,69,0)"); line(pl,ri,"rgb(191,255,0)"); line(pl,up,"rgb(30,144,255)"); } var origin=[innerWidth-sz/6,innerHeight-sz/6]; var ed=2; var sid=[rot3dn([-1,0,0],camorient),rot3dn([0,-1,0],camorient),rot3dn([0,0,-1],camorient)]; var xs=sid[0];ls var sza=[innerWidth/6,innerHeight/6]; var cl=[]; xs=[xs[0]/(xs[2]+ed)*sza[0],xs[1]/(xs[2]+ed)*sza[1]]; var clk=Math.hypot(...mp.map((x,y)=>x-((xs[y]+origin[y])+origin[y])/2)); cl.push([clk,xs,0]); line(origin,xs.map((x,y)=>x+origin[y]),clk>Math.min(...sza.map(x=>x/4))?"rgb(255,69,0)":"rgb(195,9,0)"); var xs=sid[1]; xs=[xs[0]/(xs[2]+ed)*sza[0],xs[1]/(xs[2]+ed)*sza[1]]; var clk=Math.hypot(...mp.map((x,y)=>x-((xs[y]+origin[y])+origin[y])/2)) cl.push([clk,xs,1]); line(origin,xs.map((x,y)=>x+origin[y]),clk>Math.min(...sza.map(x=>x/4))?"rgb(30,144,255)":"rgb(0,84,195)"); var xs=sid[2]; xs=[xs[0]/(xs[2]+ed)*sza[0],xs[1]/(xs[2]+ed)*sza[1]]; var clk=Math.hypot(...mp.map((x,y)=>x-((xs[y]+origin[y])+origin[y])/2)); cl.push([clk,xs,2]); line(origin,xs.map((x,y)=>x+origin[y]),clk>Math.min(...sza.map(x=>x/4))?"rgb(191,255,0)":"rgb(131,195,0)"); cl.sort((a,b)=>{ return a[0]-b[0]; }); if(cl[0][0]<=Math.min(...sza.map(x=>x/4))&&Math.hypot(...clcl.map((x,y)=>x-((cl[0][1][y]+origin[y])+origin[y])/2))<=Math.min(...sza.map(x=>x/4))) { selax=cl[0][2]; } ctx.textAlign="left"; ctx.textBaseline="top"; ctx.fillStyle="white"; ctx.font=innerWidth/35+"px monospace"; ctx.fillText("Render mode",0,0); if(clcl[0]>0&&clcl[1]>0&&clcl[0]0&&clcl[1]>innerHeight-innerWidth/25&&clcl[0]w) { nw=(h/w)*sz; nh=sz; } nw=Math.floor(nw); nh=Math.floor(nh); ctx.imageSmoothingEnabled=false; if(fload) { fload=false; loadTexture(document.getElementsByTagName("img")[0]); loadTexture(document.getElementsByTagName("img")[1]); img=ctx.createImageData(w,h); for(var i=0;ix*Date.now()); } ls=performance.now(); } var kl=[Math.floor(w/100*ngd),Math.floor(h/100*ngd)]; if(rnde) { for(var fy=0;fyw-1||y>h-1) break; var ind=(x+(h-y-1)*w)*4; var col=main([x,y],dbg).map((x,y)=>img.data[ind+y]=Math.floor(x*255)); } } kc[0]+=kl[0]; dfds++; if(kc[0]>w-1) { kc[0]=0; kc[1]+=kl[1]; } if(kc[1]>h-1) { rnde=false; kc[1]=h*2; } } if(rnde) cntrt=performance.now(); ctx.putImageData(img,0,0); ctx.drawImage(c,0,0,w,h,0,0,nw,nh); ctx.strokeStyle="orangered"; ctx.strokeRect(kc[0]*(nw/w),nh-kc[1]*(nh/h)-kl[1]*(nh/h),kl[0]*(nw/w),kl[1]*(nh/h)); /*ctx.strokeRect(kc[0]*(nw/w),(nh-kc[1])*(nh/h)-kl[1]*(nh/h)-h*(nh/h),kl[0]*(nw/w),kl[1]*(nh/h));*/ ctx.fillStyle="lime"; ctx.textAlign="right"; ctx.textBaseline="top"; var sa=[kl[0]/ngd*100,kl[1]/ngd*100]; ctx.fillText(((cntrt-ls)/1000).toFixed(1)+" seconds - "+dfds+"/"+Math.ceil((w/100*ngd%1===0?sa[0]:(sa[0]+kl[0]))/kl[0]*(h/100*ngd%1===0?sa[1]:(sa[1]+kl[1]))/kl[1]),innerWidth,0); ctx.textAlign="left"; ctx.fillStyle="white"; ctx.font=innerWidth/35+"px monospace"; ctx.fillText("Edit mode",0,0); if(clcl[0]>0&&clcl[1]>0&&clcl[0]0&&clcl[1]>innerHeight-innerWidth/25&&clcl[0]innerWidth/5+innerWidth/20&&clcl[1]>innerHeight-innerWidth/25&&clcl[0]setInterval(frame),250)

mapping#gatz