';document.write(s);el=document.getElementById('gfx1');ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);el2=document.getElementById('gfx2');el2.width=w*ratio;el2.height=h*ratio;el2.style.width=w+"px";el2.style.height=h+"px";g2=el2.getContext("2d");g2.setTransform(ratio,0,0,ratio,0,0);my.varyClrQ=true;chgvaryClr();my.mid={x:w/2,y:h/2};my.prev={};chgBrush(0)
chgClring(0)
chgThk(0)
chgAlp(0)
chgClr(0)
my.brush=new Brush(g2);my.props=[['radius','rad'],['speed','w']];presetChoose(0);document.getElementById('table').innerHTML=getTableHTML();my.playQ=false;togglePlay();my.brush.chg()}
function presetChoose(n){var preset=my.presets[n];my.circs=[];for(var i=1;i';for(var j=0;j'+p[0]+'';}
s+='';for(var i=0;i';for(var j=0;j';}
s+='';}
s+='';s+='';return s;}
function tableSub(){my.circs.pop();document.getElementById('table').innerHTML=getTableHTML();}
function tableAdd(){my.circs.push(new Circ(10,1));document.getElementById('table').innerHTML=getTableHTML();}
function chgvaryClr(){my.varyClrQ=!my.varyClrQ;toggleBtn('varyClrBtn',my.varyClrQ);}
function toggleBtn(btn,onq){if(onq){document.getElementById(btn).classList.add("hi");document.getElementById(btn).classList.remove("lo");}else{document.getElementById(btn).classList.add("lo");document.getElementById(btn).classList.remove("hi");}}
function chgVal(i,j,val){var circ=my.circs[i];console.log("chgVala",i,j,val,circ);circ[my.props[j][1]]=parseFloat(val);updateString();}
function chgString(){var s=document.getElementById('string').value;console.log("chgString",s);var cs=s.split('],');my.circs=[];for(var i=0;i0)s+=',\n';s+='[';s+=c.rad+','+c.radAdd*1000+','+(c.radMult-1)*1000+','+c.w+','+c.wAdd*1000+','+(c.wMult-1)*1000;s+=']';}
var div=document.getElementById('string');div.value=s;}
function clear2(){console.log("clear2");g2.clearRect(0,0,el2.width,el2.height);g2.beginPath();my.brush.prevPos=null}
function go(){g2.clearRect(0,0,el2.width,el2.height);g2.strokeStyle='blue';g2.lineWidth=1;updateString();my.frames=0;}
function anim(){if(my.playQ){circsDraw();requestAnimationFrame(anim);}}
function circsDraw(){var len=0;var loopn=0;do{g.clearRect(0,0,el.width,el.height);g.strokeStyle='#bbb';g.fillStyle='#bbb';var mid={x:my.mid.x,y:my.mid.y};for(var i=0;iw){my.wavePts.pop();}
var g=g2;g.clearRect(0,0,el.width,el.height);g.strokeStyle='black';g.fillStyle='blue';g.beginPath();for(var i=0;i';for(var i=0;i${val}`}
s+='';return s;}
function getAlpHTML(){var s='';s+='
';for(var i=0;i'+(1-alp)*100+'%';}
s+='
';return s;}
function getClrHTML(){var s='';s+='
';for(var i=0;i'+clr[0]+'';}
s+='
';return s;}
function getDropdownHTML(opts,funcName,id){var s='';s+='';return s;}
function getPlayHTML(w){var s='';s+='';s+='';return s;}
function toggleSpiral(){my.spiralQ=!my.spiralQ;toggleBtn("spiralOnBtn",my.spiralQ);toggleBtn("spiralOffBtn",!my.spiralQ);my.wavePts=[];go(-1);}
function togglePlay(){var btn='playBtn';if(my.playQ){my.playQ=false;document.getElementById(btn).classList.add("play");document.getElementById(btn).classList.remove("pause");g.clearRect(0,0,el.width,el.height);}else{my.playQ=true;document.getElementById(btn).classList.add("pause");document.getElementById(btn).classList.remove("play");anim();}
if(my.colNo0){if(xx2)x2=x;if(yy2)y2=y;}}}
console.log("canvasGetExtents",can,x1,y1,x2,y2);return{left:x1,top:y1,wd:x2-x1,ht:y2-y1}}
function canvasCrop(c1,rect){var c2=document.createElement('canvas');c2.width=rect.wd;c2.height=rect.ht;var g2=c2.getContext("2d");g2.drawImage(c1,rect.left,rect.top,rect.wd,rect.ht,0,0,rect.wd,rect.ht);return c2;}
function canvasSave(typ){typ=(typ==undefined)?'png':typ;if(typ=='jpg')typ='jpeg';var can=document.getElementById('gfx2');var rect=canvasGetExtents(can);can=canvasCrop(can,rect);var dataUrl=can.toDataURL('image/'+typ);var win=window.open();win.document.write("");win.document.location="#";}
function canvasPrint(){var can=document.getElementById('gfx2');var rect=canvasGetExtents(can);can=canvasCrop(can,rect);var dataUrl=can.toDataURL('image/png');var win=window.open();win.document.write("");win.document.location="#";win.setTimeout(function(){win.focus();win.print();},500);}
class Clr{constructor(rr,gg,bb){this.clr=[rr<<0,gg<<0,bb<<0];this.dirs=[1,1,1];}
rand(){for(var i=0;i<3;i++){this.clr[i]=(Math.random()*256)<<0;}}
getRGB(){return 'rgb('+this.clr[0]+','+this.clr[1]+','+this.clr[2]+')';}
getHex(){var s='#'+hex2(this.clr[0])+hex2(this.clr[1])+hex2(this.clr[2]);return s;}
setHex(clr){var result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(clr);this.clr=result?[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)]:null;console.log('setHex',clr,this.clr)}
getBlend(clr2,factor){var clr=[]
for(var i=0;i<3;i++){clr[i]=parseInt(this.clr[i]*(1-factor)+clr2.clr[i]*factor)}
return '#'+hex2(clr[0])+hex2(clr[1])+hex2(clr[2]);}
toRGB(clr){return 'rgb('+clr[0]+','+clr[1]+','+clr[2]+')';}
randChg(speed=1){for(var i=0;i<3;i++){if(Math.random()<0.01)this.dirs[i]*=-1;this.clr[i]+=parseInt(this.dirs[i]*speed)
if(this.clr[i]>255){this.clr[i]=255-(this.clr[i]-255);this.dirs[i]=-1;}
if(this.clr[i]<0){this.clr[i]=0-this.clr[i];this.dirs[i]=1;}}}}
function hex2(n){var s=n.toString(16);if(s.length==1)s='0'+s;return s;}
class Brush{constructor(g){this.g=g
this.x=0;this.y=0;this.clr=0
this.thk=1
this.origin={x:this.x,y:this.y}
this.prevPos=null
this.hairWd=2
this.isStroke=false
this.chg()}
chg(){this.brushType=my.brushType
this.clring=my.clring
this.thk=my.thk
this.alp=my.alp
this.clr=my.penClr
console.log('Brush chg')
this.hairsNew();}
reset(){this.isStroke=false
this.x=this.origin.x
this.y=this.origin.y
console.log('Brush reset')
this.hairsNew();}
drawTo(x,y){var drawQ=true
if(this.prevPos==null){console.log('this.prevPos',this.prevPos)
this.prevPos={};drawQ=false}
this.prevPos.x=this.x;this.prevPos.y=this.y;this.x=x;this.y=y;if(my.varyClrQ){if(Math.random()<0.05){for(var i=0;i