| 1234567891011121314151617181920212223242526 |
- <!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Benoît was here!</title><style>body{margin:20px;overflow:hidden;text-align:center;}canvas{height:512px;width:512px;display:inline-block;background-color:yellow;}</style></head><body onresize="Z()"><div style="display:inline-block;text-align:center;"><canvas></canvas><div id="c"></div><span id="p"></span></div><script>
- D=document;M=Math;g=(x)=>D.querySelector(x);Q=(V=g('canvas')).getContext('2d');
- I=2048;U={};G=[-2,-2,4];R=G.slice();H=[];T=[];
- X=(x,y)=>[x/W*R[2]+R[0],y/W*R[2]+R[1]];
- p=(c,e)=>{b=c.getBoundingClientRect();return[e.x-b.left,e.y-b.top]}
- E=(v,x,y)=>v.addEventListener(x,y)
- E(V,"mousedown",(e)=>{e.preventDefault();U[0]=p(V,e)})
- E(V,"mouseup",(e)=>{e.preventDefault();U[1]=p(V,e);
- [x,y]=X(U[0][0],U[0][1]);[w,z]=X(U[1][0],U[1][1]);
- [x,y,w,z]=[M.min(x,w),M.min(y,z),M.max(x,w),M.max(y,z)]
- d=M.max(w-x,z-y);
- if(d==0){d=R[2];x-=d/4;y-=d/4;d/=2}
- H.push(R.slice());T=[];R=[x,y,d];A()})
- Z=()=>{V.height=V.width=W=512}
- Z();
- A=()=>{g('#p').innerHTML=`${R[0]}+${R[1]}i<br/>${R[0]+R[2]}+${R[1]+R[2]}i`;
- u=new Uint8ClampedArray(W*W*4);for(y=0;y<W;y++){for(x=0;x<W;x++){
- v=a=b=0;[c,d]=X(x,y);for(;v++<I&&a*a+b*b<=4;){[a,b]=[a*a-b*b+c,2*a*b+d]}
- b=4*(y*W+x);f=(v<I)*255/2;u[b]=f+f*M.cos(v/8);
- u[b+1]=f+f*M.cos(v/M.sqrt(15));u[b+2]=0;u[b+3]=255}}
- Q.putImageData(new ImageData(u,W,W),0,0)}
- [[()=>{R=G.slice();A()},"reset"],[()=>{if(x=H.pop()){T.push(R.slice());R=x}else{R=G.slice();}A()},"<<"],[()=>{if(x=T.pop()){H.push(R.slice());R=x}A()},">>"]].forEach((l)=>{E(s=D.createElement("button"),'click',l[0]);s.innerText=l[1];g('#c').appendChild(s)});A();
- </script></body></html>
|
