2d:null 2e:["$","title",null,{"children":"Stern-Gerlach Experiment Animation | Jillian Kunze | Observable"}] 33:T6fa,viewof particleDiagram = { const newWidth = Math.min(400, width); let contextD = DOM.context2d(newWidth, 110); //plot electrons makeElectron(contextD,(17/40)*newWidth,55,'spin up',electronColor,'black',1); makeElectron(contextD,(245/400)*newWidth,55,'spin down',electronColor,'black',1); makeElectron(contextD,(325/400)*newWidth,55,'both babeyy',electronColor,'black',1); //style //make text labels contextD.fillStyle = 'black'; contextD.font = '15px sans-serif'; contextD.fillText('Classical Magnet', 0, 20); const textSizeE = context.measureText('Electron'); contextD.fillText('Electron', (267/400)*newWidth - textSizeE.width/2, 20); contextD.font = '13px sans-serif'; if (width<400) { contextD.font = '11px sans-serif'; } contextD.fillText('Spin Up', (143/400)*newWidth, 95); contextD.fillText('Spin Down', (21/40)*newWidth, 95); contextD.fillText('Superposition', (29/40)*newWidth, 95); //make classical magnet; can't use function because it has makeSetup() in it const x = (32/400)*newWidth; const y = 55; const angle = 0; const gradient = context.createLinearGradient(x,y, x+40,y); //create a linear gradient along the magnet gradient.addColorStop(0, '#00467C'); //these are the colors on the big magnets gradient.addColorStop(0.4, '#00467C'); gradient.addColorStop(0.6, '#F25D43'); gradient.addColorStop(1, '#F25D43'); //Make rotated magnet: contextD.translate(x+20, y); contextD.rotate(angle); contextD.translate(-(x+20), -y); contextD.fillStyle = gradient; contextD.fillRect(x, y-10, 40, 20); contextD.strokeStyle = 'black' contextD.strokeRect(x, y-10, 40, 20); //Make unrotated everything else: contextD.translate(x+20, y); contextD.rotate(- angle); contextD.translate(-(x+20), -y); yield contextD.canvas; }34:T5f0,md` The Stern-Gerlach experiment, originally performed in 1922, led to the discovery of quantum spin in electrons. Scientists shot silver atoms (which only have one electron in their outermost orbitals) through a magnetic field that varied over space, then measured where the atoms landed on a screen. The changing magnetic field exerted a force on the electrons, causing the paths of the atoms to change. If a classical magnet had been shot through that magnetic field, we would expect it to end up any random place on the screen based on the strength and orientation of its own magnetism. However, this is not what the scientists found for electrons; instead, the atoms only showed up at two discrete spots on the screen! This is how scientists first learned that electrons have an intrinsic magnetic property called spin, which is quantized so that it can only have certain discrete values. In the animation above, you can shoot a classical magnet or an electron through a changing magnetic field to the screen, where a histogram of the object's final position will build up. The electron has two possible orientations: spin up and spin down. You can also choose for the electron to be in superposition, which means you don't know whether it will be spin up or down until you make a measurement, i.e. when it hits the detector. Have fun exploring the realm of quantum spin! This animation was made for the [Spin](https://quantumatlas.umd.edu/entry/Spin) entry of the Joint Quantum Institute's Quantum Atlas. ---`35:T10a5,classicalMagnet = { button0 let x = myWidth/11; //starting x-position let y = height/2; //starting y-position let numOfRounds = 0; //starting counter let xAdd = myWidth/(3*270/3.9); //sets x-velocity = myWidth/(3*yHeight/yAdd) let yAdd = 3.9; //sets y-velocity if (numOfTrials === 1) { //go slower if there's only one trial xAdd = myWidth/(3*270/2.6) yAdd = 2.6; } while(numOfRounds < numOfTrials) {//run until you attain number of trials determined by slider let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Classical Magnet') {//check that no other button has been pressed; we have to do this a lot let ad = (Math.random() * (yAdd*2)) - yAdd; //make the y-velocity random let angle = (Math.PI / (yAdd*2)) * ad; //angle of rotation correlated to y-velocity while (x<(47/90)*myWidth) { //first half of path let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Classical Magnet') { x = x + xAdd; //advance x in the positive direction classicalMag('part 1',context,x,y,angle,1); //make the actual magnet let xArrow = myWidth/9 - (12/450)*myWidth; //set starting x location for arrow to appear if (xArrow < 60 - (24/450)*myWidth) { //don't go past minimum width of oven xArrow = 60 - (24/450)*myWidth; //formerly 18/450 } if (spins.length < 4 && numOfRounds < 2) { //only show arrow the first couple of times if (x > xArrow && x < (myWidth/3)) { makeObjectArrow(x + 10 ,230,'Magnet'); //make arrow that follows electron } else if (x > myWidth/3) { makeObjectArrow(myWidth/3 + 10,230,'Magnet'); //make frozen arrow } } yield context.canvas; } else { break; //yeet } } while (x<((67/90)*myWidth - 4000/myWidth)) { //second half of path let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Classical Magnet') { x = x + xAdd; y = y - ad; //now we split off in the y-direction classicalMag('part 2',context,x,y,angle,1); yield context.canvas; } else { break; } } let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Classical Magnet') { //make histogram if (y < 85) { bin1.push((8/900)*myWidth); } else if (y<145) { bin2.push((8/900)*myWidth); } else if (y<205) { bin3.push((8/900)*myWidth); } else if (y<264) { bin4.push((8/900)*myWidth); } else if (y<325) { bin5.push((8/900)*myWidth); } else { bin6.push((8/900)*myWidth); } } else { break; } const textSizeH = context.measureText('Hit!'); for (let opacity = 1; opacity >= 0; opacity = opacity - 0.02) { //make magnet fade out and 'Hit!' text fade in let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Classical Magnet') { classicalMag('part 2',context,x,y,angle,opacity); context.globalAlpha = 3*(1 - opacity); if ( (1-opacity)*3 > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, y); yield context.canvas; } else { break; } } for (let opacity = 1; opacity >= 0; opacity = opacity - 0.04) { //make 'Hit!' text fade out let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Classical Magnet') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); context.globalAlpha = 2*opacity; if (2*opacity > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, y); yield context.canvas; } } context.clearRect(0, 0, myWidth, height); makeSetup(context,height); x = myWidth/11; //reset for next round y = height/2; numOfRounds ++; //add 1 to the number of rounds } else { break; } } } 36:Td46,spinUp = { button1 let x = myWidth/11; let y = height/2; let numOfRounds = 0; let xAdd = myWidth/194; //xAdd = myWidth/(3*yHeight/yStep) = myWidth/(3*110/1.7) let yAdd = 1.78; if (numOfTrials === 1) { xAdd = myWidth/300; yAdd = 1.15; } while(numOfRounds < numOfTrials) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin up') { while (x<(47/90)*myWidth) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin up') { x = x + xAdd; context.clearRect(0, 0, myWidth, height); makeElectron(context,x,y,spinSelect,electronColor,'black',1); makeSetup(context,height); let xArrow = myWidth/9 + (11/450)*myWidth; if (xArrow < 60 + (11/450)*myWidth) { xArrow = 60 + (11/450)*myWidth; } if (spins.length < 4 && numOfRounds < 2) { if (x > xArrow && x < (myWidth/3)) { makeObjectArrow(x,220,'Electron'); } else if (x > myWidth/3) { makeObjectArrow(myWidth/3,220,'Electron'); } } yield context.canvas; } else { break; } } while (x<(69/90)*myWidth) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin up') { x = x + xAdd; y = y - yAdd; context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,y,spinSelect,electronColor,'black',1); yield context.canvas; } else { break; } } let spinSelect = spins[spins.length - 1]; const textSizeH = context.measureText('Hit!'); if (spinSelect === 'spin up') { barUp.push((8/900)*myWidth); //add to upper histogram for (let opacity = 1; opacity >= 0; opacity = opacity - 0.02) { //make electron and Hit! text fade out let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin up') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,y,spinSelect,electronColor,'black',opacity); context.globalAlpha = 3*(1 - opacity); if ( (1-opacity)*3 > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, y+20); yield context.canvas; } else{ break; } } for (let opacity = 1; opacity >= 0; opacity = opacity - 0.04) { //make Hit! text fade out let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin up') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); context.globalAlpha = 2*opacity; if (2*opacity > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, y+20); yield context.canvas; } } } context.clearRect(0, 0, myWidth, height); makeSetup(context,height); x = myWidth/11; y = height/2; numOfRounds++; } else { break; } } } 37:Tcda,spinDown = { button2 let x = myWidth/11; let y = height/2; let numOfRounds = 0; let xAdd = myWidth/194; //same as spinUp let yAdd = 1.78; if (numOfTrials === 1) { xAdd = myWidth/300; yAdd = 1.15; } while(numOfRounds < numOfTrials) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin down') { while (x<(47/90)*myWidth) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin down') { x = x + xAdd; context.clearRect(0, 0, myWidth, height); makeElectron(context,x,y,spinSelect,electronColor,'black',1); makeSetup(context,height); let xArrow = myWidth/9 + (11/450)*myWidth; if (xArrow < 60 + (11/450)*myWidth) { xArrow = 60 + (11/450)*myWidth; } if (spins.length < 4 && numOfRounds < 2) { if (x > xArrow && x < (myWidth/3)) { makeObjectArrow(x,230,'Electron'); } else if (x > myWidth/3) { makeObjectArrow(myWidth/3,230,'Electron'); } } yield context.canvas; } else { break; } } while (x<(69/90)*myWidth) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin down') { x = x + xAdd; y = y + yAdd; context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,y,spinSelect,electronColor,'black',1); yield context.canvas; } else { break; } } const textSizeH = context.measureText('Hit!'); let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin down') { barDown.push((8/900)*myWidth); for (let opacity = 1; opacity >= 0; opacity = opacity - 0.02) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin down') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,y,spinSelect,electronColor,'black',opacity); context.globalAlpha = 3*(1 - opacity); if ( (1-opacity)*3 > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, y-10); yield context.canvas; } else { break; } } for (let opacity = 1; opacity >= 0; opacity = opacity - 0.04) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'spin down') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); context.globalAlpha = 2*opacity; if (2*opacity > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, y-10); yield context.canvas; } } } context.clearRect(0, 0, myWidth, height); makeSetup(context,height); x = myWidth/11; y = height/2; numOfRounds ++; } else { break; } } } 38:T16ab,superposition = { button3 let x = myWidth/11; let y = height/2; let numOfRounds = 0; let xAdd = myWidth/194; let yAdd = 1.78; if (numOfTrials === 1) { xAdd = myWidth/300; yAdd = 1.15; } while(numOfRounds < numOfTrials) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { while (x<(47/90)*myWidth) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { x = x + xAdd; context.clearRect(0, 0, myWidth, height); makeElectron(context,x,y,spinSelect,electronColor,'black',1); makeSetup(context,height); let xArrow = myWidth/9 + (11/450)*myWidth; if (xArrow < 60 + (11/450)*myWidth) { xArrow = 60 + (11/450)*myWidth; } if (spins.length < 4 && numOfRounds < 2) { if (x > xArrow && x < (myWidth/3)) { makeObjectArrow(x,230,'Electron'); } else if (x > myWidth/3) { makeObjectArrow(myWidth/3,230,'Electron'); } } yield context.canvas; } else { break; } } let yUp = height/2; let yDown = height/2; //initialize y-position for up and down electrons while (x<(69/90)*myWidth) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { x = x + xAdd; yDown = yDown + yAdd; yUp = yUp - yAdd; context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,yDown,'spin down','#FFBA82',electronColor,1); makeElectron(context,x,yUp,'spin up','#FFBA82',electronColor,1); yield context.canvas; } else { break; } } let spinSelect = spins[spins.length - 1]; const textSizeH = context.measureText('Hit!'); if (spinSelect === 'Superposition') { await Promises.delay(150); //Wait 0.15 seconds for animation purposes let superP = Math.random(); //Choose a random number to decide if electron is spin up or spin down if (superP < 0.5) { barUp.push((8/900)*myWidth); //we've decided it's spin up } else { barDown.push((8/900)*myWidth); //we've decided it's spin down } context.clearRect(0, 0, myWidth, height); makeSetup(context,height); //these prevent the animation from being jumpy if (superP < 0.5) { //spin up makeElectron(context,x,yUp,'spin up',electronColor,'black',1); await Promises.delay(120); for (let opacity = 1; opacity >= 0; opacity = opacity - 0.017) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,yUp,'spin up',electronColor,'black',opacity); context.globalAlpha = 3*(1 - opacity); if ( (1-opacity)*3 > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, yUp+20); yield context.canvas; } else { break; } } for (let opacity = 1; opacity >= 0; opacity = opacity - 0.04) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); context.globalAlpha = 2*opacity; if (2*opacity > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, yUp+20); yield context.canvas; } } } else { //spin down makeElectron(context,x,yDown,'spin down',electronColor,'black',1); await Promises.delay(120); for (let opacity = 1; opacity >= 0; opacity = opacity - 0.017) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); makeElectron(context,x,yDown,'spin down',electronColor,'black',opacity); context.globalAlpha = 3*(1 - opacity); if ( (1-opacity)*3 > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, yDown-10); yield context.canvas; } else { break; } } for (let opacity = 1; opacity >= 0; opacity = opacity - 0.04) { let spinSelect = spins[spins.length - 1]; if (spinSelect === 'Superposition') { context.clearRect(0, 0, myWidth, height); makeSetup(context,height); context.globalAlpha = 2*opacity; if (2*opacity > 1) { context.globalAlpha = 1; } context.fillStyle = '#EBA638'; context.fillText('Hit!', (23/30)*myWidth - 1.8*textSizeH.width, yDown-10); yield context.canvas; } } } context.clearRect(0, 0, myWidth, height); makeSetup(context,height); x = myWidth/11; y = height/2; numOfRounds ++; } else { break; } } else { break; } } } 39:T15e1,function makeSetup(context,height) { //this function makes all of the background elements in the animation, as well as initializes the boxes for the histogram context.globalAlpha = 1; //set maximum opacity, in case lower opacity carries over from elements fading //Oven: context.fillStyle = '#EBA638'; //color to fill in shape with let ovenHeight = myWidth/9; if (ovenHeight < 80) { ovenHeight = 80; } let ovenWidth = myWidth/9; if (ovenWidth < 60) { ovenWidth = 60; } context.fillRect(0, height/2-ovenHeight/2, ovenWidth, ovenHeight); //make the shape context.fillStyle = '#777777'; context.font = "17px sans-serif"; const textSizeSo = context.measureText('Source'); context.fillText('Source', ovenWidth - textSizeSo.width - 5, height/2 - 5*ovenHeight/6); context.strokeStyle = '#777777'; //make the curve of the arrow from the label to the oven context.lineWidth = 1.7; context.lineCap = "round"; context.beginPath(); context.moveTo(ovenWidth - 2, height/2 - 5*ovenHeight/6 - 5); context.quadraticCurveTo(ovenWidth + (4/90)*myWidth, height/2-4*ovenHeight/5, ovenWidth + (10/900)*myWidth, height/2-ovenHeight/2-5); //cpx,cpy,end point x,y context.stroke(); context.beginPath(); //make the head of the arrow context.moveTo(ovenWidth + (10/900)*myWidth, height/2-2*ovenHeight/3); context.lineTo(ovenWidth + (10/900)*myWidth, height/2-ovenHeight/2-5); context.lineTo(ovenWidth + (22/900)*myWidth, height/2-4.1*ovenHeight/7); context.stroke(); //Collimator: context.fillStyle = '#A56703'; context.fillRect(ovenWidth,height/2-28,(11/450)*myWidth,56); //Upper magnet: context.fillStyle = '#F25D43'; let gradientUp = context.createLinearGradient((4/9)*myWidth,120,(4/9)*myWidth,70); //create gradient for upper magnet gradientUp.addColorStop(0, '#F25D43'); gradientUp.addColorStop(1, 'white'); context.fillStyle = gradientUp; context.strokeStyle = 'white'; //sets outer boundary color for shape we're creating context.beginPath(); context.moveTo(myWidth/3, 120); //we're starting to trace out the shape we want context.lineTo((4/9)*myWidth, 160); context.lineTo((5/9)*myWidth, 120); context.lineTo((5/9)*myWidth,70); context.lineTo(myWidth/3,70); context.lineTo(myWidth/3,120); context.closePath(); context.fill(); //Lower magnet: context.fillStyle = '#00467C'; context.fillRect(myWidth/3,250,myWidth/30,30); //upper prongs context.fillRect((47/90)*myWidth,250,myWidth/30,30); let gradientDown = context.createLinearGradient((4/9)*myWidth,270,(4/9)*myWidth,330); gradientDown.addColorStop(0, '#00467C'); gradientDown.addColorStop(1, 'white'); context.fillStyle = gradientDown; context.fillRect(myWidth/3,270,(2/9)*myWidth,60); //Area where histogram will go context.fillStyle = '#EDEDED' context.fillRect((23/30)*myWidth,height/2 - 180,7*myWidth/30,360); //Screen: context.fillStyle = '#777777'; context.fillRect((23/30)*myWidth,height/2 - 180,myWidth/90,360); context.font = '17px sans-serif'; const textSizeT = context.measureText('Target'); let xTarget = (23/30)*myWidth - 2*textSizeT.width; if (xTarget < (5/9)*myWidth) { //if text would go into the upper magnet xTarget = (5.2*myWidth/9); } context.fillText('Target', xTarget, 80); context.strokeStyle = '#777777'; //make the curve of the arrow from the label to the screen context.lineWidth = 1.7; context.lineCap = "round"; context.beginPath(); context.moveTo(xTarget + textSizeT.width/3, 86); context.quadraticCurveTo(xTarget + 1.7*textSizeT.width/3,105, (22.7/30)*myWidth, 90); context.stroke(); context.beginPath(); //make the head of the arrow context.moveTo((22.4/30)*myWidth, 86); context.lineTo((22.7/30)*myWidth, 90); context.lineTo((22.4/30)*myWidth, 97); context.stroke(); //Text on magnets: context.fillStyle = '#FFF5EE'; context.font = '25px sans-serif'; const textSizeN = context.measureText('N'); const textSizeS = context.measureText('S'); context.fillText('N', (4/9)*myWidth - (textSizeN.width)/2, 130); context.fillText('S', (4/9)*myWidth - (textSizeS.width)/2, 306); context.lineWidth = 1; //Upper bar graph: function getSum(total, num) { //sum up the elements in an array return total + num; } let lengthUp = barUp.reduce(getSum); //add up all the elements in the spin up histogram array context.fillStyle = '#F25D43'; context.fillRect((7/9)*myWidth,85,lengthUp,55); //make rectangle based on the current length of the spin up histogram array //Lower bar graph: let lengthDown = barDown.reduce(getSum); context.fillStyle = '#00467C'; context.fillRect((7/9)*myWidth,260,lengthDown,55); //Classical magnet histogram bar 1: let length1 = bin1.reduce(getSum); context.fillStyle = '#F25D43'; context.fillRect((7/9)*myWidth, 20, length1, 55); //Bar 2: let length2 = bin2.reduce(getSum); context.fillStyle = '#C2584E'; context.fillRect((7/9)*myWidth, 81, length2, 55); //Bar 3: let length3 = bin3.reduce(getSum); context.fillStyle = '#91545A'; context.fillRect((7/9)*myWidth, 142, length3, 55); //Bar 4: let length4 = bin4.reduce(getSum); context.fillStyle = '#614F65'; context.fillRect((7/9)*myWidth, 203, length4, 55); //Bar 5: let length5 = bin5.reduce(getSum); context.fillStyle = '#304B71'; context.fillRect((7/9)*myWidth, 264, length5, 55); //Bar 6: let length6 = bin6.reduce(getSum); context.fillStyle = '#00467C'; context.fillRect((7/9)*myWidth, 325, length6, 55); }3a:T648,function makeObjectArrow(x,y,label) { //input: x position of object, y position for end of arrow, label of object ('Classical Magnet' or 'Electron') context.fillStyle = '#777777'; context.font = "17px sans-serif"; const textSizeL = context.measureText(label); context.fillText(label, 2*myWidth/9 - textSizeL.width/2, 280); //make the line of the arrow from the label towards the object context.strokeStyle = '#777777'; context.lineWidth = 1.7; context.lineCap = "round"; context.beginPath(); context.moveTo(2*myWidth/9 - textSizeL.width/10, 260); context.lineTo(x,y); context.stroke(); //calculate where to make the arrow head (warning: lots of geometry) const theta = Math.atan(30/Math.abs(x-(2*myWidth/9 - textSizeL.width/10))); const phi = 0.6; //about 35 degrees const l = 12; //length of arrow tip let delYLeft = l*Math.cos(phi+theta - (Math.PI/2)); //before vertical point let delXLeft = l*Math.sin(phi + theta - (Math.PI/2)); let delYRight = l*Math.cos(phi+(Math.PI/2)-theta); let delXRight = l*Math.sin(phi+(Math.PI/2)-theta); if (x > 2*myWidth/9 - textSizeL.width/10) { //after vertical point delYLeft = l*Math.cos(phi+(Math.PI/2)-theta); delXLeft = l*Math.sin(phi+(Math.PI/2)-theta); delYRight = l*Math.cos(phi+theta - (Math.PI/2)); delXRight = l*Math.sin(phi + theta - (Math.PI/2)); } //Now actually make the head of the arrow context.beginPath(); context.moveTo(x - delXLeft,y + delYLeft); context.lineTo(x,y); context.lineTo(x + delXRight,y+delYRight); context.stroke(); context.lineWidth = 1; }3b:T688,function classicalMag(part,context,x,y,angle,opacity) { //this function creates the rotated classical magnet in the animation const gradient = context.createLinearGradient(x,y, x+40,y); //create a linear gradient along the magnet gradient.addColorStop(0, '#00467C'); //these are the colors on the big magnets gradient.addColorStop(0.4, '#00467C'); gradient.addColorStop(0.6, '#F25D43'); gradient.addColorStop(1, '#F25D43'); if (part === 'part 1') { //while magnet is moving horizontally context.clearRect(0, 0, myWidth, height); //Make rotated magnet: context.translate(x+20, y); context.rotate(angle); context.translate(-(x+20), -y); context.fillStyle = gradient; context.fillRect(x, y-10, 40, 20); context.strokeStyle = 'black' context.strokeRect(x, y-10, 40, 20); //Make unrotated everything else: context.translate(x+20, y); context.rotate(- angle); context.translate(-(x+20), -y); makeSetup(context,height); //do this last so magnet is behind oven/collimator } else { //while magnet is moving diagonally context.clearRect(0, 0, myWidth, height); makeSetup(context,height); //do this first so magnet is in front of screen context.globalAlpha = opacity; //set a certain opacity //Make rotated magnet: context.translate(x+20, y); context.rotate(angle); context.translate(-(x+20), -y); context.fillStyle = gradient context.fillRect(x, y-10, 40, 20); context.strokeStyle = 'black' context.strokeRect(x, y-10, 40, 20); //Unrotate: context.translate(x+20, y); context.rotate(-angle); context.translate(-(x+20), -y); } } 3c:[] 31:{"id":"18741e92bdcca050","slug":"stern-gerlach-experiment-animation","title":"Stern-Gerlach Experiment Animation","thumbnail":"d7d6b3850d640e1a05af4d1d6e9ae29b59182c7209e522b5968f4f66da9fde2e","access_level":"public","create_time":"$D2019-08-26T20:45:27.417Z","update_time":"$D2019-09-09T17:49:58.329Z","view_time":null,"first_public_time":"$D2019-09-09T17:51:22.313Z","has_unpublished_edits":null,"fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"2fa6992505afc473","login":"jmkunze","name":"Jillian Kunze","avatar_url":"https://avatars-next.observableusercontent.com/9b5b21e03c248c6ebbe13799511182b4ed03242084d3ed3eb8bdd351c88ae70a","tier":"starter_2024"},"version":2471,"publish_version":2471,"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":"Stern-Gerlach Experiment Animation","cells":[{"id":0,"value":"md`# Stern-Gerlach Experiment Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"md`In this experiment, you can use:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2453,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof button0 = {\n const form = html`