2d:null 2e:["$","title",null,{"children":"Bloch Sphere Animation | Jillian Kunze | Observable"}] 33:T77d,blochSphereDiagram = { const context2 = DOM.context2d(400,250); blochSphere(context2, 125, 125, Math.PI/4, 80, true, 4, 80) //Make axes: context2.strokeStyle = "#CCCCCC"; context2.lineWidth = 1.5; context2.beginPath(); //Z axis context2.moveTo(125,121); context2.lineTo(125,5); context2.stroke(); context2.beginPath(); //X axis context2.moveTo(121.5,127); context2.lineTo(125 + 110* Math.sin(5*Math.PI/4),125 - 110* Math.cos(5*Math.PI/4)); context2.stroke(); context2.beginPath(); //Y axis context2.moveTo(129,125); context2.lineTo(250,125); context2.stroke(); //Make location markers: context2.strokeStyle = "#808080"; context2.lineWidth = 2; context2.beginPath(); //North Pole path context2.moveTo(125,40); context2.lineTo(125,50); context2.stroke(); context2.beginPath(); //South Pole path context2.moveTo(125,200); context2.lineTo(125,210); context2.stroke(); context2.beginPath(); //Equator path context2.moveTo(200,125); context2.lineTo(210,125); context2.stroke(); context2.beginPath(); //State path context2.moveTo(181,69); context2.lineTo(189,62); context2.stroke(); //Axis text context2.fillStyle = '#B3B3B3'; context2.font = '14px sans-serif'; context2.fillText('z axis', 130 , 10); context2.fillText('x axis', 125 + 130* Math.sin(5*Math.PI/4),125 - 130* Math.cos(5*Math.PI/4)); context2.fillText('y axis', 245, 120); //Location text context2.fillStyle = '#404040'; context2.font = '16px sans-serif'; let textSizeNP = context2.measureText('North Pole'); context2.fillText('North Pole', 125 - textSizeNP.width/2, 35); let textSizeSP = context2.measureText('South Pole'); context2.fillText('South Pole', 125 - textSizeSP.width/2, 225); context2.fillText('Equator',208, 140); context2.fillText('Quantum State',190, 63); return context2.canvas }34:T1505,viewof blochCanvas = { while (true) { context.clearRect(0, 0, width, height); const image = new Image(); // Image constructor image.src = 'https://live.staticflickr.com/5228/5679642883_24a2e905e0_b.jpg'; //image from https://www.flickr.com/photos/donkeyhotey/5679642883 - labeled for reuse with modification //Fade the earth let opacity = 1; let offset = 0.04008*myWidth - 2.217; //offset to Earth's size while (opacity > 0) { context.clearRect(0, 0, width, height); context.globalAlpha = opacity; context.drawImage(image, myWidth/2-radius-offset/2-1,height/2-radius-offset/2,2*radius+offset,2*radius+offset); context.globalAlpha = 1; makeBlochSphere(myWidth/2,height/2,Math.PI/2); opacity = opacity - 0.005; yield context.canvas; } context.clearRect(0, 0, width, height); context.globalAlpha = 1; //Move to 1 let angle = Math.PI/2; while (angle < Math.PI) { angle += 0.01; context.clearRect(0, 0, width, height); makeArrowPath(1) makeBlochSphere(myWidth/2,height/2,angle); yield context.canvas; } angle = Math.PI; context.clearRect(0, 0, width, height); makeBlochSphere(myWidth/2,height/2,angle); makeCircle(myWidth/2 + radius*Math.sin(angle), height/2 - radius*Math.cos(angle)) context.fillStyle = '#EF767A'; context.font = 'bold 22px sans-serif'; if (myWidth < 300) { context.font = 'bold 18px sans-serif'; } context.fillText('1', myWidth/2 - 0.5*context.measureText('1').width, height/2 + radius + 42); context.lineWidth = 3; context.strokeStyle = '#EF767A'; context.lineJoin = 'bevel'; context.strokeRect(myWidth/2 - 1.1*context.measureText('1').width, height/2 + radius + 19, 2.2*context.measureText('1').width, 32); await Promises.delay(900); //Move to 0 while (angle < 2*Math.PI) { angle += 0.01; context.clearRect(0, 0, width, height); makeArrowPath(2) makeBlochSphere(myWidth/2,height/2,angle); yield context.canvas; } angle = 2*Math.PI context.clearRect(0, 0, width, height); makeBlochSphere(myWidth/2,height/2,angle); makeCircle(myWidth/2 + radius*Math.sin(angle), height/2 - radius*Math.cos(angle)) context.fillStyle = '#EF767A'; context.fillText('0', myWidth/2 - 0.5*context.measureText('0').width, height/2 - radius - 27); context.lineWidth = 3; context.strokeStyle = '#EF767A'; context.lineJoin = 'bevel'; context.strokeRect(myWidth/2 - 1.1*context.measureText('0').width, height/2 - radius - 51, 2.2*context.measureText('1').width, 32); await Promises.delay(900); //Move to 0 + 1 while (angle < 5*Math.PI/2) { angle += 0.01; context.clearRect(0, 0, width, height); makeArrowPath(3) makeBlochSphere(myWidth/2,height/2,angle); yield context.canvas; } angle = Math.PI/2; context.clearRect(0, 0, width, height); makeBlochSphere(myWidth/2,height/2,angle); makeCircle(myWidth/2 + radius*Math.sin(angle), height/2 - radius*Math.cos(angle)) context.fillStyle = '#EF767A'; context.fillText('0+1', myWidth/2 + radius + 18, height/2 + 10); context.lineWidth = 3; context.strokeStyle = '#EF767A'; context.lineJoin = 'bevel'; context.strokeRect(myWidth/2 + radius + 21 - 0.25*context.measureText('0+1').width , height/2 - 13, 1.3*context.measureText('0+1').width, 32); await Promises.delay(900); //Move to 0-1 while (angle < 3*Math.PI/2) { angle += 0.01 + Math.abs(0.01*Math.cos(angle)) let length = radiusOfEllipse(angle) context.clearRect(0, 0, width, height); makeArrowPath(4) makeBlochSphere(myWidth/2,height/2,angle,length); yield context.canvas; } angle = 3*Math.PI/2; context.clearRect(0, 0, width, height); makeBlochSphere(myWidth/2,height/2,angle); makeCircle(myWidth/2 + radius*Math.sin(angle), height/2 - radius*Math.cos(angle)) context.fillStyle = '#EF767A'; context.fillText('0-1', myWidth/2 - radius - context.measureText('0-1').width - 18, height/2 + 10); context.lineWidth = 3; context.strokeStyle = '#EF767A'; context.lineJoin = 'bevel'; context.strokeRect(myWidth/2 - radius - 15 - 1.25*context.measureText('0-1').width , height/2 - 13, 1.3*context.measureText('0-1').width, 32); await Promises.delay(900); //Move back to 1 while (angle < 5*Math.PI/2) { angle += 0.01 + Math.abs(0.01*Math.cos(angle)); let length = radiusOfEllipse(angle) context.clearRect(0, 0, width, height); makeArrowPath(5) makeBlochSphere(myWidth/2,height/2,angle,length); yield context.canvas; } //Unfade the earth opacity = 0; while (opacity < 1) { context.clearRect(0, 0, width, height); context.globalAlpha = opacity; context.drawImage(image, myWidth/2-radius-offset/2 -1,height/2-radius-offset/2,2*radius+offset,2*radius+offset); context.globalAlpha = 1; makeBlochSphere(myWidth/2,height/2,Math.PI/2); opacity = opacity + 0.005; yield context.canvas; } await Promises.delay(1200); context.clearRect(0, 0, width, height); context.globalAlpha = 1; } } 35:T7cd,function makeBlochSphere(xCenter, yCenter, angle, length = radius) { //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) context.strokeStyle = 'black'; context.lineWidth = 2; const equatorRadiusY = 33*radius/80; //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 = '#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 = 3.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(-7, 16); context.lineTo(0, 0); context.lineTo(7, 16); 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(); } 36:[] 31:{"id":"f2b74cc0d8ebce1c","slug":"bloch-sphere-animation","title":"Bloch Sphere Animation","thumbnail":"073f96574830a8a0f3a796feb68258e312f025534d28840dc2b22559d1403828","access_level":"public","create_time":"$D2020-01-24T15:37:22.905Z","update_time":"$D2020-01-28T02:56:55.439Z","view_time":null,"first_public_time":"$D2020-01-28T02:40:06.134Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"2fa6992505afc473","login":"jmkunze","name":"Jillian Kunze","avatar_url":"https://avatars-next.observableusercontent.com/9b5b21e03c248c6ebbe13799511182b4ed03242084d3ed3eb8bdd351c88ae70a","tier":"starter_2024"},"version":573,"publish_version":573,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bloch Sphere Animation","cells":[{"id":0,"value":"md`# Bloch Sphere Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`\nA quantum bit, or qubit, is quantum computing's analog to a classical computer bit. A qubit is a two-level quantum system: it only has two possible configurations, which we can call 1 and 0. However, a quantum mechanical object like a qubit can also be in a state called superposition, where it has a certain likelihood of being in one configuration or the other, but we don't actually know which one it is until we measure it. \n\nTo visualize the quantum state of a qubit, we use the Bloch Sphere. The latitute and longitude of an arrow tip at the sphere's surface is related to the likelihood of the system being in either configuration. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`The North Pole of the sphere represents the quantum mechanical state 1, the South Pole represents state 0, and any other location on the surface represents a superposition of the two states. The animation below shows the arrow ranging between many possible qubit values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof graphic = {\n return html `\n

\n ${viewof blochCanvas}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md` This animation was made for the [Qubit](https://quantumatlas.umd.edu/entry/Qubit) entry of the Joint Quantum Institute's Quantum Atlas. For an interactive look at how a qubit is manipulated in a quantum program, check out my [quantum computing animation](https://observablehq.com/d/a860928527951df1). \n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"function makeArrowPath(part) { \n //draw great circle showing path arrow takes \n const yCenter = height/2\n const equatorY = 33*radius/80;\n \n context.lineCap = 'round'; \n context.globalAlpha = 0.5; \n context.beginPath();\n context.setLineDash([]); \n context.strokeStyle = '#63E6A0'\n context.lineWidth = 10; \n \n if (part === 1) {\n context.ellipse(myWidth/2, yCenter, radius, radius, 3*Math.PI/2, Math.PI/2,Math.PI);\n } else if (part === 2) {\n context.ellipse(myWidth/2, yCenter, radius, radius, 3*Math.PI/2, Math.PI,2*Math.PI);\n } else if (part === 3) {\n context.ellipse(myWidth/2, yCenter, radius, radius, 3*Math.PI/2, 0, Math.PI/2);\n } else if (part === 4) {\n context.ellipse(myWidth/2, yCenter, radius, equatorY, Math.PI, Math.PI, 2*Math.PI);\n } else if (part === 5) {\n context.ellipse(myWidth/2, yCenter, radius, equatorY, Math.PI, 0, Math.PI);\n context.setLineDash([10, 7.4]); \n }\n \n context.stroke();\n context.globalAlpha = 1; \n context.setLineDash([])\n \n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"function makeCircle(xCenter, yCenter) {\n context.globalAlpha = 0.5; \n context.fillStyle = '#63E6A0'; \n context.beginPath();\n context.arc(xCenter, yCenter, 10, 0, 2 * Math.PI); \n context.fill();\n context.globalAlpha = 1; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"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":27,"value":"radius = 0.453*myWidth - 52.162","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"context = DOM.context2d(myWidth, height) //use this for published version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"myWidth = Math.min(500, width); //use this for published version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 500 *(myWidth/550)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html` \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"import {blochSphere} from \"@jmkunze/quantum-atlas-repository\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"meta = {\n const meta = {\n author: \"Jillian Kunze\",\n affiliation: \"Joint Quantum Institute\",\n title: \"Bloch Sphere Animation\",\n lastUpdate: \"1-27-20\"\n }\n return meta\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"