animateThreeOperators = { //Make the animation when all three operators are selected if (operator2 != 'none' && operator3 != 'none') { let x = radius + 5; let v = 1.2; let speed = (v/950)*myWidth; let speedBetween = (0.8/950)*myWidth; if (!paused) { //Before animating, show dot representing initial position makeEverything(x,ogState) await Promises.delay(400); makeEverything(x,ogState,radius,true,6,'None') await Promises.delay(200); makeEverything(x,ogState) await Promises.delay(200); makeEverything(x,ogState,radius,true,6,'None') await Promises.delay(200); makeEverything(x,ogState) await Promises.delay(200); makeEverything(x,ogState,radius,true,6,'None') await Promises.delay(200); //Animation before the operator box let box1Start = 17.5; //boundary for animation to start in first box if (myWidth <= 600) { box1Start = 15.5; } while (x < (box1Start/95)*myWidth) { makeEverything(x,ogState); x += speed; yield context.canvas; } //Find state after first operator and set up animation to get there let [angle1,length1] = getFinalState(parseFloat(ogState),operator1); const angleDiff1 = angle1 - parseFloat(ogState); const angleStep1 = angleDiff1/(150/v); let interAngle1 = parseFloat(ogState); let interLength1 = radius; //Animation in operator 1 let box1End = 32.5; //boundary for animation to end in first box if (myWidth <= 600) { box1End = 30.5; } while (x < (box1End/95)*myWidth) { interAngle1 = interAngle1 + angleStep1; x += speed; if (operator1 === 'Z' || operator1 === 'S') { if (ogState - Math.PI/2 === 0 || ogState - 3*Math.PI/2 === 0) { interLength1 = radiusOfEllipse(interAngle1); } } else if (operator1 === 'Y' && ogState % Math.PI === 0) { interLength1 = radiusOfEllipse(interAngle1-Math.PI/2); } if (angle1 === parseFloat(ogState)) { makeEverything(x,angle1,radius,true,6,operator1,0.7); } else { makeEverything(x,interAngle1,interLength1); makeArrowPath(x,operator1,parseFloat(ogState)); } yield context.canvas; } //Animation between operators 1 and 2 let box2Start = 40; if (myWidth <= 600) { box2Start = 35; } while (x < (box2Start/95)*myWidth) { if (length1 !== radius) { makeEverything(x,angle1,radiusOfEllipse(angle1)); } else { //defaults to arrow length of 80 makeEverything(x,angle1); } x += speedBetween; yield context.canvas; } context.clearRect(0, 0, width, height); //Find state after second operator and set up animation to get there if (angle1 === -Math.PI) { angle1 = Math.abs(angle1); //change to an angle that corresponds to one of the original angles } else if (angle1 === -Math.PI/2) { angle1 = 3*Math.PI/2; } let [angle2,length2] = getFinalState(angle1,operator2); const angleDiff2 = angle2 - angle1; const angleStep2 = angleDiff2/(150/v); let interAngle2 = angle1; let interLength2 = length1; //Animation in operator 2 let box2End = 55; if (myWidth <= 600) { box2End = 50; } while (x < (box2End/95)*myWidth) { interAngle2 = interAngle2 + angleStep2; x += speed; if (operator2 === 'Z' || operator2 === 'S') { if (angle1 - Math.PI/2 === 0 || angle1 - 3*Math.PI/2 === 0) { interLength2 = radiusOfEllipse(interAngle2); } else if (angle1 === Math.PI/4 || angle1 === 5*Math.PI/4) { interLength2 = radiusOfEllipse(interAngle2); } } else if (operator2 === 'Y' && angle1 % Math.PI === 0) { interLength2 = radiusOfEllipse(interAngle2-Math.PI/2); } else if (operator2 === 'Y') { if (angle1 === Math.PI/4 || angle1 === 5*Math.PI/4) { interLength2 = radiusOfEllipse(interAngle2-Math.PI/2); } } if (angle2 === angle1) { makeEverything(x,interAngle2,interLength2,true,6,operator2,0.7); } else { makeEverything(x,interAngle2,interLength2); makeArrowPath(x,operator2,angle1); makeArrowPathDashed(x,operator2,angle1); } yield context.canvas; } //Animation between operators 2 and 3 let box3Start = 62.5; if (myWidth <= 600) { box3Start = 54.5; } while (x < (box3Start/95)*myWidth) { if (length2 !== radius) { makeEverything(x,angle2,radiusOfEllipse(angle2)); } else { makeEverything(x,angle2); } x += speedBetween; yield context.canvas; } context.clearRect(0, 0, width, height); //Find state after third operator and set up animation to get there if (angle2 === -Math.PI) { angle2 = Math.abs(angle2); } else if (angle2 === -Math.PI/2) { angle2 = 3*Math.PI/2; } else if (angle2 === -3*Math.PI/4) { angle2 = 5*Math.PI/4; } let [angle3,length3] = getFinalState(angle2,operator3); const angleDiff3 = angle3 - angle2; const angleStep3 = angleDiff3/(150/v); let interAngle3 = angle2; let interLength3 = length2; //Animation in operator 3 let box3End = 77.5; if (myWidth <= 600) { box3End = 69.5; } while (x < (box3End/95)*myWidth) { //x < (77.5/95)*myWidth interAngle3 = interAngle3 + angleStep3; x += speed; if (operator3 === 'Z' || operator3 === 'S') { if (angle2 - Math.PI/2 === 0 || angle2 - 3*Math.PI/2 === 0) { interLength3 = radiusOfEllipse(interAngle3); } else if (angle2 === Math.PI/4 || angle2 === 5*Math.PI/4) { interLength3 = radiusOfEllipse(interAngle3); } } else if (operator3 === 'Y' && angle2 % Math.PI === 0) { interLength3 = radiusOfEllipse(interAngle3-Math.PI/2); } else if (operator3 === 'Y') { if (angle2 === Math.PI/4 || angle2 === 5*Math.PI/4) { interLength3 = radiusOfEllipse(interAngle3-Math.PI/2); } } if (angle3 === angle2) { makeEverything(x,interAngle3,interLength3,true,6,operator3,0.7); } else { makeEverything(x,interAngle3,interLength3); makeArrowPath(x,operator3,angle2); makeArrowPathDashed(x,operator3,angle2); } yield context.canvas; } //Animation after operator 3 context.font = '13px sans-serif'; let labelWidth = context.measureText('y axis'); while (x < myWidth-radius-5-labelWidth.width) { if (length3 !== radius) { makeEverything(x,angle3,radiusOfEllipse(angle3)); } else { makeEverything(x,angle3); } x += speed; yield context.canvas; } context.clearRect(0, 0, width, height); //Make dot radius grow let dotRadius = 6; while (dotRadius < 10) { if (length3 !== radius) { makeEverything(x,angle3,radiusOfEllipse(angle3),true,dotRadius,'None'); } else { makeEverything(x,angle3,radius,true,dotRadius,'None'); } dotRadius += 0.1; yield context.canvas; } //Make dot radius shrink while (dotRadius > 6) { context.clearRect(0, 0, width, height); if (length3 !== radius) { makeEverything(x,angle3,radiusOfEllipse(angle3),true,dotRadius,'None'); } else { makeEverything(x,angle3,radius,true,dotRadius,'None'); } dotRadius -= 0.1; yield context.canvas; } } else { //when animation is stopped makeEverything(radius + 5,ogState,radius,false,6,'None',1,1); yield context.canvas } } }