Adding the base equation to the preparation area #54

js/bloch-sphere/view/BlochSphereEquationNode.ts

@@ -0,0 +1,65 @@
+// Copyright 2024, University of Colorado Boulder
+
+/**
+ * BlochSphereEquationNode displays the equation that is used to calculate the expected value of polarization.
+ *
+ * @author Agustín Vallejo (PhET Interactive Simulations)
+ * @author John Blanco (PhET Interactive Simulations)
+ */
+
+import Vector2 from '../../../../dot/js/Vector2.js';
+import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
+import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
+import MathSymbolFont from '../../../../scenery-phet/js/MathSymbolFont.js';
+import { HBox, HBoxOptions, RichText, RichTextOptions } from '../../../../scenery/js/imports.js';
+import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
+import FractionNode from '../../common/view/FractionNode.js';
+import quantumMeasurement from '../../quantumMeasurement.js';
+
+type SelfOptions = EmptySelfOptions;
+type BlochSphereEquationNodeOptions = SelfOptions & WithRequired<HBoxOptions, 'tandem'>;
+
+const EQUATION_FONT = new MathSymbolFont( 17 );
+const THETA = QuantumMeasurementConstants.THETA;
+const PHI = QuantumMeasurementConstants.PHI;
+const PSI = QuantumMeasurementConstants.PSI;
+const UP = QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER;
+const DOWN = QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER;
+const KET = QuantumMeasurementConstants.KET;
+
+export default class BlochSphereEquationNode extends HBox {
+
+  public constructor( providedOptions?: BlochSphereEquationNodeOptions ) {
+
+    const richTextEquationOptions = { font: EQUATION_FONT };
+    const newRichText = ( text: string ) => new RichText( text, richTextEquationOptions );
+    const psiEqualsCos = newRichText( `|${PSI}⟩ = cos` );
+    const upPlusSin = newRichText( `|${UP}${KET} + sin` );
+    const downKet = newRichText( `e<sup>i${PHI}</sup>|${DOWN}${KET}` );
+
+    const parenthesesOptions: RichTextOptions = {
+      font: new MathSymbolFont( 17 ),
+      scale: new Vector2( 1, 2 )
+    };
+
+    const options = optionize<BlochSphereEquationNodeOptions, SelfOptions, HBoxOptions>()( {
+      spacing: 3,
+      align: 'center',
+      children: [
+        psiEqualsCos,
+        new RichText( '(', parenthesesOptions ),
+        new FractionNode( newRichText( THETA ), newRichText( '2' ), { scale: 0.8 } ),
+        new RichText( ')', parenthesesOptions ),
+        upPlusSin,
+        new RichText( '(', parenthesesOptions ),
+        new FractionNode( newRichText( THETA ), newRichText( '2' ), { scale: 0.8 } ),
+        new RichText( ')', parenthesesOptions ),
+        downKet
+      ]
+    }, providedOptions );
+
+    super( options );
+  }
+}
+
+quantumMeasurement.register( 'BlochSphereEquationNode', BlochSphereEquationNode );

js/bloch-sphere/view/BlochSphereScreenView.ts

@@ -20,6 +20,7 @@ import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import BlochSphereNode from '../../common/view/BlochSphereNode.js';
 import QuantumMeasurementScreenView from '../../common/view/QuantumMeasurementScreenView.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
+import BlochSphereEquationNode from './BlochSphereEquationNode.js';
 
 export default class BlochSphereScreenView extends QuantumMeasurementScreenView {
 
@@ -72,7 +73,7 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
       align: 'center',
       children: [
         new Text( 'State to Prepare', { font: new PhetFont( { size: 20, weight: 'bolder' } ) } ),
-        new RichText( 'Equation 1', { font: new MathSymbolFont( { size: 20 } ) } ),
+        new BlochSphereEquationNode(),
         new Panel(
           new RichText( 'Equation 2', { font: new MathSymbolFont( { size: 20 } ) } ), {
             fill: '#aff',

js/common/QuantumMeasurementConstants.ts

@@ -17,6 +17,9 @@ const QuantumMeasurementConstants = {
   SCREEN_VIEW_Y_MARGIN: 15,
   ALPHA: '\u03b1',
   BETA: '\u03b2',
+  THETA: '\u03b8',
+  PHI: '\u03c6',
+  PSI: '\u03c8',
   SPIN_UP_ARROW_CHARACTER: '\u2b61',
   SPIN_DOWN_ARROW_CHARACTER: '\u2b63',
   CLASSICAL_UP_SYMBOL: '\uD83C\uDF1E\uFE0E\uFE0E', // 🌞 Sun symbol