always show outline of photons when split, see #65

images/greenPhotonOutline_png.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* @formatter:off */
+
+import asyncLoader from '../../phet-core/js/asyncLoader.js';
+
+const image = new Image();
+const unlock = asyncLoader.createLock( image );
+image.onload = unlock;
+image.src = 'data:image/png;base64,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';
+export default image;

images/license.json

@@ -22,5 +22,14 @@
     "projectURL": "https://phet.colorado.edu",
     "license": "contact [email protected]",
     "notes": "created by John Blanco"
+  },
+  "greenPhotonOutline.png": {
+    "text": [
+      "Copyright 2023 University of Colorado Boulder"
+    ],
+    "projectURL": "https://phet.colorado.edu",
+    "license": "contact [email protected]",
+    "notes": "created by John Blanco"
   }
+
 }

js/photons/model/PhotonsExperimentSceneModel.ts

@@ -103,7 +103,7 @@ export default class PhotonsExperimentSceneModel {
 
     const mirrorDistanceProportion = 0.5;
     const horizontalDetectorXPosition = mirrorDistanceProportion * PATH_LENGTH_UNIT;
-    const horizontalDetectorYPosition = ( 1 - mirrorDistanceProportion ) * PATH_LENGTH_UNIT;
+    const horizontalDetectorYPosition = ( 1 - mirrorDistanceProportion ) * PATH_LENGTH_UNIT * 1.5;
     this.horizontalPolarizationDetector = new PhotonDetector( new Vector2( horizontalDetectorXPosition, -horizontalDetectorYPosition ), 'down', {
       displayMode: this.laser.emissionMode === 'singlePhoton' ? 'count' : 'rate',
       tandem: providedOptions.tandem.createTandem( 'horizontalPolarizationDetector' )

js/photons/view/PhotonSprites.ts

@@ -18,6 +18,7 @@ import Vector2 from '../../../../dot/js/Vector2.js';
 import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
 import { Sprite, SpriteImage, SpriteInstance, SpriteInstanceTransformType, Sprites } from '../../../../scenery/js/imports.js';
 import greenPhoton_png from '../../../images/greenPhoton_png.js';
+import greenPhotonOutline_png from '../../../images/greenPhotonOutline_png.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import Photon from '../model/Photon.js';
 
@@ -33,23 +34,30 @@ export default class PhotonSprites extends Sprites {
   // The scale value used to render the photons.
   private readonly photonScale: number;
 
-  // The sprite used to render the photons
+  // The sprites used to render the photons.
   private readonly photonSprite: Sprite;
+  private readonly photonOutlineSprite: Sprite;
 
   public constructor( photons: Photon[], modelViewTransform: ModelViewTransform2, canvasBounds: Bounds2 ) {
 
-    // Create the sprite that will be used to represent the photons.
+    // Create the sprites that will be used to represent the photons.
     const photonSprite = new Sprite( new SpriteImage(
       greenPhoton_png,
       new Vector2( greenPhoton_png.width / 2, greenPhoton_png.height / 2 ),
       { pickable: false }
     ) );
 
-    // array of sprite instances, there will be one for each photon that is rendered
+    const photonOutlineSprite = new Sprite( new SpriteImage(
+      greenPhotonOutline_png,
+      new Vector2( greenPhotonOutline_png.width / 2, greenPhotonOutline_png.height / 2 ),
+      { pickable: false }
+    ) );
+
+    // array of sprite instances, there will be two for each photon that is rendered
     const spriteInstances: SpriteInstance[] = [];
 
     super( {
-      sprites: [ photonSprite ],
+      sprites: [ photonSprite, photonOutlineSprite ],
       spriteInstances: spriteInstances,
       renderer: 'webgl',
       pickable: false,
@@ -68,6 +76,7 @@ export default class PhotonSprites extends Sprites {
     this.photons = photons;
     this.modelViewTransform = modelViewTransform;
     this.photonSprite = photonSprite;
+    this.photonOutlineSprite = photonOutlineSprite;
   }
 
   /**
@@ -81,38 +90,56 @@ export default class PhotonSprites extends Sprites {
 
       const photon = this.photons[ i ];
 
-      // Iterate over the two possible photon states
+      // Iterate over the photon motion states.
       for ( const photonMotionState of photon.possibleMotionStates ) {
 
         if ( photonMotionState.probability > 0 ) {
           numberOfPhotonsDisplayed++;
           const photonStatePosition = photonMotionState.position;
 
-          // Add a new sprite instance to our list if we don't have enough.
-          if ( numberOfPhotonsDisplayed > this.spriteInstances.length ) {
-            const newSpriteInstance = SpriteInstance.pool.fetch();
-            newSpriteInstance.transformType = SpriteInstanceTransformType.AFFINE;
-            this.spriteInstances.push( newSpriteInstance );
+          // Add new sprite instances to our list if we don't have enough.
+          if ( numberOfPhotonsDisplayed * 2 > this.spriteInstances.length ) {
+
+            const newInteriorSpriteInstance = SpriteInstance.pool.fetch();
+            newInteriorSpriteInstance.transformType = SpriteInstanceTransformType.AFFINE;
+            this.spriteInstances.push( newInteriorSpriteInstance );
+
+            const newOutlineSpriteInstance = SpriteInstance.pool.fetch();
+            newOutlineSpriteInstance.transformType = SpriteInstanceTransformType.AFFINE;
+            this.spriteInstances.push( newOutlineSpriteInstance );
           }
 
           // Update the matrix that controls where this photon is rendered.
-          const spriteInstance = this.spriteInstances[ numberOfPhotonsDisplayed - 1 ];
-          spriteInstance.sprite = this.photonSprite;
-          spriteInstance.matrix.setToAffine(
+          const interiorSpriteInstance = this.spriteInstances[ ( numberOfPhotonsDisplayed - 1 ) * 2 ];
+          interiorSpriteInstance.sprite = this.photonSprite;
+          interiorSpriteInstance.matrix.setToAffine(
+            this.photonScale,
+            0,
+            this.modelViewTransform.modelToViewX( photonStatePosition.x ),
+            0,
+            this.photonScale,
+            this.modelViewTransform.modelToViewY( photonStatePosition.y )
+          );
+          interiorSpriteInstance.alpha = photonMotionState.probability; // Probability based opacity
+          // interiorSpriteInstance.alpha = Math.pow( photonMotionState.probability, 1.25 ); // Probability based opacity
+
+          const outlineSpriteInstance = this.spriteInstances[ ( numberOfPhotonsDisplayed - 1 ) * 2 + 1 ];
+          outlineSpriteInstance.sprite = this.photonOutlineSprite;
+          outlineSpriteInstance.matrix.setToAffine(
             this.photonScale,
             0,
             this.modelViewTransform.modelToViewX( photonStatePosition.x ),
             0,
             this.photonScale,
             this.modelViewTransform.modelToViewY( photonStatePosition.y )
           );
-          spriteInstance.alpha = photonMotionState.probability; // Probability based opacity
+          outlineSpriteInstance.alpha = 1;
         }
       }
     }
 
     // Free up any unused sprite instances.
-    while ( this.spriteInstances.length > numberOfPhotonsDisplayed ) {
+    while ( this.spriteInstances.length > numberOfPhotonsDisplayed * 2 ) {
       const unusedSpriteInstance = this.spriteInstances.pop();
       unusedSpriteInstance && unusedSpriteInstance.freeToPool();
     }