2d:null 2e:["$","title",null,{"children":"Quantum Computing Animation | Jillian Kunze | Observable"}] 33:Tc97,viewof graphic = //html cell to be imported into the Quantum Atlas { return html`

1. Pick an initial qubit value. Unlike bits, which can only be ${tex`0`} or ${tex`1`}, qubits can be an infinite number of different values—like latitude and longitude on the Earth. Below are some standard choices for starting values.

${viewof ogState}

2. Choose the operations to perform on the qubit. Operations rotate the arrow representing the quantum state. For example, the X operation will rotate the arrow 180 degrees around the ${tex`x`} axis, and the Y and Z operations are 180-degree rotations around their respective axes. The S operation is a 90-degree rotation about the ${tex`z`} axis.

First operation${viewof operator1}

Second operation${viewof operator2}

Third operation${viewof operator3}

${pauseButton}

${viewof quantumComputingCanvas}

` }34:Tf4f,animateOneOperator = { //Make the animation when only one operator is selected if (operator2 === 'none' && operator3 === 'none') { let x = radius + 5; const speedOut = (2/950)*myWidth; //speed outside of operator const vIn = 1.2; const speedIn = (1.2/950)*myWidth; //speed inside operator if (!paused) { //Before animating, show dot representing initial position //can't do in a function bc of await and can't do in a separate cell bc it runs whenever a parameter is changed sorry dude 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 while (x < (40/95)*myWidth) { makeEverything(x,ogState); x += speedOut; yield context.canvas; } //Find state after the operator and set up animation to get there let [angle1,length1] = getFinalState(parseFloat(ogState),operator1); //new angle and length of arrow after operator const angleDiff1 = angle1 - parseFloat(ogState); const angleStep1 = angleDiff1/(150/vIn); //step to use in for loop while rotating arrow let interAngle1 = parseFloat(ogState); //starting point for angle while in loop let interLength1 = radius; //will be changed to be intermediate lengths in loop if needed //Animation in operator 1 while (x < (55/95)*myWidth) { interAngle1 = interAngle1 + angleStep1; x += speedIn; if (operator1 === 'Z' || operator1 === 'S') { //for rotation about z axis that traces out equator if (ogState - Math.PI/2 === 0 || ogState - 3*Math.PI/2 === 0) { //do subtraction bc ogState is a string interLength1 = radiusOfEllipse(interAngle1); //calculate radius between center and equator } } else if (operator1 === 'Y' && ogState % Math.PI === 0) { //for rotation about y axis that traces out meridian 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 after the operator context.font = '13px sans-serif'; let labelWidth = context.measureText('y axis'); while (x < myWidth-radius-5-labelWidth.width) { if (length1 !== radius) { makeEverything(x,angle1,radiusOfEllipse(angle1)); } else { //defaults to arrow length of 80 makeEverything(x,angle1); } x += speedOut; yield context.canvas; } context.clearRect(0, 0, width, height); //Make dot radius grow let dotRadius = 6; while (dotRadius < 10) { if (length1 !== radius) { makeEverything(x,angle1,radiusOfEllipse(angle1),true,dotRadius,'None'); } else { makeEverything(x,angle1,radius,true,dotRadius,'None'); } dotRadius += 0.1; yield context.canvas; } //Make dot radius shrink while (dotRadius > 6) { context.clearRect(0, 0, width, height); if (length1 !== radius) { makeEverything(x,angle1,radiusOfEllipse(angle1),true,dotRadius,'None'); } else { makeEverything(x,angle1,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 } } }35:T1556,animateTwoOperators = { //Make the animation when two operators are selected if ((operator2 === 'none' && operator3 != 'none') || (operator3 === 'none' && operator2 != 'none')) { let operatorAlt = operator2; if (operator2 === 'none') { //select the second operator operatorAlt = operator3; } let x = radius + 5; let speedOut = (1.7/950)*myWidth; let vIn = 1.2 let speedIn = (vIn/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 first operator box while (x < (25.5/95)*myWidth) { makeEverything(x,ogState); x += speedOut; 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/vIn); let interAngle1 = parseFloat(ogState); let interLength1 = radius; //Animation in operator 1 while (x < (40.5/95)*myWidth) { interAngle1 = interAngle1 + angleStep1; x += speedIn; 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 Alt while (x < (53.5/95)*myWidth) { if (length1 !== radius) { makeEverything(x,angle1,radiusOfEllipse(angle1)); } else { //defaults to arrow length of 80 makeEverything(x,angle1); } x += speedIn; 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,operatorAlt); const angleDiff2 = angle2 - angle1; const angleStep2 = angleDiff2/(150/vIn); let interAngle2 = angle1; let interLength2 = length1; //Animation in operator Alt while (x < (68.5/95)*myWidth) { interAngle2 = interAngle2 + angleStep2; x += speedIn; if (operatorAlt === 'Z' || operatorAlt === '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 (operatorAlt === 'Y' && angle1 % Math.PI === 0) { interLength2 = radiusOfEllipse(interAngle2-Math.PI/2); } else if (operatorAlt === '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,operatorAlt,0.7); } else { makeEverything(x,interAngle2,interLength2); makeArrowPath(x,operatorAlt,angle1); makeArrowPathDashed(x,operatorAlt,angle1); } yield context.canvas; } //Animation after operator Alt context.font = '13px sans-serif'; let labelWidth = context.measureText('y axis'); while (x < myWidth-radius-5-labelWidth.width) { if (length2 !== radius) { makeEverything(x,angle2,radiusOfEllipse(angle2)); } else { makeEverything(x,angle2); } x += speedOut; yield context.canvas; } context.clearRect(0, 0, width, height); //Make dot radius grow let dotRadius = 6; while (dotRadius < 10) { if (length2 !== radius) { makeEverything(x,angle2,radiusOfEllipse(angle2),true,dotRadius,'None'); } else { makeEverything(x,angle2,radius,true,dotRadius,'None'); } dotRadius += 0.1; yield context.canvas; } //Make dot radius shrink while (dotRadius > 6) { context.clearRect(0, 0, width, height); if (length2 !== radius) { makeEverything(x,angle2,radiusOfEllipse(angle2),true,dotRadius,'None'); } else { makeEverything(x,angle2,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 } } }36:T1db0,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 } } }37:Tc40,function getFinalState(angle, operatorIn) { //find final state on Bloch sphere based on initial state and operator let finalState = angle; //this is the catch all let length = radius; //will be true in most cases if (angle === 0) { //start with |0> if (operatorIn === 'Y') { finalState = -Math.PI; //maps to |1> } else if (operatorIn === 'X') { finalState = -Math.PI; //maps to i|1> } else if (operatorIn === 'Z') { finalState = angle; //leaves this state unchanged } else if (operatorIn === 'S') { finalState = angle; //leaves this state unchanged } } else if (angle === Math.PI) { //start with |1> if (operatorIn === 'Y') { finalState = 0; //maps to |0> } else if (operatorIn === 'X') { finalState = 0; //maps to -i|0> } else if (operatorIn === 'Z') { finalState = angle; //maps to -|1> } else if (operatorIn === 'S') { finalState = angle; //maps to e^i(pi/2) * |1> } } else if (angle === Math.PI/2) { //start with |0> + |1> if (operatorIn === 'Y') { finalState = angle; //leaves this state unchanged } else if (operatorIn === 'X') { finalState = -Math.PI/2; //maps to -i(|0> - |1>) } else if (operatorIn === 'Z') { finalState = -Math.PI/2; //maps to |0> - |1> } else if (operatorIn === 'S') { finalState = Math.PI/4; //maps to |0> - i|1> length = radiusOfEllipse(Math.PI/4); } } else if (angle === 3*Math.PI/2) { //start with |0> - |1> if (operatorIn === 'Y') { finalState = angle; //maps to -(|0> - |1>) } else if (operatorIn === 'X') { finalState = Math.PI/2; //maps to i(|0> + |1>) } else if (operatorIn === 'Z') { finalState = Math.PI/2; //maps to |0> + |1> } else if (operatorIn === 'S') { finalState = 5*Math.PI/4; //maps to |0> + i|1> length = radiusOfEllipse(5*Math.PI/4); } } else if (angle === Math.PI/4) { //start with state after S(|0> + |1>) if (operatorIn === 'Y') { finalState = -3*Math.PI/4; //maps to |0> + i|1> length = radiusOfEllipse(-3*Math.PI/4);//length = 24; } else if (operatorIn === 'X') { finalState = angle; //maps to same state length = radiusOfEllipse(Math.PI/4); } else if (operatorIn === 'Z') { finalState = -3*Math.PI/4; //maps to |0> + i|1> length = radiusOfEllipse(-3*Math.PI/4); } else if (operatorIn === 'S') { finalState = -Math.PI/2; //maps to i(|0> - |1>) } } else if (angle === 5*Math.PI/4) { //start with state after S(|0> + |1>) if (operatorIn === 'Y') { finalState = Math.PI/4; //maps to |0> - i|1> length = radiusOfEllipse(Math.PI/4); } else if (operatorIn === 'X') { finalState = angle; //maps to same state length = radiusOfEllipse(5*Math.PI/4); } else if (operatorIn === 'Z') { finalState = Math.PI/4; //maps to |0> - i|1> length = radiusOfEllipse(Math.PI/4); } else if (operatorIn === 'S') { finalState = Math.PI/2; //maps to i(|0> + |1>) } } return [finalState, length] }38:Tcda,function makeArrowPath(xCenter,operatorNum,angleStart) { //draw great circle showing path arrow takes while in operator const finalResult = getFinalState(angleStart,operatorNum); const finalAngle = finalResult[0]; const yCenter = 180-radius; const equatorY = 33*radius/80; context.lineCap = 'round'; context.globalAlpha = 0.7; context.beginPath(); context.setLineDash([]); context.strokeStyle = operatorColor(operatorNum); context.lineWidth = 6; if (angleStart % Math.PI === 0) {//for |0> and |1> if (operatorNum === 'Y') {//for rotation that traces out meridian line context.ellipse(xCenter, yCenter, equatorY, radius, 0, angleStart-Math.PI/2,finalAngle-Math.PI/2,true); if (angleStart === Math.PI) { context.setLineDash([10, 7.4]); //dashed since it's in the back of the Bloch sphere } } else if (operatorNum === 'X') {//for rotation that traces outer edge of the sphere context.arc(xCenter,yCenter,radius,angleStart-Math.PI/2,finalAngle-Math.PI/2,true); } } if (angleStart - Math.PI/2 === 0 || angleStart - 3*Math.PI/2 === 0) {//for |0> +/- |1> if (operatorNum === 'X' ) {//for rotation that traces the outer edge of the sphere context.arc(xCenter,yCenter,radius,angleStart-Math.PI/2,finalAngle-Math.PI/2,true); } else if (operatorNum === 'Z' ) {//for rotation that traces out equator context.ellipse(xCenter, yCenter, radius, equatorY, 0, angleStart-Math.PI/2,finalAngle-Math.PI/2,true); if (angleStart === Math.PI/2) { context.setLineDash([10, 7.4]); } } else if (operatorNum === 'S') {//for rotation that traces out smaller section of equator context.ellipse(xCenter, yCenter, radius, equatorY, 0, angleStart-Math.PI/2,finalAngle-(5*Math.PI/8),true); if (angleStart === Math.PI/2) { context.setLineDash([10, 7.4]); } } } if (angleStart === Math.PI/4) { //start on -Y axis; this will only make the non-dashed portion of the line if (operatorNum === 'Y') { context.ellipse(xCenter, yCenter, equatorY, radius, 0, -Math.PI/2,finalAngle-Math.PI/2.7,true); } else if (operatorNum === 'Z') { context.ellipse(xCenter, yCenter, radius, equatorY, 0,-Math.PI,finalAngle-Math.PI/1.6,true); } } if (angleStart === 5*Math.PI/4) { //start on +Y axis; this will only make the non-dashed portion of the line if (operatorNum === 'Y') { context.ellipse(xCenter, yCenter, equatorY, radius, 0, angleStart-Math.PI/2.7,Math.PI/2,true); } else if (operatorNum === 'Z') { context.ellipse(xCenter, yCenter, radius, equatorY, 0, angleStart-Math.PI/1.6,0,true); } else if (operatorNum === 'S') {//for rotation that traces out smaller section of equator context.ellipse(xCenter, yCenter, radius, equatorY, 0, angleStart-Math.PI/1.6,finalAngle-1.6,true); } } context.stroke(); context.globalAlpha = 1; if (angleStart - Math.PI === 0 && operatorNum === 'Y') {//put this path on the backside of the Bloch sphere context.setLineDash([]); //undo line dash context.lineWidth = 2; context.strokeStyle = 'black'; context.beginPath(); context.ellipse(xCenter, yCenter, radius-1, equatorY, 0, 0, Math.PI); context.stroke(); } } 39:T5be,function makeArrowPathDashed(xCenter,operatorNum,angleStart) { //draw dashed portion for great circle paths that go on both front and back of Bloch sphere const finalResult = getFinalState(angleStart,operatorNum); const finalAngle = finalResult[0]; const yCenter = 180-radius; const equatorY = 33*radius/80; context.lineCap = 'round'; context.globalAlpha = 0.7; context.beginPath(); context.setLineDash([]); context.strokeStyle = operatorColor(operatorNum); context.lineWidth = 6; context.setLineDash([10, 7.4]); if (angleStart === Math.PI/4) { //start on -Y axis; this will only make the dashed portion of the line if (operatorNum === 'Y') { context.ellipse(xCenter, yCenter, equatorY, radius, 0,angleStart-Math.PI/2.7,-Math.PI/2,true); } else if (operatorNum === 'Z') { context.ellipse(xCenter, yCenter, radius, equatorY, 0, angleStart-Math.PI/1.52,-Math.PI,true); } else if (operatorNum === 'S') { context.ellipse(xCenter, yCenter, radius, equatorY, 0, angleStart-Math.PI/1.52,finalAngle-1.6,true); } } if (angleStart === 5*Math.PI/4) { //start on +Y axis if (operatorNum === 'Y') { context.ellipse(xCenter, yCenter, equatorY, radius, 0, Math.PI/2,finalAngle-Math.PI/2.7,true); } else if (operatorNum === 'Z') { context.ellipse(xCenter, yCenter, radius, equatorY, 0, 0,finalAngle-Math.PI/1.6,true); } } context.stroke(); context.globalAlpha = 1; }3a:T1177,function makeSetup() { //make up to 3 boxes representing the operators const boxWidth = (16/95)*myWidth; const boxHeight = 0.064*myWidth + 139; context.font = '50px sans-serif'; context.strokeStyle = 'black'; let textSize1 = context.measureText(operator1); let textSize2 = context.measureText(operator2); let textSize3 = context.measureText(operator3); if (operator2 === 'none' && operator3 === 'none') { //only 1 operator context.strokeRect((myWidth/2)-(boxWidth/2), height/2 + 100 - boxHeight/2, boxWidth, boxHeight); //border of rectangle context.fillStyle = operatorColor(operator1); //color depends on operator type context.fillRect((myWidth/2)-(boxWidth/2), height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; //style for text context.fillText(operator1, myWidth/2 - (1/2)*textSize1.width, height/2 + 120); } else if (operator2 === 'none' || operator3 === 'none') { //just 2 operators let operatorAlt = operator2; if (operator2 === 'none') { operatorAlt = operator3; } let textSizeAlt = context.measureText(operatorAlt); //First operator box: context.strokeRect((25/95)*myWidth , height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator1); context.fillRect((25/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator1, (33/95)*myWidth - (1/2)*textSize1.width, height/2 + 120); //Second operator box: context.strokeRect((53/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operatorAlt); context.fillRect((53/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operatorAlt, (61/95)*myWidth - (1/2)*textSizeAlt.width, height/2 + 120); } else if (operator2 != 'none' && operator3 != 'none') { //all 3 operators if (myWidth > 600) { //First operator box: context.strokeRect((17/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator1); context.fillRect((17/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator1, (25/95)*myWidth - (1/2)*textSize1.width, height/2 + 120); //Second operator box: context.strokeRect((39.5/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator2); context.fillRect((39.5/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator2, myWidth/2 - (1/2)*textSize2.width, height/2 + 120); //Third operator box: context.strokeRect((62/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator3); context.fillRect((62/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator3, (70/95)*myWidth - (1/2)*textSize3.width, height/2 + 120); } else { //First operator box: context.strokeRect((15/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator1); context.fillRect((15/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator1, (23/95)*myWidth - (1/2)*textSize1.width, height/2 + 120); //Second operator box: context.strokeRect((34.5/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator2); context.fillRect((34.5/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator2, (42.5/95)*myWidth - (1/2)*textSize2.width, height/2 + 120); //Third operator box: context.strokeRect((54/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = operatorColor(operator3); context.fillRect((54/95)*myWidth, height/2 + 100 - boxHeight/2, boxWidth, boxHeight); context.fillStyle = 'black'; context.fillText(operator3, (62/95)*myWidth - (1/2)*textSize3.width, height/2 + 120); } } }3b:Td6c,function makeBlochSphere(xCenter,angle,length=80,makeDot=false,dotRadius=6,operatorNum,dotOpac=1,axisOpac=0) { //Inputs: x position for center of sphere, angle measured from top of sphere, length of arrow, whether to put a dot at end of arrow, radius of that dot, operator (to determine dot color) const yCenter = 180-radius; const equatorRadiusY = 33*radius/80; //Make axes: context.setLineDash([]); context.strokeStyle = "#a3a3a3"; context.lineWidth = 1.5; context.beginPath(); //Z axis context.moveTo(xCenter,yCenter); context.lineTo(xCenter,yCenter-radius-20); context.stroke(); context.beginPath(); //Y axis context.moveTo(xCenter,yCenter); const yLength = radius+20; context.lineTo(xCenter + yLength* Math.sin(5*Math.PI/4),yCenter - yLength* Math.cos(5*Math.PI/4)); context.stroke(); context.beginPath(); //X axis context.moveTo(xCenter,yCenter); context.lineTo(xCenter+radius+20,yCenter); context.stroke(); //Axis text context.fillStyle = '#a3a3a3'; context.font = '13px sans-serif'; context.fillText('z axis', xCenter + 4 , yCenter-radius-8); context.fillText('x axis', xCenter - radius-4,yCenter - (radius+36)* Math.cos(5*Math.PI/4)); context.fillText('y axis', xCenter + radius + 4, yCenter-6); context.strokeStyle = 'black'; context.lineWidth = 2; context.globalAlpha = 1; //Outer circle context.setLineDash([]); //undo line dash context.beginPath(); context.arc(xCenter, yCenter, radius, 0, 2 * Math.PI); context.stroke(); //Inner equator context.beginPath(); context.setLineDash([10, 7.4]); //parameters for line dash necessary for symmetry context.ellipse(xCenter, yCenter, radius-1, equatorRadiusY, 0, Math.PI, 2*Math.PI); context.stroke(); //Arrow line const arrowColor = '#45a270'; //'#4DB37C'; const xLine = xCenter + (length - 4) * Math.sin(angle); //position of end of arrow line const yLine = yCenter - (length - 4) * Math.cos(angle); context.setLineDash([]); context.strokeStyle = arrowColor; context.lineWidth = 2.5; context.beginPath(); context.moveTo(xCenter,yCenter); context.lineTo(xLine,yLine); context.stroke(); //Arrow head const xHead = xCenter + (length) * Math.sin(angle); //position of arrow head const yHead = yCenter - (length) * Math.cos(angle); context.translate(xHead, yHead); context.rotate(angle); //rotate arrow head according to angle of line context.fillStyle = arrowColor; context.beginPath(); context.moveTo(-5, 13); context.lineTo(0, 0); context.lineTo(5, 13); context.fill(); context.rotate(-angle); context.translate(-xHead, -yHead); //Small circle in center context.fillStyle = 'black'; context.beginPath(); context.arc(xCenter, yCenter, 4, 0, 2 * Math.PI); context.fill(); //Outer equator context.lineWidth = 2; context.strokeStyle = 'black'; context.beginPath(); context.ellipse(xCenter, yCenter, radius-1, equatorRadiusY, 0, 0, Math.PI); context.stroke(); //Dot showing position on the sphere const dotColor = operatorColor(operatorNum) if (makeDot == true) { context.globalAlpha = dotOpac; context.shadowBlur = 5; context.shadowColor = dotColor; context.fillStyle = dotColor; context.beginPath(); context.arc(xHead, yHead, dotRadius, 0, 2 * Math.PI); context.fill(); } context.shadowBlur = 0; context.globalAlpha = 1; } 3c:T576,function radio(config = {}) { let { value: formValue, title, description, submit, options } = Array.isArray(config) ? {options: config} : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "radio", title, description, submit, getValue: input => { if (input.checked) return input.value; const checked = Array.prototype.find.call(input, radio => radio.checked); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }3d:[] 31:{"id":"2b11fb1b8cb7c297","slug":"quantum-computing-animation","title":"Quantum Computing Animation","thumbnail":"65601e7530f0683535e63588f9be89e9b3aae1c43242a87f4628797bf1aa122f","access_level":"public","create_time":"$D2020-01-28T02:04:50.980Z","update_time":"$D2020-01-28T02:40:45.712Z","view_time":null,"first_public_time":"$D2020-01-28T02:40:11.574Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"2fa6992505afc473","login":"jmkunze","name":"Jillian Kunze","avatar_url":"https://avatars-next.observableusercontent.com/9b5b21e03c248c6ebbe13799511182b4ed03242084d3ed3eb8bdd351c88ae70a","tier":"starter_2024"},"version":2495,"publish_version":2495,"role":null,"authored":false,"authors":[{"type":"individual","id":"eed168a140c90cae","login":"jmkunze","name":"Jillian Kunze","avatar_url":"https://avatars-next.observableusercontent.com/9b5b21e03c248c6ebbe13799511182b4ed03242084d3ed3eb8bdd351c88ae70a","tier":null}],"members":[{"type":"individual","id":"eed168a140c90cae","login":"jmkunze","name":"Jillian Kunze","avatar_url":"https://avatars-next.observableusercontent.com/9b5b21e03c248c6ebbe13799511182b4ed03242084d3ed3eb8bdd351c88ae70a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Quantum Computing Animation","cells":[{"id":0,"value":"md`# Quantum Computing Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2477,"value":"md` This animation was developed for the [Quantum Computing](https://quantumatlas.umd.edu/entry/QuantumComputing) entry of the Joint Quantum Institute's Quantum Atlas.\n\n----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"function radiusOfEllipse(angleCircle) {\n //find radius of ellipse at certain angle using polar equation \n const angle = angleCircle - Math.PI/2; //change angle on sphere to angle along ellipse \n let a = radius; //semi-major axis\n const b = 33*radius/80; //semi-minor axis \n const e = Math.sqrt(1 - (b/a)*(b/a)); //eccentricity\n const d = e * Math.cos(angle); //element in denominator of radial equation \n const radiusEllipse = b/Math.sqrt(1 - d*d) - 1; //radius at angle \n return radiusEllipse\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"function makeBlochSphereTether(x) { \n //make tethering line\n const yWire = height/2 + 103; \n context.lineCap = 'butt'\n context.setLineDash([1,1]);\n context.strokeStyle = '#40403F' \n context.lineWidth = 3; \n context.beginPath();\n context.moveTo(x-0.3,yWire);\n context.lineTo(x-0.3,180);\n context.stroke();\n context.setLineDash([0, 0]); //undo line dash \n \n //make dot on wire \n context.fillStyle = 'black'; \n context.beginPath();\n context.arc(x, yWire, 4, 0, 2 * Math.PI); \n context.fill(); \n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function makeWire() {\n //make the long horizontal wire\n context.fillStyle = '#C0C0C0'; \n context.fillRect((75/950)*myWidth, height/2 + 100, (80/95)*myWidth, 5); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"function operatorColor(operatorNum) { \n //set operator color \n let opColor \n if (operatorNum === 'X') {\n opColor = '#e68c77'; //'#EA9E8D'; \n } else if (operatorNum === 'Y') { \n opColor = '#50a8d1';//'#64B2D6';\n } else if (operatorNum === 'Z') { \n opColor = '#f9b645'; //'#FAC05E';\n } else if (operatorNum === 'S') {\n opColor = '#9895bc'; //'#A7A5C6';\n } else if (operatorNum === 'None') {\n opColor = '#63E6A0'//'#59CD90'; //lighter shade of arrow color\n }\n return opColor\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"function makeEverything(x,angle,length=radius,isDot=false,dotRadius=4,operatorNum,dotOpac=1,axisOpac=0) { \n //make all the components of the figure \n context.clearRect(0, 0, width, height);\n context.canvas.style.cssText = \"width: 100%;\"\n makeWire();\n makeBlochSphereTether(x);\n makeBlochSphere(x,angle,length,isDot,dotRadius,operatorNum,dotOpac,axisOpac);\n makeSetup(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"radius = {\n //radius of the Bloch sphere\n let radius = (100/950)*myWidth ; // let radius = (80/950)*myWidth; \n if (radius < 35) { \n radius = 35; \n }\n if (radius > 80) { \n radius = 80; \n }\n return radius\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"mutable paused = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"//context = DOM.context2d(myWidth, height); \ncontext = makeContext(myWidth, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"myWidth = Math.min(950, width); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"height = 500 ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2337,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2336,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"md`Bloch spheres for radio button:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2198,"value":"bloch0 = {\n let context0 = makeContext(180, 180);\n blochSphere(context0, 90, 90, 0);\n yield context0.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2217,"value":"bloch1 = {\n let context1 = makeContext(180, 180);\n blochSphere(context1, 90, 90, Math.PI);\n yield context1.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"bloch0p1 = {\n let context0p1 = makeContext(180, 180);\n blochSphere(context0p1, 90, 90, Math.PI/2);\n yield context0p1.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2222,"value":"bloch0m1 = {\n let context0m1 = makeContext(180, 180);\n context0m1.canvas.style.cssText = \"width: 100%;\"\n blochSphere(context0m1, 90, 90, 3*Math.PI/2);\n yield context0m1.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2380,"value":"md`Radio buttons:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"viewof ogState = radio({\n //title: 'Starting State',\n options: [\n { label: bloch0 , value: 0 }, \n { label: bloch1, value: Math.PI },\n { label: bloch0p1, value: Math.PI/2 }, \n { label: bloch0m1, value: 3*Math.PI/2 }, \n /*{ label: tex`\\lvert 0 \\rangle`, value: 0 }, \n { label: tex`\\lvert 1 \\rangle`, value: Math.PI },\n { label: tex`\\dfrac{\\lvert 0 \\rangle + \\lvert 1 \\rangle}{\\sqrt{2}}`, value: Math.PI/2 }, \n { label: tex`\\dfrac{\\lvert 0 \\rangle - \\lvert 1 \\rangle}{\\sqrt{2}}`, value: 3*Math.PI/2 }, */\n ],\n value: 0\n})\n//latex notation found on https://observablehq.com/@ppedemon/quantum-circuit-simulator","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"viewof operator1 = radio({\n //title: 'First Operation',\n options: [\n { label: 'X', value: 'X' }, \n { label: 'Y', value: 'Y' }, \n { label: 'Z', value: 'Z' }, \n { label: 'S', value: 'S' }, \n ],\n value: 'X',\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2058,"value":"viewof operator2 = radio({\n //title: 'Second Operation',\n options: [\n { label: 'None', value: 'none' },\n { label: 'X', value: 'X' },\n { label: 'Y', value: 'Y' },\n { label: 'Z', value: 'Z' },\n { label: 'S', value: 'S' },\n ],\n value: 'none'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2066,"value":"viewof operator3 = radio({\n //title: 'Third Operation',\n options: [\n { label: 'None', value: 'none' },\n { label: 'X', value: 'X' },\n { label: 'Y', value: 'Y' },\n { label: 'Z', value: 'Z' },\n { label: 'S', value: 'S' },\n ],\n value: 'none'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"md`Pause button:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2070,"value":"pauseButton = {\n \n const button = html``\n button.onclick = () => {mutable paused = !paused}\n return button\n}\n//const button = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"value":"md`Quantum Computing Canvas:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"viewof quantumComputingCanvas = { \n makeEverything(radius + 5,ogState,radius,false,6,'None',1,1); \n yield context.canvas;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2062,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2493,"value":"html` \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2348,"value":"import {makeContext} from \"@jmkunze/quantum-atlas-repository\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n return require('popper@1.0.1/index.js').catch(() => jquery);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2017,"value":"bootstrap = require('bootstrap')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"import {blochSphere} from \"@jmkunze/quantum-atlas-repository\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"meta = {\n const meta = {\n author: \"Jillian Kunze\",\n affiliation: \"Joint Quantum Institute\",\n title: \"Quantum Computing\",\n lastUpdate: \"1-10-20\"\n }\n return meta\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 32:"$31:body"