diff --git a/js/bloch-sphere/view/MagneticFieldNode.ts b/js/bloch-sphere/view/MagneticFieldNode.ts index 198f1ad..1433ba8 100644 --- a/js/bloch-sphere/view/MagneticFieldNode.ts +++ b/js/bloch-sphere/view/MagneticFieldNode.ts @@ -3,6 +3,7 @@ * Array of Magnetic Field Arrow Nodes that represent the bulk of the magnetic field. * * @author Agustín Vallejo + * @author John Blanco (PhET Interactive Simulations) */ import NumberProperty from '../../../../axon/js/NumberProperty.js'; @@ -15,6 +16,7 @@ import { SpinMeasurementState } from '../model/SpinMeasurementState.js'; import MagneticFieldArrowNode from './MagneticFieldArrowNode.js'; const SIZE = new Dimension2( 150, 170 ); +const DASH_PATTERN_FOR_GHOST_FIELD = [ 1, 2 ]; export default class MagneticFieldNode extends Node { @@ -22,15 +24,15 @@ export default class MagneticFieldNode extends Node { measurementStateProperty: Property, providedOptions?: NodeOptions ) { - const columns = 5; - const rows = 5; + const columns = 4; + const rows = 4; const separationX = SIZE.width / columns; const separationY = SIZE.height / rows; const arrowNodes: MagneticFieldArrowNode[] = []; for ( let i = 0; i < columns; i++ ) { for ( let j = 0; j < rows; j++ ) { - const magneticFieldArrowNode = new MagneticFieldArrowNode( magneticFieldStrength, 20 ); + const magneticFieldArrowNode = new MagneticFieldArrowNode( magneticFieldStrength, 25, { lineWidth: 0.5 } ); magneticFieldStrength.link( () => { magneticFieldArrowNode.centerX = i * separationX; magneticFieldArrowNode.centerY = j * separationY; @@ -44,8 +46,14 @@ export default class MagneticFieldNode extends Node { super( options ); + // Make the field look somewhat ghostly when it is not actually being applied. measurementStateProperty.link( ( measurementState: SpinMeasurementState ) => { - this.opacity = measurementState === 'timingObservation' ? 1 : 0.25; + const lineDash = measurementState === 'timingObservation' ? [ 1, 0 ] : DASH_PATTERN_FOR_GHOST_FIELD; + const opacity = measurementState === 'timingObservation' ? 1 : 0.75; + arrowNodes.forEach( arrowNode => { + arrowNode.lineDash = lineDash; + arrowNode.opacity = opacity; + } ); } ); } }