Improvements to visuals of magnetic field, see #54

phetsims · Jan 3, 2025 · c00682f · c00682f
1 parent 7b1a782
commit c00682f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/js/bloch-sphere/view/MagneticFieldArrowNode.ts b/js/bloch-sphere/view/MagneticFieldArrowNode.ts
@@ -10,21 +10,21 @@ import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import ArrowNode, { ArrowNodeOptions } from '../../../../scenery-phet/js/ArrowNode.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 
-const MAXIMUM_LENGTH = 50;
-
 export default class MagneticFieldArrowNode extends ArrowNode {
 
-  public constructor( magneticFieldStrength: NumberProperty, providedOptions?: ArrowNodeOptions ) {
+  public constructor( magneticFieldStrength: NumberProperty, maximumLength: number, providedOptions?: ArrowNodeOptions ) {
     super( 0, 0, 0, 0, combineOptions<ArrowNodeOptions>( {
       stroke: 'black',
       fill: '#ff0',
-      headHeight: 15,
-      headWidth: 15,
-      tailWidth: 5
+
+      // empirically determined values
+      headHeight: 0.3 * maximumLength,
+      headWidth: 0.4 * maximumLength,
+      tailWidth: 0.15 * maximumLength
     }, providedOptions ) );
 
     magneticFieldStrength.link( strength => {
-      this.setTip( 0, -strength * MAXIMUM_LENGTH );
+      this.setTip( 0, -strength * maximumLength );
     } );
   }
 }

diff --git a/js/bloch-sphere/view/MagneticFieldControl.ts b/js/bloch-sphere/view/MagneticFieldControl.ts
@@ -47,7 +47,7 @@ export default class MagneticFieldControl extends Panel {
           lineWidth: 1,
           lineDash: [ 2, 2 ]
         } ),
-        new MagneticFieldArrowNode( magneticFieldStrengthProperty )
+        new MagneticFieldArrowNode( magneticFieldStrengthProperty, SLIDER_TRACK_SIZE.height / 2 )
       ],
       tandem: providedOptions.tandem.createTandem( 'magneticFieldIndicator' )
     } );

diff --git a/js/bloch-sphere/view/MagneticFieldNode.ts b/js/bloch-sphere/view/MagneticFieldNode.ts
@@ -16,19 +16,22 @@ export default class MagneticFieldNode extends Node {
 
     super( providedOptions );
 
-    const columns = 5;
-    const rows = 5;
-    const separation = 60;
+    const columns = 8;
+    const rows = 7;
+    const separationX = 300 / columns;
+    const separationY = 300 / rows;
 
     for ( let i = 0; i < columns; i++ ) {
       for ( let j = 0; j < rows; j++ ) {
-        const magneticFieldArrowNode = new MagneticFieldArrowNode( magneticFieldStrength );
-        magneticFieldArrowNode.centerX = i * separation;
-        magneticFieldArrowNode.centerY = j * separation;
+        const magneticFieldArrowNode = new MagneticFieldArrowNode( magneticFieldStrength, 30 );
+        magneticFieldStrength.link( strength => {
+          magneticFieldArrowNode.centerX = i * separationX;
+          magneticFieldArrowNode.centerY = j * separationY;
+        } );
+
         this.addChild( magneticFieldArrowNode );
       }
     }
-
   }
 }