var s,i,my={};function geomlineparaMain(imode){my.version='0.8';my.mode=typeof imode!=='undefined'?imode:'trans';my.shows=[{id:'all',name:'All Angles',angNums:[[0,1,2,3,4,5,6,7]],descr:''},{id:'corr',name:'Corresponding Angles',angNums:[[0,4],[1,5],[2,6],[3,7]],descr:''},{id:'altint',name:'Alternate Interior Angles',angNums:[[2,5],[3,4]],descr:''},{id:'altext',name:'Alternate Exterior Angles',angNums:[[0,7],[1,6]],descr:''},{id:'conint',name:'Consecutive Interior Angles',angNums:[[2,4],[3,5]],descr:'Angles add to 180°'},{id:'vert',name:'Vertical Angles',angNums:[[0,3],[1,2],[4,7],[5,6]],descr:''},{id:'ones',name:'One at a time',angNums:[[0],[1],[2],[3],[4],[5],[6],[7]],descr:''}];my.showNo=0 for(var i=0;i';s+='';s+='
';s+='
';s+="Angles: ";s+=dropdownHTML(my.shows,'showChg','showSel',my.showNo);s+='
';s+='
';s+='';s+='';s+='
';s+='
© 2018 MathsIsFun.com v'+my.version+'
';s+='';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);this.coords=new Coords(0,0,w,h,-2,-1.9,15,11,true);this.graph=new Graph(g,coords);this.coordsQ=true;shapes=[];makeShapes();el.addEventListener("mousedown",mouseDownListener,false);el.addEventListener('touchstart',ontouchstart,false);el.addEventListener("mousemove",domousemove,false);my.playQ=true my.timeStt=performance.now() my.animNum=0 my.paraQ=true update() anim()} function anim(){if(my.playQ){if(performance.now()-my.timeStt>1500){my.timeStt=performance.now() my.animNum++ if(my.animNum>=my.show.angNums.length)my.animNum=0 update()} requestAnimationFrame(anim);}} function showChg(){var div=document.getElementById('showSel');my.show=my.shows[div.selectedIndex];console.log("onShowChg="+div.selectedIndex,my.show) my.animNum=0 my.timeStt=performance.now() update() var descr=my.show.descr if(!my.paraQ)descr='' document.getElementById('descr').innerHTML=descr} function reset(){makeShapes();update();} function update(){g.clearRect(0,0,el.width,el.height);drawPts();} function paraToggle(){my.paraQ=!my.paraQ toggleBtn("paraBtn",my.paraQ) showChg() update()} 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 ontouchstart(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;mouseDownListener(evt)} function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;mouseMoveListener(evt);evt.preventDefault();} function ontouchend(evt){el.addEventListener('touchstart',ontouchstart,false);window.removeEventListener("touchend",ontouchend,false);if(dragging){dragging=false;window.removeEventListener("touchmove",ontouchmove,false);}} function domousemove(e){document.body.style.cursor="default";var bRect=el.getBoundingClientRect();var mouseX=(e.clientX-bRect.left)*(el.width/ratio/bRect.width);var mouseY=(e.clientY-bRect.top)*(el.height/ratio/bRect.height);for(var i=0;ihighestIndex){dragHoldX=mouseX-shapes[i].x;dragHoldY=mouseY-shapes[i].y;highestIndex=i;dragIndex=i;}}} if(dragging){if(evt.touchQ){window.addEventListener('touchmove',ontouchmove,false);}else{window.addEventListener("mousemove",mouseMoveListener,false);} update();} if(evt.touchQ){el.removeEventListener("touchstart",ontouchstart,false);window.addEventListener("touchend",ontouchend,false);}else{el.removeEventListener("mousedown",mouseDownListener,false);window.addEventListener("mouseup",mouseUpListener,false);} if(evt.preventDefault){evt.preventDefault();} else if(evt.returnValue){evt.returnValue=false;} return false;} function mouseUpListener(evt){el.addEventListener("mousedown",mouseDownListener,false);window.removeEventListener("mouseup",mouseUpListener,false);if(dragging){dragging=false;window.removeEventListener("mousemove",mouseMoveListener,false);}} function mouseMoveListener(evt){var posX;var posY;var shapeRad=shapes[dragIndex].rad;var minX=shapeRad;var maxX=el.width-shapeRad;var minY=shapeRad;var maxY=el.height-shapeRad;var bRect=el.getBoundingClientRect();var mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);var mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);posX=mouseX-dragHoldX;posX=(posXmaxX)?maxX:posX);posY=mouseY-dragHoldY;posY=(posYmaxY)?maxY:posY);shapes[dragIndex].x=posX;shapes[dragIndex].y=posY;update();} function hitTest(shape,mx,my){var dx;var dy;dx=mx-shape.x;dy=my-shape.y;return(dx*dx+dy*dy=4)return var ptNumss=[[0,1,2,3],[1,0,3,2],[3,2,1,0],[3,2,1,0]] var ptNums=ptNumss[dragIndex] var Aobj=shapes[ptNums[0]];var Bobj=shapes[ptNums[1]];var Cobj=shapes[ptNums[2]];var Dobj=shapes[ptNums[3]];var ABx=Aobj.x-Bobj.x;var ABy=Aobj.y-Bobj.y;Dobj.x=Cobj.x+ABx;Dobj.y=Cobj.y+ABy;} function drawPts(){var i;g.strokeStyle="rgba(0, 0, 150, 0.8)";g.fillStyle="rgba(255, 255, 100, 0.1)";g.lineWidth=2;g.beginPath();var ln0=new Line(shapes[0],shapes[1]);var ln1=new Line(shapes[2],shapes[3]);var ln2=new Line(shapes[4],shapes[5]);if(my.paraQ){makeParallel()} ln0.setLen(1500,true);ln1.setLen(1500,true);ln2.setLen(1500,true);var ip0=ln0.getIntersection(ln2,false) g.fillStyle="rgba(0, 0, 0, 0.8)";g.beginPath();g.arc(ip0.x,ip0.y,4,0,2*Math.PI,false);g.fill();var ip1=ln1.getIntersection(ln2,false) g.fillStyle="rgba(0, 0, 0, 0.8)";g.beginPath();g.arc(ip1.x,ip1.y,4,0,2*Math.PI,false);g.fill();var angNums=my.show.angNums[my.animNum] for(var i=0;i0){s+=" − ";}else{s+=" −";} v=-v;}else{if(s.length>0){s+=" + ";}} switch(k){case 0:if(v!=1){s+=v;} s+="x";break;case 1:s+=v;break;default:if(v!=1){s+=v;} s+="("+k+")";break;}}} if(s.length==0){s='0';} return s;} function Pt(ix,iy){this.x=ix;this.y=iy;this.rad=9;this.color="rgb("+0+","+0+","+255+")";angleIn=0;angleOut=0;} Pt.prototype.setxy=function(ix,iy){this.x=ix;this.y=iy;};Pt.prototype.getAngle=function(){return this.angleOut-this.angleIn;};Pt.prototype.drawMe=function(g){g.fillStyle="rgba(0, 0, 255, 0.3)";g.beginPath();g.arc(this.x,this.y,20,0,2*Math.PI,false);g.closePath();g.fill();};Pt.prototype.getAvg=function(pts){var xSum=0;var ySum=0;for(var i=0;imaxNo){currNo=minNo+(currNo-minNo)%range;} return currNo;} function constrain(min,val,max){return(Math.min(Math.max(min,val),max));} function Coords(left,top,width,height,xStt,yStt,xEnd,yEnd,uniScaleQ){this.left=left;this.top=top;this.width=width;this.height=height;this.xStt=xStt;this.yStt=yStt;this.xEnd=xEnd;this.yEnd=yEnd;this.uniScaleQ=uniScaleQ;var xLogQ=false;var yLogQ=false;var skewQ=true;this.xScale;var xLogScale;this.yScale;console.log("Coords: ",this.xStt,this.yStt,this.xEnd,this.yEnd);this.calcScale();} Coords.prototype.calcScale=function(){console.log("calcScale: ",this.xStt,this.yStt,this.xEnd,this.yEnd);if(this.xLogQ){if(this.xStt<=0) this.xStt=1;if(this.xEnd<=0) this.xEnd=1;} if(this.yLogQ){if(this.yStt<=0) this.yStt=1;if(this.yEnd<=0) this.yEnd=1;} var temp;if(this.xStt>this.xEnd){temp=this.xStt;this.xStt=this.xEnd;this.xEnd=temp;} if(this.yStt>this.yEnd){temp=this.yStt;this.yStt=this.yEnd;this.yEnd=temp;} var xSpan=this.xEnd-this.xStt;if(xSpan<=0) xSpan=0.1;this.xScale=xSpan/this.width;this.xLogScale=(Math.log(this.xEnd)-Math.log(this.xStt))/this.width;var ySpan=this.yEnd-this.yStt;if(ySpan<=0) ySpan=0.1;this.yScale=ySpan/this.height;this.yLogScale=(Math.log(this.yEnd)-Math.log(this.yStt))/this.height;if(this.uniScaleQ&&!this.xLogQ&&!this.yLogQ){var newScale=Math.max(this.xScale,this.yScale);this.xScale=newScale;xSpan=this.xScale*this.width;var xMid=(this.xStt+this.xEnd)/2;this.xStt=xMid-xSpan/2;this.xEnd=xMid+xSpan/2;this.yScale=newScale;ySpan=this.yScale*this.height;var yMid=(this.yStt+this.yEnd)/2;this.yStt=yMid-ySpan/2;this.yEnd=yMid+ySpan/2;}};Coords.prototype.getXScale=function(){return this.xScale;};Coords.prototype.getYScale=function(){return this.yScale;};Coords.prototype.toXPix=function(val){if(this.xLogQ){return this.left+(Math.log(val)-Math.log(xStt))/xLogScale;}else{return this.left+((val-this.xStt)/this.xScale);}};Coords.prototype.toYPix=function(val){if(this.yLogQ){return this.top+(Math.log(yEnd)-Math.log(val))/yLogScale;}else{return this.top+((this.yEnd-val)/this.yScale);}};Coords.prototype.toPtVal=function(pt,useCornerQ){return new Pt(toXVal(pt.x,useCornerQ),toYVal(pt.y,useCornerQ));};Coords.prototype.toXVal=function(pix,useCornerQ){if(useCornerQ){return this.xStt+(pix-this.left)*this.xScale;}else{return this.xStt+pix*this.xScale;}};Coords.prototype.toYVal=function(pix,useCornerQ){if(useCornerQ){return this.yEnd-(pix-this.top)*this.yScale;}else{return this.yEnd-pix*this.yScale;}};Coords.prototype.getTicks=function(stt,span){var ticks=[];var inter=this.tickInterval(span/5,false);var tickStt=Math.ceil(stt/inter)*inter;var i=0;do{var tick=i*inter;tick=Number(tick.toPrecision(5));ticks.push([tickStt+tick,1]);i++;}while(tick=5){if(majorQ){return(5*pow10);}else{return(2*pow10);}} if(mantissa>=2){if(majorQ){return(2*pow10);}else{return(1*pow10);}} if(mantissa>=1){if(majorQ){return(1*pow10);}else{return(0.2*pow10);}} if(majorQ){return(1*pow10);}else{return(0.2*pow10);}};Coords.prototype.xTickInterval=function(tickDensity,majorQ){return this.tickInterval((this.xEnd-this.xStt)/tickDensity,majorQ);};Coords.prototype.yTickInterval=function(tickDensity,majorQ){return this.tickInterval((this.yEnd-this.yStt)/tickDensity,majorQ);};function Graph(g,coords){this.g=g;this.coords=coords;var xClr=0x4444ff;var yClr=0xff4444;this.xLinesQ=true;this.yLinesQ=true;this.xArrowQ=true;this.yArrowQ=true;this.xValsQ=true;this.yValsQ=true;this.skewQ=false;} Graph.prototype.drawGraph=function(){if(coords.xLogQ){this.drawLinesLogX();}else{if(this.xLinesQ){this.drawLinesX();}} if(coords.yLogQ){this.drawLinesLogY();}else{if(this.yLinesQ){this.drawLinesY();}}};Graph.prototype.drawLinesX=function(){var xAxisPos=coords.toYPix(0);var yAxisPos=coords.toXPix(0);var numAtAxisQ=(yAxisPos>=0&&yAxisPos0&&xAxisPos=0&&yAxisPos=0&&xAxisPos=0&&xAxisPosMath.pow(A.x-B.x,2)+Math.pow(A.y-B.y,2))return null;if(Math.pow(ip.x-A.x,2)+Math.pow(ip.y-A.y,2)>Math.pow(A.x-B.x,2)+Math.pow(A.y-B.y,2))return null;if(Math.pow(ip.x-F.x,2)+Math.pow(ip.y-F.y,2)>Math.pow(E.x-F.x,2)+Math.pow(E.y-F.y,2))return null;if(Math.pow(ip.x-E.x,2)+Math.pow(ip.y-E.y,2)>Math.pow(E.x-F.x,2)+Math.pow(E.y-F.y,2))return null;} return ip;} 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;iMath.PI)angle-=Math.PI var angDeg=Math.round(angle*180./Math.PI);var d=30;if(angDeg==90){g.drawBox(x,y,25,sttAngle+angle-Math.PI/2);}else{if(angDeg>90){g.lineStyle="#ff0000";d=Math.max(20,28-(angDeg-90)/6);}else{d=Math.min(40,33+(90-angDeg)/10);g.lineStyle="#4444FF";} g.fillStyle="hsla(60,60%,60%,0.3)";g.lineWidth=1 g.beginPath();g.moveTo(x,y);g.arc(x,y,d,sttAngle,sttAngle+angle,false);g.stroke();g.fill();} var ang=Math.round(angle*180/Math.PI,this.dec);var angDescr=ang+"° + " var aMid=sttAngle+(angle/2);var txtPt={x:x+(d+15)*Math.cos(aMid),y:y+(d+15)*Math.sin(aMid)} g.font="bold 16px Arial";g.textAlign='center' g.fillStyle="rgba(0, 0, 255, 1)";g.fillText(Math.round(ang)+"°",txtPt.x,txtPt.y+5)};CanvasRenderingContext2D.prototype.drawBox=function(midX,midY,radius,angle){g.beginPath();var pts=[[0,0],[Math.cos(angle),Math.sin(angle)],[Math.cos(angle)+Math.cos(angle+Math.PI/2),Math.sin(angle)+Math.sin(angle+Math.PI/2)],[Math.cos(angle+Math.PI/2),Math.sin(angle+Math.PI/2)],[0,0]];for(var i=0;i';for(var i=0;i'+opts[i].name+'';} s+='';return s;}