lkarch.org/tools/mathisfun/www.mathsisfun.com/data/images/grid3d.js

var w,h,i,el,ratio,g,parser;var my={xMin:-1,xMax:1,xN:30,yMin:-1,yMax:1,yN:30,zMin:-4,zMax:4,zFact:1,svgQ:false,svgBtnQ:false};function grid3dMain(shapeName){var version='0.92';this.shapeName=typeof shapeName!=='undefined'?shapeName:'grid';w=550;h=550;var examples=[['sin(x/5)-cos(y)',[-5,5,-5,5],1],['x^2-y^2',[-5,5,-5,5],0.1],['-x*y*e^(-x^2-y^2)',[-5,5,-5,5],20],['cos(abs(x)+abs(y))',[-5,5,-5,5],1],['abs(x)-abs(y)',[-5,5,-5,5],0.5],['(x^2+y^2)^0.5',[-5,5,-5,5],1],['cos(x^2+y^2-0.5)',[-1,1,-1,1],1],[]];var exNo=6;my.fn=examples[exNo][0];var limits=examples[exNo][1];my.xMin=limits[0];my.xMax=limits[1];my.yMin=limits[2];my.yMax=limits[3];my.zFact=examples[exNo][2];var s="";s+='<style>'
s+='.btn { display: inline-block; position: relative; text-align: center; margin: 2px; text-decoration: none; font: bold 14px/25px Arial, sans-serif; color: #268; border: 1px solid #88aaff; border-radius: 10px;cursor: pointer; background: linear-gradient(to top right, rgba(170,190,255,1) 0%, rgba(255,255,255,1) 100%); outline-style:none;}'
s+='.btn:hover { background: linear-gradient(to top, rgba(255,255,0,1) 0%, rgba(255,255,255,1) 100%); }'
s+='.yy { border: solid 2px #eeeeaa; background: linear-gradient(to top, rgba(255,220,130,1) 0%, rgba(255,255,255,1) 100%);  }'
s+='.hi { border: solid 2px #eeeeaa; background: linear-gradient(to top, rgba(130,220,255,1) 0%, rgba(255,255,255,1) 100%); }'
s+='.lo { border: solid 1px #888888; background: linear-gradient(to top, rgba(170,170,170,1) 0%, rgba(205,205,205,1) 100%);  }'
s+='</style>'
s+='<div style="position:relative; width:'+w+'px; height:'+h+'px; border: 1px solid blue; border-radius: 10px;  margin:auto; display:block;">';s+='<canvas id="canvasId" width="'+w+'" height="'+h+'" style="z-index:1;"></canvas>';s+='<div style="z-index:2; position: absolute; top: 3px; left: 3px;">';s+='<button id="dragBtn" onclick="toggleDrag()" style="z-index:2; " class="btn lo" >Spin</button>';s+='<button id="axesBtn" onclick="toggleAxes()" style="z-index:2; " class="btn lo" >Axes</button>';s+='<button id="explodeBtn" onclick="toggleExplode()" style="z-index:2; " class="btn lo" >Explode</button>';s+='<button id="resetBtn" onclick="reset()" style=" " class="btn" >Reset</button>';if(my.svgBtnQ)s+='<button id="svgBtn" onclick="SVGshow()" style=" " class="btn" >SVG</button>';s+='<button id="editBtn" onclick="editpop()" style=" " class="btn" >Edit</button>';s+='</div>';s+='<div style="position: absolute; top: 3px; right: 5px; font: 18px Arial;">';s+="Coloring: ";s+=getDropdownHTML(['Multi','Seethru','Two','Glass','PureGlass','Shaded'],'clrChg','clrType');s+='</div>';s+='</div>';s+='<div style="position:relative; ">';s+='<div id="editpop" style="position:absolute; left:-450px; top:-440px; padding: 5px; border: 1px solid red; border-radius: 9px; background-color: #88aaff; box-shadow: 10px 10px 5px 0px rgba(40,40,40,0.75); z-index:1; transition: all linear 0.3s; opacity:0; ">';s+='<textarea  id="funbox" value="ddd" style="width: 400px; height: 80px; font: 18px Arial; border: 1px solid red; border-radius: 9px; background-color: #eeeeff; display: block; text-align:center;">';s+='</textarea >';my.edits=[['xMin',my.xMin],['xMax',my.xMax],['xN',my.xN],['yMin',my.yMin],['yMax',my.yMax],['yN',my.yN],['zFact',my.zFact]];for(var i=0;i<my.edits.length;i++){var e=my.edits[i];s+='<span style="display: inline-block; font:16px Arial; width:60px; text-align:right;">'+e[0]+':</span> ';s+='<input type="text" id="'+e[0]+'" name="'+e[0]+'" value="'+e[1]+'" style="display: inline-block; width: 60px; height: 18px; text-align: center; padding: 2px; border-radius: 5px; font-size: 14px; overflow: hidden;" onchange="chgVal('+i+',this.value)" />';if(!((i+1)%3))s+='<br>';}
s+='<br>';s+='<div style="float:right; margin: 0 0 5px 10px;">';s+='<button onclick="editYes()" style="z-index:2; font: 22px Arial;" class="btn" >&#x2714;</button>';s+='</div>';s+='</div>';s+='<div style="font: 11px Arial; color: #6600cc; position:absolute; left:5px; bottom:-14px;">&copy; 2020 MathsIsFun.com  v'+version+'</div>';s+='</div>';document.write(s);el=document.getElementById('canvasId');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);parser=new Parser();this.transMat=[[1,0,0],[0,1,0],[0,0,-1],[0,0,0]];this.f=500;this.shapes=[];this.clrs=["#ff0000","#0000ff","#ff9900","#00ff00","#ffff00","#660066","#99ff00","#0099ff","#00ff99","#9900ff","#ff0099","#006666","#666600","#990000","#009999","#999900","#003399","#ff00ff","#993333","#330099"];this.dragQ=false;this.explodeQ=false;this.axesQ=false;dragQ=false;draggingQ=false;prevmouseX=0;prevmouseY=0;svg=new SVG();this.poly=new Poly();xAngle=2;yAngle=4;zAngle=0;el.addEventListener('touchstart',ontouchstart,false);el.addEventListener('touchmove',ontouchmove,false);el.addEventListener('mousedown',onmouseDown,false);el.addEventListener('mousemove',onmouseMove,false);el.addEventListener("mouseup",onmouseUp,false);init();}
function chgVal(i,val){var name=my.edits[i][0];if(name=='xN'||name=='yN'){val=parseInt(val);if(val<1)val=1;if(val>100)val=100;}
my[name]=parseFloat(val);}
function reset(){this.transMat=[[1,0,0],[0,1,0],[0,0,-1],[0,0,0]];g.clearRect(0,0,el.width,el.height);drawShapes();}
function ontouchstart(evt){draggingQ=true;var touch=evt.targetTouches[0];var bRect=el.getBoundingClientRect();prevmouseX=(touch.clientX-bRect.left)*(el.width/ratio/bRect.width);prevmouseY=(touch.clientY-bRect.top)*(el.height/ratio/bRect.height);}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onmouseMove(evt);evt.preventDefault();}
function onmouseDown(evt){draggingQ=true;prevmouseX=mouseX;prevmouseY=mouseY;}
function onmouseUp(evt){draggingQ=false;}
function onmouseMove(evt){var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);if(dragQ){if(draggingQ){settransMat(-(prevmouseY-mouseY)*3,(prevmouseX-mouseX)*3,0,transMat);prevmouseX=mouseX;prevmouseY=mouseY;g.clearRect(0,0,el.width,el.height);drawShapes();}}else{yAngle=-(mouseX-w/2)/25;xAngle=(mouseY-h/2)/25;}}
function editpop(){console.log("editpop");var pop=document.getElementById('editpop');pop.style.transitionDuration="0.3s";pop.style.opacity=1;pop.style.zIndex=12;pop.style.left='100px';document.getElementById('funbox').value=my.fn;}
function editYes(){var pop=document.getElementById('editpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-500px';my.fn=document.getElementById('funbox').value;console.log("editYes",my.fn);setShapesFromPoly();g.clearRect(0,0,el.width,el.height);drawShapes();}
function editNo(){var pop=document.getElementById('editpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-500px';}
function toggleDrag(){dragQ=!dragQ;toggleBtn("dragBtn",dragQ);if(dragQ){document.getElementById("dragBtn").innerHTML='Drag';}else{document.getElementById("dragBtn").innerHTML='Spin';}}
function toggleExplode(){this.explodeQ=!this.explodeQ;toggleBtn("explodeBtn",this.explodeQ);restart();}
function toggleAxes(){this.axesQ=!this.axesQ;toggleBtn("axesBtn",this.axesQ);restart();}
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 getDropdownHTML(opts,funcName,id){var s='';s+='<select id="'+id+'" style="font: 18px Arial; color: #6600cc; background: rgba(200,220,256,0.7); padding: 1px;" onchange="'+funcName+'()">';for(var i=0;i<opts.length;i++){var idStr=id+i;var chkStr=i==5?'selected':'';s+='<option id="'+idStr+'" value="'+opts[i]+'" style="height:18px;" '+chkStr+' >'+opts[i]+'</option>';}
s+='</select>';return s;}
function clrChg(){var el=document.getElementById('clrType');if(el.selectedIndex==-1)
return null;var t=el.options[el.selectedIndex].text;setClrs(t);g.clearRect(0,0,el.width,el.height);drawShapes();}
function getClrType(){if(this.curvyQ||this.flatyQ){if(this.shapeName=='plane'){return "Glass";}else{return "Seethru";}}else{var div=document.getElementById('clrType');if(div.selectedIndex==-1)return 'Multi';return div.options[div.selectedIndex].text;}}
function init(){shapes=[];poly.shapeType=shapeName;setShapesFromPoly();settransMat(200,50,0,transMat);g.clearRect(0,0,el.width,el.height);drawShapes();this.frameNo=0;animate();}
function restart(){shapes=[];poly.shapeType=shapeName;setShapesFromPoly();g.clearRect(0,0,el.width,el.height);drawShapes();}
function animate(){this.frameNo++;if(dragQ){}else{settransMat(xAngle,yAngle,zAngle,transMat);g.clearRect(0,0,el.width,el.height);drawShapes();}
if(this.frameNo<1e8){requestAnimationFrame(animate);}}
function drawShapes(){var prevDepth=0;var sortNeededQ=false;for(var i=0,len=shapes.length;i<len;i++){var shape=shapes[i];shape.drawsurface(false,"N");if(i>0){if(shape.depth<prevDepth){sortNeededQ=true;}}
prevDepth=shape.depth;}
if(sortNeededQ){shapes.sort(compareDepth);}
if(this.axesQ){var scale=350/(my.xMax-my.xMin);var C=[[my.xMin*scale,0,0],[my.xMax*scale,0,0],[0,my.yMin*scale,0],[0,my.yMax*scale,0],[0,0,my.zMin*scale],[0,0,my.zMax*scale]];var ax=new Shape3D();ax.transMat=transMat;ax.f=this.f;ax.setPts(C);var ax2d=ax.to2d();g.lineWidth=1;var clrs=['#0000ff','#ff0000','#555']
for(var i=0;i<3;i++){g.fillStyle=clrs[i];g.strokeStyle=clrs[i];g.beginPath();var pt0=ax2d[i*2];var pt1=ax2d[i*2+1];g.moveTo(pt0.x,pt0.y);g.lineTo(pt1.x,pt1.y);var ang=Math.atan2(pt0.x-pt1.x,pt0.y-pt1.y);g.drawArrow(pt1.x,pt1.y,15,2,20,10,ang+Math.PI/2,10,false);g.stroke();g.fill();}}}
function compareDepth(a,b){if(a.depth<b.depth)return-1;return 1;}
function setShapesFromPoly(){shapes=[];var C=poly.getSolid();var i=0;while(i<C.length){var surf=C[i];addShape3D("surface",coords2Lines(surf,poly.scale),1,'#ffffff','rgba(0,0,255,0.3)');i++;}
setClrs(getClrType());}
function coords2Lines(surf,Scale){var P=[];var midPt=[0,0,0];for(var i=0;i<surf.length;i++){if(i<surf.length-1){var tonum=i+1;}else{tonum=0;}
P[i]=[];if(surf[i]==undefined){console.log("Error surface ="+i,surf[i]);}else{for(var j=0;j<3;j++){P[i][j]=surf[i][j]*Scale;if(explodeQ)midPt[j]+=P[i][j];}}}
if(explodeQ){for(var j=0;j<3;j++){midPt[j]/=surf.length;}
for(i=0;i<surf.length;i++){for(j=0;j<3;j++){P[i][j]+=midPt[j]/2;}}}
return P;}
function addShape3D(shapeType,pointarray,lineweight,lineClr,fillClr){var shape=new Shape3D;shape.transMat=transMat;shape.f=this.f;shape.setPts(pointarray);shape.shapeType=shapeType;shape.lineweight=lineweight;shape.lineClr=lineClr;shape.fillClr=fillClr;shapes.push(shape);}
function settransMat(x,y,z,M){var vectorLength=Math.sqrt(x*x+y*y+z*z);if(vectorLength>.0001){x/=vectorLength;y/=vectorLength;z/=vectorLength;var Theta=vectorLength/500;var cosT=Math.cos(Theta);var sinT=Math.sin(Theta);var tanT=1-cosT;var T=[[],[],[]];T[0][0]=tanT*x*x+cosT;T[0][1]=tanT*x*y-sinT*z;T[0][2]=tanT*x*z+sinT*y;T[1][0]=tanT*x*y+sinT*z;T[1][1]=tanT*y*y+cosT;T[1][2]=tanT*y*z-sinT*x;T[2][0]=tanT*x*z-sinT*y;T[2][1]=tanT*y*z+sinT*x;T[2][2]=tanT*z*z+cosT;transMat=matMatMult(T,M);}}
function matMatMult(A,B){var C=[[],[],[]];C[0][0]=A[0][0]*B[0][0]+A[0][1]*B[1][0]+A[0][2]*B[2][0];C[0][1]=A[0][0]*B[0][1]+A[0][1]*B[1][1]+A[0][2]*B[2][1];C[0][2]=A[0][0]*B[0][2]+A[0][1]*B[1][2]+A[0][2]*B[2][2];C[1][0]=A[1][0]*B[0][0]+A[1][1]*B[1][0]+A[1][2]*B[2][0];C[1][1]=A[1][0]*B[0][1]+A[1][1]*B[1][1]+A[1][2]*B[2][1];C[1][2]=A[1][0]*B[0][2]+A[1][1]*B[1][2]+A[1][2]*B[2][2];C[2][0]=A[2][0]*B[0][0]+A[2][1]*B[1][0]+A[2][2]*B[2][0];C[2][1]=A[2][0]*B[0][1]+A[2][1]*B[1][1]+A[2][2]*B[2][1];C[2][2]=A[2][0]*B[0][2]+A[2][1]*B[1][2]+A[2][2]*B[2][2];return C;}
function setClrs(clrMethod){for(var i=0;i<shapes.length;i++){var shape=shapes[i];shape.clrMethod=clrMethod;switch(clrMethod){case "Multi":shape.fillClr=convertHexClr(clrs[i%clrs.length],0.7);break;case "Two":shape.fillClr=convertHexClr(clrs[i%2],0.8);break;case "Smooth":var FromMiddle=parseInt(Math.abs(shapes.length/2-i));var blu=FromMiddle*8+1;var ccc=rgb2hex([blu,128,blu]);shape.fillClr=ccc;break;case "Glass":shape.doShading();break;case "PureGlass":var fromMiddle=Math.abs(0.5-i/shapes.length);var blu=parseInt(fromMiddle*512);shape.fillClr='rgba('+128+','+128+','+blu+','+0.5+')';break;case "Seethru":case "Shaded":shape.doShading();break;default:}}}
function Poly(){this.shapeType='cube';this.shapeSource='calc';this.scale=90;}
Poly.prototype.getSolid=function(){parser.newParse(my.fn);var fact=my.zFact;my.zMin=Number.POSITIVE_INFINITY;my.zMax=Number.NEGATIVE_INFINITY;var pts=[];my.xDelta=(my.xMax-my.xMin)/my.xN;my.yDelta=(my.yMax-my.yMin)/my.yN;for(i=0;i<=my.xN;i++){var x=my.xMin+i*my.xDelta;for(j=0;j<=my.yN;j++){var y=my.yMin+j*my.yDelta;var n=j*(my.xN+1)+i;parser.setVarVal("x",x);parser.setVarVal("y",y);var z=parser.getVal()*fact;if(z<my.zMin)my.zMin=z;if(z>my.zMax)my.zMax=z;pts[n]=[x,y,z];}}
my.nExtra=pts.length;var C=[];for(i=0;i<my.xN;i++){for(j=0;j<my.yN;j++){var n0=j*(my.xN+1)+i;var n1=j*(my.xN+1)+i+1;var n2=(j+1)*(my.xN+1)+i+1;var n3=(j+1)*(my.xN+1)+i;C.push([pts[n0],pts[n1],pts[n2],pts[n3]]);}}
this.scale=350/(my.xMax-my.xMin);return C;}
function Shape3D(){var rotSelfMatrix=[[1,0,0],[0,1,0],[0,0,1],[0,0,0]];var rotSelfQ=false;this.velQ=false;this.lt=w/2;this.tp=h/2;this.eye=new Pt3d();this.eye.setMe(0,0,400);this.pts=[];this.lineweight;this.lineClr='white';this.fillClr='rgba(255,0,0,0.9)';this.svgClr='rgb(255,0,0)';this.svgAlpha=1;this.shapeType="surf";this.clrMethod="None";this.depth=0;this.showPtsQ=false;this.centroid=new Pt3d();this.vel3d=new Pt3d();this.hideCount=0;}
Shape3D.prototype.setPts=function(apts){this.pts=[];for(var i=0;i<apts.length;i++){var p3d=new Pt3d();p3d.setMe(apts[i][0],apts[i][1],apts[i][2]);this.pts.push(p3d);}
this.calcCentroid();};Shape3D.prototype.doShading=function(){var alpha=0.8;switch(this.clrMethod){case 'Glass':alpha=0.5;break;case 'PureGlass':alpha=0.6;break;case 'Shaded':alpha=1;break;default:}
var angle=this.getNormalAngle(this.pts,0);var dark=(1-angle/Math.PI);var red=(dark*255>>0)+1;var grn=(dark*255>>0)+1;angle=this.getNormalAngle(this.pts,1);dark=(1-angle/Math.PI);var blu=(dark*255>>0)+1;this.fillClr='rgba('+red+','+grn+','+blu+','+alpha+')';this.svgClr='rgb('+red+','+grn+','+blu+')';this.svgAlpha=alpha;}
Shape3D.prototype.getNormalAngle=function(pts,dimN){var a=[pts[1].x-pts[0].x,pts[1].y-pts[0].y,pts[1].z-pts[0].z];var b=[pts[2].x-pts[1].x,pts[2].y-pts[1].y,pts[2].z-pts[1].z];var cross=[a[1]*b[2]-a[2]*b[1],a[2]*b[0]-a[0]*b[2],a[0]*b[1]-a[1]*b[0]];var mag=Math.sqrt(cross[0]*cross[0]+cross[1]*cross[1]+cross[2]*cross[2]);var theta=Math.acos(cross[dimN]/mag);return theta;}
Shape3D.prototype.calcCentroid=function(){centroid=new Pt3d();for(var i=0;i<this.pts.length;i++){centroid.addPtMe(this.pts[i]);}
if(this.pts.length>0){centroid.x/=this.pts.length;centroid.y/=this.pts.length;centroid.z/=this.pts.length;}};Shape3D.prototype.to2d=function(){var xsum=0;var ysum=0;var zsum=0;var clips=[];var zMin=Number.MAX_VALUE;var zMax=-Number.MAX_VALUE;var i=0;var ptRot;while(i<this.pts.length){var pt3d=this.pts[i];ptRot=this.matPtMult(transMat,pt3d);clips.push(ptRot);zMin=Math.min(zMin,ptRot.z);zMax=Math.max(zMax,ptRot.z);xsum+=ptRot.x;ysum+=ptRot.y;zsum+=ptRot.z;i++;}
var pt2s=[];i=0;while(i<clips.length){var p3d=clips[i];var pt=new Pt();pt.x=this.lt+(this.eye.z*(p3d.x))/(this.eye.z+p3d.z);pt.y=this.tp+(this.eye.z*(p3d.y))/(this.eye.z+p3d.z);pt2s.push(pt);i++;}
return pt2s;};Shape3D.prototype.drawsurface=function(aboutEyeQ,viewType){var xsum=0;var ysum=0;var zsum=0;var clips=[];var zMin=Number.MAX_VALUE;var zMax=-Number.MAX_VALUE;var i=0;var ptRot;while(i<this.pts.length){var pt3d=this.pts[i];if(this.aboutEyeQ){}else{ptRot=this.matPtMult(transMat,pt3d);clips.push(ptRot);}
zMin=Math.min(zMin,ptRot.z);zMax=Math.max(zMax,ptRot.z);xsum+=ptRot.x;ysum+=ptRot.y;zsum+=ptRot.z;i++;}
var pt2s=[];i=0;while(i<clips.length){var p3d=clips[i];var pt=new Pt();pt.x=this.lt+(this.eye.z*(p3d.x))/(this.eye.z+p3d.z);pt.y=this.tp+(this.eye.z*(p3d.y))/(this.eye.z+p3d.z);pt2s.push(pt);i++;}
var fillQ=true;var strokeQ=true;switch(this.clrMethod){case "Multi":strokeQ=false;g.fillStyle=this.fillClr;break;case "Glass":g.lineWidth=0.1;g.strokeStyle='#000000';g.fillStyle=this.fillClr;break;case "PureGlass":g.lineWidth=0.1;g.strokeStyle='#ffffff';g.fillStyle=this.fillClr;break;case "Beams":g.lineWidth=18;g.strokeStyle='#444444';g.fillStyle='rgba(250,250,250,0.2)';g.lineJoin="round";break;case "Seethru":g.fillStyle=this.fillClr;strokeQ=false;break;case "Shaded":g.fillStyle=this.fillClr;strokeQ=false;break;default:g.lineWidth=1;g.strokeStyle=this.lineClr;g.fillStyle=this.fillClr;}
if(pt2s.length>2){g.beginPath();for(i=0,len=pt2s.length;i<len;i++){var pt=pt2s[i];if(i==0){g.moveTo(pt.x,pt.y);}else{g.lineTo(pt.x,pt.y);}}
g.closePath();if(strokeQ)g.stroke();if(fillQ)g.fill();if(my.svgQ){my.svg.lineClr=g.strokeStyle;my.svg.fillClr=g.fillStyle;my.svg.fillAlpha=0.8;my.svg.polygon(pt2s);}}
var iRecip=1/(pt2s.length+1);xsum*=iRecip;ysum*=iRecip;zsum=f-zsum*iRecip;this.depth=(xsum*xsum+ysum*ysum+zsum*zsum)/10000;};Shape3D.prototype.matPtMult=function(A,B){var C=new Pt3d();C.x=A[0][0]*B.x+A[0][1]*B.y+A[0][2]*B.z;C.y=A[1][0]*B.x+A[1][1]*B.y+A[1][2]*B.z;C.z=A[2][0]*B.x+A[2][1]*B.y+A[2][2]*B.z;return C;};function Pt(){this.x=0;this.y=0;}
function Pt3d(){this.x=0;this.y=0;this.z=0;}
Pt3d.prototype.setMe=function(x,y,z){this.x=x;this.y=y;this.z=z;};Pt3d.prototype.addPtMe=function(pt3d,factor){factor=typeof factor!=='undefined'?factor:1;if(factor==1){this.x+=pt3d.x;this.y+=pt3d.y;this.z+=pt3d.z;}else{this.x+=pt3d.x*factor;this.y+=pt3d.y*factor;this.z+=pt3d.z*factor;}};function convertHexClr(hex,opacity){hex=hex.replace('#','');var r=parseInt(hex.substring(0,2),16);var g=parseInt(hex.substring(2,4),16);var b=parseInt(hex.substring(4,6),16);return 'rgba('+r+','+g+','+b+','+opacity+')';}
function rgb2hex(color){var hex=[];for(var i=0;i<3;i++){hex.push(color[i].toString(16));if(hex[i].length<2){hex[i]="0"+hex[i];}}
return "#"+hex[0]+hex[1]+hex[2];}
function Parser(){this.operators="+-*(/),^.";this.rootNode;this.tempNode=[];this.Variable="x";this.errMsg="";this.radiansQ=true;this.vals=[];for(var i=0;i<26;i++){this.vals[i]=0;}
this.reset();}
Parser.prototype.setVarVal=function(varName,newVal){switch(varName){case "x":this.vals[23]=newVal;break;case "y":this.vals[24]=newVal;break;case "z":this.vals[25]=newVal;break;default:if(varName.length==1){this.vals[varName.charCodeAt(0)-'a'.charCodeAt(0)]=newVal;}}};Parser.prototype.getVal=function(){return(this.rootNode.walk(this.vals));};Parser.prototype.newParse=function(s){this.reset();s=s.split(" ").join("");s=s.split("[").join("(");s=s.split("]").join(")");s=s.replace(/\u2212/g,'-');s=s.replace(/\u00F7/g,'../index.html');s=s.replace(/\u00D7/g,'*');s=s.replace(/\u00B2/g,'^2');s=s.replace(/\u00B3/g,'^3');s=s.replace(/\u221a/g,'sqrt');s=this.fixParentheses(s);s=this.fixUnaryMinus(s);s=this.fixImplicitMultply(s);this.rootNode=this.parse(s);};Parser.prototype.fixParentheses=function(s){var sttParCount=0;var endParCount=0;for(var i=0;i<s.length;i++){if(s.charAt(i)=="(")sttParCount++;if(s.charAt(i)==")")endParCount++;}
while(sttParCount<endParCount){s="("+s;sttParCount++;}
while(endParCount<sttParCount){s+=")";endParCount++;}
return(s);};Parser.prototype.fixUnaryMinus=function(s){var x=s+"\n";var y="";var OpenQ=false;var prevType="(";var thisType="";for(var i=0;i<s.length;i++){var c=s.charAt(i);if(c>="0"&&c<="9"){thisType="N";}else{if(this.operators.indexOf(c)>=0){if(c=="-"){thisType="-";}else{thisType="O";}}else{if(c=="."||c==this.Variable){thisType="N";}else{thisType="C";}}
if(c=="("){thisType="(";}
if(c==")"){thisType=")";}}
x+=thisType;if(prevType=="("&&thisType=="-"){y+="0";}
if(OpenQ){switch(thisType){case "N":break;default:y+=")";OpenQ=false;}}
if(prevType=="O"&&thisType=="-"){y+="(0";OpenQ=true;}
y+=c;prevType=thisType;}
if(OpenQ){y+=")";OpenQ=false;}
return(y);};Parser.prototype.fixImplicitMultply=function(s){var x=s+"\n";var y="";var prevType="?";var prevName="";var thisType="?";var thisName="";for(var i=0;i<s.length;i++){var c=s.charAt(i);if(c>="0"&&c<="9"){thisType="N";}else{if(this.operators.indexOf(c)>=0){thisType="O";thisName="";}else{thisType="C";thisName+=c;}
if(c=="("){thisType="(";}
if(c==")"){thisType=")";}}
x+=thisType;if(prevType=="N"&&thisType=="C"){y+="*";thisName="";}
if(prevType=="N"&&thisType=="("){y+="*";}
if(prevType==")"&&thisType=="("){y+="*";}
if(thisType=="("){switch(prevName){case "i":case "pi":case "e":case "a":case this.Variable:y+="*";break;}}
y+=c;prevType=thisType;prevName=thisName;}
return(y);};Parser.prototype.reset=function(){this.tempNode=[];this.errMsg="";};Parser.prototype.parse=function(s){if(s==""){return new MathNode("real","0",this.radiansQ);}
if(isNumeric(s)){return new MathNode("real",s,this.radiansQ);}
if(s.charAt(0)=="$"){if(isNumeric(s.substr(1))){return this.tempNode[Number(s.substr(1))];}}
var sLo=s.toLowerCase();if(sLo.length==1){if(sLo>="a"&&sLo<="z"){return new MathNode("var",sLo,this.radiansQ);}}
switch(sLo){case "pi":return new MathNode("var",sLo,this.radiansQ);break;}
var bracStt=s.lastIndexOf("(");if(bracStt>-1){var bracEnd=s.indexOf(")",bracStt);if(bracEnd<0){this.errMsg+="Missing ')'\n";return new MathNode("real","0",this.radiansQ);}
var isParam=false;if(bracStt==0){isParam=false;}else{var prefix=s.substr(bracStt-1,1);isParam=this.operators.indexOf(prefix)<=-1;}
if(!isParam){this.tempNode.push(this.parse(s.substr(bracStt+1,bracEnd-bracStt-1)));return this.parse(s.substr(0,bracStt)+"$"+(this.tempNode.length-1).toString()+s.substr(bracEnd+1,s.length-bracEnd-1));}else{var startM=-1;for(var u=bracStt-1;u>-1;u--){var found=this.operators.indexOf(s.substr(u,1));if(found>-1){startM=u;break;}}
var nnew=new MathNode("func",s.substr(startM+1,bracStt-1-startM),this.radiansQ);nnew.addchild(this.parse(s.substr(bracStt+1,bracEnd-bracStt-1)));this.tempNode.push(nnew);return this.parse(s.substr(0,startM+1)+"$"+(this.tempNode.length-1).toString()+s.substr(bracEnd+1,s.length-bracEnd-1));}}
var k;var k1=s.lastIndexOf("+");var k2=s.lastIndexOf("-");if(k1>-1||k2>-1){if(k1>k2){k=k1;var nnew=new MathNode("op","add",this.radiansQ);nnew.addchild(this.parse(s.substr(0,k)));nnew.addchild(this.parse(s.substr(k+1,s.length-k-1)));return nnew;}else{k=k2;nnew=new MathNode("op","sub",this.radiansQ);nnew.addchild(this.parse(s.substr(0,k)));nnew.addchild(this.parse(s.substr(k+1,s.length-k-1)));return nnew;}}
k1=s.lastIndexOf("*");k2=s.lastIndexOf("../index.html");if(k1>-1||k2>-1){if(k1>k2){k=k1;var nnew=new MathNode("op","mult",this.radiansQ);nnew.addchild(this.parse(s.substr(0,k)));nnew.addchild(this.parse(s.substr(k+1,s.length-k-1)));return nnew;}else{k=k2;var nnew=new MathNode("op","div",this.radiansQ);nnew.addchild(this.parse(s.substr(0,k)));nnew.addchild(this.parse(s.substr(k+1,s.length-k-1)));return nnew;}}
k=s.indexOf("^");if(k>-1){var nnew=new MathNode("op","pow",this.radiansQ);nnew.addchild(this.parse(s.substr(0,k)));nnew.addchild(this.parse(s.substr(k+1,s.length-k-1)));return nnew;}
if(isNumeric(s)){return new MathNode("real",s,this.radiansQ);}else{if(s.length==0){return new MathNode("real","0",this.radiansQ);}else{this.errMsg+="'"+s+"' is not a number.\n";return new MathNode("real","0",this.radiansQ);}}};function MathNode(typ,val,radQ){this.tREAL=0;this.tVAR=1;this.tOP=2;this.tFUNC=3;this.radiansQ=true;this.setNew(typ,val,radQ);}
MathNode.prototype.setNew=function(typ,val,radQ){this.radiansQ=typeof radQ!=='undefined'?radQ:true;this.clear();switch(typ){case "real":this.typ=this.tREAL;this.r=Number(val);break;case "var":this.typ=this.tVAR;this.v=val;break;case "op":this.typ=this.tOP;this.op=val;break;case "func":this.typ=this.tFUNC;this.op=val;break;}
return(this);};MathNode.prototype.clear=function(){this.r=1;this.v="";this.op="";this.child=[];this.childCount=0;};MathNode.prototype.addchild=function(n){this.child.push(n);this.childCount++;return(this.child[this.child.length-1]);};MathNode.prototype.getLevelsHigh=function(){var lvl=0;for(var i=0;i<this.childCount;i++){lvl=Math.max(lvl,this.child[i].getLevelsHigh());}
return(lvl+1);};MathNode.prototype.isLeaf=function(){return(this.childCount==0);};MathNode.prototype.getLastBranch=function(){if(this.isLeaf()){return(null);}
for(var i=0;i<this.childCount;i++){if(!this.child[i].isLeaf()){return(this.child[i].getLastBranch());}}
return(this);};MathNode.prototype.fmt=function(htmlQ){htmlQ=typeof htmlQ!=='undefined'?htmlQ:true;var s="";if(this.typ==this.tOP){switch(this.op.toLowerCase()){case "add":s="+";break;case "sub":s=htmlQ?"&minus;":"-";break;case "mult":s=htmlQ?"&times;":"x";break;case "div":s=htmlQ?"&divide;":"/";break;case "pow":s="^";break;default:s=this.op;}}
if(this.typ==this.tREAL){s=this.r.toString();}
if(this.typ==this.tVAR){if(this.r==1){s=this.v;}else{if(this.r!=0){s=this.r+this.v;}}}
if(this.typ==this.tFUNC){s=this.op;}
return s;};MathNode.prototype.walkFmt=function(){var s=this.walkFmta(true,"");s=s.replace("Infinity","Undefined");return s;};MathNode.prototype.walkFmta=function(noparq,prevop){var s="";if(this.childCount>0){var parq=false;if(this.op=="add")parq=true;if(this.op=="sub")parq=true;if(prevop=="div")parq=true;if(noparq)parq=false;if(this.typ==this.tFUNC)parq=true;if(this.typ==this.tOP){}else{s+=this.fmt(true);}
if(parq)s+="(";for(var i=0;i<this.childCount;i++){if(this.typ==this.tOP&&i>0)s+=this.fmt();s+=this.child[i].walkFmta(false,this.op);if(this.typ==this.tFUNC||(parq&&i>0)){s+=")";}}}else{s+=this.fmt();if(prevop=="sin"||prevop=="cos"||prevop=="tan"){if(this.radiansQ){s+=" rad";}else{s+="&deg;";}}}
return s;};MathNode.prototype.walkNodesFmt=function(level){var s="";for(var i=0;i<level;i++){s+="|   ";}
s+=this.fmt();s+="\n";for(i=0;i<this.childCount;i++){s+=this.child[i].walkNodesFmt(level+1);}
return s;};MathNode.prototype.walk=function(vals){if(this.typ==this.tREAL)return(this.r);if(this.typ==this.tVAR){switch(this.v){case "x":return(vals[23]);case "y":return(vals[24]);case "z":return(vals[25]);case "pi":return(Math.PI);case "e":return(Math.exp(1));case "a":return(vals[0]);case "n":return(vals[13]);default:return(0);}}
if(this.typ==this.tOP){var val=0;for(var i=0;i<this.childCount;i++){var val2=0;if(this.child[i]!=null)
val2=this.child[i].walk(vals);if(i==0){val=val2;}else{switch(this.op){case "add":val+=val2;break;case "sub":val-=val2;break;case "mult":val*=val2;break;case "div":val/=val2;break;case "pow":if(val2==2){val=val*val;}else{val=Math.pow(val,val2);}
break;default:}}}
return val;}
if(this.typ==this.tFUNC){var lhs=this.child[0].walk(vals);var angleFact=1;if(!this.radiansQ)angleFact=180/Math.PI;var val=0;switch(this.op){case "sin":val=Math.sin(lhs/angleFact);break;case "cos":val=Math.cos(lhs/angleFact);break;case "tan":val=Math.tan(lhs/angleFact);break;case "asin":val=Math.asin(lhs)*angleFact;break;case "acos":val=Math.acos(lhs)*angleFact;break;case "atan":val=Math.atan(lhs)*angleFact;break;case "sinh":val=(Math.exp(lhs)-Math.exp(-lhs))/2;break;case "cosh":val=(Math.exp(lhs)+Math.exp(-lhs))/2;break;case "tanh":val=(Math.exp(lhs)-Math.exp(-lhs))/(Math.exp(lhs)+Math.exp(-lhs));break;case "exp":val=Math.exp(lhs);break;case "log":val=Math.log(lhs)*Math.LOG10E;break;case "ln":val=Math.log(lhs);break;case "abs":val=Math.abs(lhs);break;case "deg":val=lhs*180.0/Math.PI;break;case "rad":val=lhs*Math.PI/180.0;break;case "sign":if(lhs<0){val=-1;}else{val=1;}
break;case "sqrt":val=Math.sqrt(lhs);break;case "round":val=Math.round(lhs);break;case "int":val=Math.floor(lhs);break;case "floor":val=Math.floor(lhs);break;case "ceil":val=Math.ceil(lhs);break;case "fact":val=factorial(lhs);break;default:val=NaN;}
return val;}
return val;};function factorial(n){if(n<0)return NaN;if(n<2)return 1;n=n<<0;var i;i=n;var f=n;while(i-->2){f*=i;}
return f;}
function isNumeric(n){return!isNaN(parseFloat(n))&&isFinite(n);}
CanvasRenderingContext2D.prototype.drawArrow=function(x0,y0,totLen,shaftHt,headLen,headHt,angle,sweep,invertQ){var g=this;var pts=[[0,0],[-headLen,-headHt/2],[-headLen+sweep,-shaftHt/2],[-totLen,-shaftHt/2],[-totLen,shaftHt/2],[-headLen+sweep,shaftHt/2],[-headLen,headHt/2],[0,0]];if(invertQ){pts.push([0,-headHt/2],[-totLen,-headHt/2],[-totLen,headHt/2],[0,headHt/2]);}
for(var i=0;i<pts.length;i++){var cosa=Math.cos(-angle);var sina=Math.sin(-angle);var xPos=pts[i][0]*cosa+pts[i][1]*sina;var yPos=pts[i][0]*sina-pts[i][1]*cosa;if(i==0){g.moveTo(x0+xPos,y0+yPos);}else{g.lineTo(x0+xPos,y0+yPos);}}};function SVGshow(){var s=''
my.svg=new SVG();my.svgQ=true;drawShapes()
my.svgQ=false;var s=my.svg.getText();console.log(s);}
function SVG(){this.lineWidth=1;this.lineClr='#000';this.lineAlpha='1';this.fillClr='#def';this.fillAlpha='0.2';this.inLineQ=false;this.inGroupQ=false;this.line=[];this.txt='';this.ftrStr="</svg>";this.txt=this.getHeader();}
SVG.prototype.getHeader=function(){var s="";s+='<?xml version=\"1.0\" standalone=\"no\"?>\n';s+='<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">\n';s+='<svg width="1000px" height="600px" xmlns="http://www.w3.org/2000/svg">\n';s+="<desc>SVG Output</desc>\n";return s;};SVG.prototype.lineStyle=function(thick,clr,alpha){if(thick==0)thick=0.2;this.lineWidth=thick;this.lineClr=clr;};SVG.prototype.beginFill=function(clr,alpha){fillClr=clr;};SVG.prototype.endFill=function(){};SVG.prototype.moveTo=function(x,y){if(this.line.length>1)this.polyline();this.line.push([x,y]);this.currStyle=this.getStyle()};SVG.prototype.lineTo=function(x,y){this.line.push([x,y]);};SVG.prototype.drawRect=function(x,y,width,height){txt+='<rect x="'+x+'px" y="'+y+'px" width="'+width+'px" height="'+height+'px" style="'+getStyle()+'"/>';};SVG.prototype.drawText=function(x,y,text,rotate){txt+='<text x="'+x+'px" y="'+y+'px" style="'+getFontStyle()+'" transform="rotate('+rotate+' '+x+' '+y+')" '+'>';txt+=text;txt+="</text>";};SVG.prototype.getStyle=function(){var s="";s+="opacity:1;fill:#"+fillClr.toString(16)+";fill-opacity:1;fill-rule:nonzero;";s+="stroke:#"+lineClr.toString(16)+"; stroke-width:"+lineWidth.toString()+"; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; visibility:visible;";return s};SVG.prototype.getFontStyle=function(){var s="";s+="font-size:30px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;";s+="text-align:start; line-height:100.00000381%;";s+="opacity:1; fill:#0000ff; fill-opacity:1; fill-rule:nonzero; stroke:none;";s+="visibility:visible;display:inline;font-family:Komika Text;";return(s);};SVG.prototype.polyline=function(){var s="";s+="<polyline points='";for(var i=0;i<this.line.length;i++){var pt=this.line[i];s+=pt[0].toPrecision(5);s+=" ";s+=pt[1].toPrecision(5);s+=", ";}
s+="' ";s+=this.currStyle
s+=" />";s+="\n";this.txt+=s;this.line=[];};SVG.prototype.polygon=function(line){var s="";s+="<polygon points='";for(var i=0;i<line.length;i++){if(i>0)s+=", ";var pt=line[i];s+=pt.x.toPrecision(5);s+=" ";s+=pt.y.toPrecision(5);}
s+="' ";s+=this.getStyle();s+=" />";s+="\n";this.txt+=s;};SVG.prototype.getStyle=function(){s='';s+="stroke-width='"+this.lineWidth+"' ";s+="stroke='"+this.lineClr+"' ";if(this.fillClr.length>0){s+="fill='"+this.fillClr+"' ";s+="fill-opacity='"+this.fillAlpha+"' ";}
return s;};SVG.prototype.group=function(id){if(inGroupQ){txt+="</g>\n";}
txt+="<g id='"+id+"'>";inGroupQ=true;};SVG.prototype.getText=function(){if(this.line.length>1)this.polyline();if(this.inGroupQ){this.txt+="</g>\n";}
return(this.txt+this.ftrStr);};