2d:null 2e:["$","title",null,{"children":"Quantum Atlas Repository 🗺️ | Jillian Kunze | Observable"}] 33:T934,function blochSphere(contextB, xCenter, yCenter, angle, length = 80, makeDot = false, dotRadius = 4,radius = 80) { //Inputs: x and y positions 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 contextB.strokeStyle = 'black'; contextB.lineWidth = 2; //Outer circle contextB.setLineDash([]); //undo line dash contextB.beginPath(); contextB.arc(xCenter, yCenter, radius, 0, 2 * Math.PI); contextB.stroke(); //Inner equator contextB.beginPath(); contextB.setLineDash([10, 7.4]); //parameters for line dash necessary for symmetry contextB.ellipse(xCenter, yCenter, radius-1, 33, 0, Math.PI, 2*Math.PI); contextB.stroke(); //Arrow line const arrowColor = '#4DB37C'; //'#C61714'; const xLine = xCenter + (length - 4) * Math.sin(angle); //position of end of arrow line const yLine = yCenter - (length - 4) * Math.cos(angle); contextB.setLineDash([]); contextB.strokeStyle = arrowColor; contextB.lineWidth = 1.5; contextB.beginPath(); contextB.moveTo(xCenter,yCenter); contextB.lineTo(xLine,yLine); contextB.stroke(); //Arrow head const xHead = xCenter + (length) * Math.sin(angle); //position of arrow head const yHead = yCenter - (length) * Math.cos(angle); contextB.translate(xHead, yHead); contextB.rotate(angle); //rotate arrow head according to angle of line contextB.fillStyle = arrowColor; contextB.beginPath(); contextB.moveTo(-4, 10); contextB.lineTo(0, 0); contextB.lineTo(4, 10); contextB.fill(); contextB.rotate(-angle); contextB.translate(-xHead, -yHead); //Small circle in center contextB.fillStyle = 'black'; contextB.beginPath(); contextB.arc(xCenter, yCenter, 4, 0, 2 * Math.PI); contextB.fill(); //Outer equator contextB.lineWidth = 2; contextB.strokeStyle = 'black'; contextB.beginPath(); contextB.ellipse(xCenter, yCenter, radius-1, 33, 0, 0, Math.PI); contextB.stroke(); //Dot showing position on the sphere if (makeDot == true) { const dotColor = '#63E6A0'; //'#FF3633'; contextB.shadowBlur = 5; contextB.shadowColor = dotColor; contextB.fillStyle = dotColor; contextB.beginPath(); contextB.arc(xHead, yHead, dotRadius, 0, 2 * Math.PI); contextB.fill(); } contextB.shadowBlur = 0; } 34:Te11,function makeElectron(context,x,y,spinType,eColor,bColor,opacity) { //function to create the electron body and arrow context.globalAlpha = opacity; //set certain opacity const radius = 10; //radius of electron body context.fillStyle = eColor; //color of electron body context.strokeStyle = bColor; context.beginPath(); context.arc(x, y, radius, 0, 2*Math.PI); //create the circle of the electron body context.fill(); if (spinType === 'spin up') { //make outline around circle context.beginPath(); context.arc(x, y, radius+0.4, (3*Math.PI/2) -0.13, (3*Math.PI/2) + 0.13,true); context.stroke() //make arrow body context.fillRect(x -2, y - radius-5.3, 4, 5.6) //make arrow head context.beginPath(); context.moveTo(x - 5, y - 15); context.lineTo(x, y - 25); context.lineTo(x + 5, y - 15); context.closePath(); context.fill(); //outline arrow head context.beginPath(); context.moveTo(x-2, y-radius ) context.lineTo(x-2,y-15) context.lineTo(x - 5, y - 15); context.lineTo(x, y - 25); context.lineTo(x + 5, y - 15); context.lineTo(x + 2, y - 15); context.lineTo(x + 2, y - radius); context.stroke(); } else if (spinType === 'spin down') { //make outline around circle context.beginPath(); context.arc(x, y, radius+0.4, (Math.PI/2) -0.13, (Math.PI/2) + 0.13,true); context.stroke() //make arrow body context.fillRect(x - 2, y + radius - 0.5, 4, 6.3) //make arrow head context.beginPath(); context.moveTo(x - 5, y + 15); context.lineTo(x, y + 25); context.lineTo(x + 5, y + 15); context.closePath(); context.fill(); //outline arrow head context.beginPath(); context.moveTo(x-2, y+radius ) context.lineTo(x-2,y+15) context.lineTo(x - 5, y + 15); context.lineTo(x, y + 25); context.lineTo(x + 5, y + 15); context.lineTo(x + 2, y + 15); context.lineTo(x + 2, y + radius); context.stroke(); } else { //makes both upper and lower arrows //Up arrow: //make outline around circle context.beginPath(); context.arc(x, y, radius+0.4, (3*Math.PI/2) -0.13, (Math.PI/2) +0.13,true); context.stroke() //make arrow body context.fillRect(x -2, y - radius-5.3, 4, 5.6) //make arrow head context.beginPath(); context.moveTo(x - 5, y - 15); context.lineTo(x, y - 25); context.lineTo(x + 5, y - 15); context.closePath(); context.fill(); //outline arrow head context.beginPath(); context.moveTo(x-2, y-radius ) context.lineTo(x-2,y-15) context.lineTo(x - 5, y - 15); context.lineTo(x, y - 25); context.lineTo(x + 5, y - 15); context.lineTo(x + 2, y - 15); context.lineTo(x + 2, y - radius); context.stroke(); //Down arrow: //make outline around circle context.beginPath(); context.arc(x, y, radius+0.4, (Math.PI/2) - 0.13,(3*Math.PI/2) + 0.13,true); context.stroke() //make arrow body context.fillRect(x - 2, y + radius - 0.5, 4, 6.3) //make arrow head context.beginPath(); context.moveTo(x - 5, y + 15); context.lineTo(x, y + 25); context.lineTo(x + 5, y + 15); context.closePath(); context.fill(); //outline arrow head context.beginPath(); context.moveTo(x-2, y+radius ) context.lineTo(x-2,y+15) context.lineTo(x - 5, y + 15); context.lineTo(x, y + 25); context.lineTo(x + 5, y + 15); context.lineTo(x + 2, y + 15); context.lineTo(x + 2, y + radius); context.stroke(); } } 35:T4ea,function makeButton() { const button = html`` button.onclick = () => {mutable paused = !paused} return html`

${button}

` } 36:T604,function makeRadio(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; }37:[] 31:{"id":"afbd270335ecad4e","slug":"quantum-atlas-repository","title":"Quantum Atlas Repository 🗺️","thumbnail":"c7bc270402e62a82719ae049871e055bb2c4034056838ca228a328e5bb2abe45","access_level":"public","create_time":"$D2019-06-14T15:51:22.387Z","update_time":"$D2020-01-21T19:19:59.738Z","view_time":null,"first_public_time":"$D2019-06-14T17:13:34.193Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2fa6992505afc473","login":"jmkunze","name":"Jillian Kunze","avatar_url":"https://avatars-next.observableusercontent.com/9b5b21e03c248c6ebbe13799511182b4ed03242084d3ed3eb8bdd351c88ae70a","tier":"starter_2024"},"version":818,"publish_version":818,"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":0,"collection":null,"type":"notebook","body":{"title":"Quantum Atlas Repository 🗺️","cells":[{"id":0,"value":"md`# Quantum Atlas Repository 🗺️`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`This is in the process of becoming a library for important things used in making animations for the Joint Quantum Institute's [Quantum Atlas](https://quantumatlas.umd.edu/).\n\nMay we offer you: \n * [\\`makeBlochSphere\\`](#blochDemo)\n * [\\`makeElectron\\`](#electronDemo)\n * [\\`makeButton\\`](#buttonDemo)\n * [\\`makeRadio\\`](#radioDemo)\n * [\\`makeContext\\`](#contextDemo)\n * [Important commands for animations](#importantCommand)\n\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"blochDemo = md`---\n## Bloch Sphere 🌐\n\n~~~js\nimport {blochSphere} from \"@jmkunze/quantum-atlas-repository\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`To display a Bloch sphere using the function \\`blochSphere\\`, the inputs are: \n- \\`context\\` = the DOM context to display it on \n- \\`xCenter\\` = the x position of the center of the sphere\n- \\`yCenter\\` = the y position of the center of the sphere\n- \\`angle\\` = angle of arrow as measured from the north pole of the sphere\n- \\`length\\` = length of arrow; default is \\`80\\`, which reaches the outer edge\n- \\`makeDot\\` = whether to put a dot at the end of the arrow to show a position on the Bloch sphere; default is \\`false\\`\n- \\`dotRadius\\` = radius of dot; default value is \\`4\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"{\n let angle = 0; \n let contextB = DOM.context2d(400, 180); \n while (true) { \n contextB.clearRect(0, 0, 400, 180); \n blochSphere(contextB,90,90, angle);\n blochSphere(contextB,300,90, 5*Math.PI/4,42,true,4.5);\n angle += 0.005;\n yield contextB.canvas; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"electronDemo = md`---\n## Electron ⚛️\n\n~~~js\nimport {makeElectron} from \"@jmkunze/quantum-atlas-repository\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`To display an electron using the function \\`makeElectron\\`, the inputs are: \n- \\`context\\` = DOM context you want to display it on \n- \\`x\\` = the x position\n- \\`y\\` = the y position \n- \\`spinType\\` = the spin\n * '\\`spin up\\`' makes a spin up electron\n * '\\`spin down\\`' makes a spin down electron \n * Any other input will make an electron with both spin up and down arrows \n- \\`eColor\\` = color of the electron body (usually, I use \\`#857C55\\`) \n- \\`bColor\\` = color of the electron border (usually, I use \\`black\\`)\n- \\`opacity\\` = opacity of the electron; default is 1, which is fully opaque\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"{\n let context = DOM.context2d(140, 60);\n makeElectron(context,30,30,'spin up','#E76F51','black',1)\n makeElectron(context,60,30,'both babeyy','#F4A261','black',1)\n makeElectron(context,90,30,'spin down','#B1BDC4','black',1)\n yield context.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"buttonDemo = md`---\n## Button 🖱️\n\n~~~js\nimport {makeButton, mutable paused} from \"@jmkunze/quantum-atlas-repository\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"md`This button changes a variable \"paused\" between the values \"Start\" and \"Reset\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"showButton = { \n let button = makeButton()\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"mutable paused = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"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":684,"value":"bootstrap = require('bootstrap')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"radioDemo = md`---\n## Radio Button 📻\n\n~~~js\nimport {makeRadio} from \"@jmkunze/quantum-atlas-repository\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"md`This function creates a radio button that is heavily based on the radio button from [jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) with some styling changes. See the code underneath the example radio button for how to format the input.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"viewof radioExample = makeRadio({\n options: [\n { label: 'Option A', value: 'A' },\n { label: 'Option B', value: 'B' },\n { label: 'Option C', value: 'C' },\n ],\n value: 'A' //initial value that is automatically selected\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"radioExample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"contextDemo = md`---\n## Making the Context ⚙️\n\n~~~js\nimport {makeContext} from \"@jmkunze/quantum-atlas-repository\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`Use this function to create a canvas context that always has the proper CSS width styling to make sure everything scales properly when imported into the Atlas. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"function makeContext(myWidth, myHeight) {\n let context = DOM.context2d(myWidth, myHeight); \n context.canvas.style.cssText = \"width: 100%;\"\n return context\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"importantCommand = md`---\n## Commands used frequently in animations ⌨️\n - Make the context to animate on: \\`context = DOM.context2d(width, height)\\`\n - To change opacity, set \\`context.globalAlpha\\` equal to a number between 0 and 1, 0 being the most transparent\n - Import an image from a web address to use in a canvas: \n - \\`const image = new Image()\\`\n - \\`image.src = 'link' \\`\n - Display an image on a canvas: \\`context.drawImage(image, xPosition, yPosition, image.naturalWidth/scale, image.naturalHeight/scale)\\`\n - Is your animation not working the way you thought it would? If so, within your loop do you have: \n - \\`context.clearRect(0, 0, width, height)\\` to erase previous frames? \n - \\`yield context.canvas\\` to actually make the animation?\n - Get the last element in an array: \\`array[array.length - 1]\\`\n\n\n---\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"meta = {\n const meta = {\n author: \"Jillian Kunze\",\n affiliation: \"Joint Quantum Institute\",\n title: \"Quantum Atlas Repository\",\n lastUpdate: \"11-25-19\"\n }\n return meta\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"