improve performance of ParticlesNode (Canvas), #209

js/concentration/model/SoluteParticle.ts

@@ -41,6 +41,12 @@ export default class SoluteParticle extends PhetioObject {
   public readonly positionProperty: Property<Vector2>;
   public readonly orientation: number;
 
+  // Precompute these things, to improve the performance of ParticlesNode.
+  public readonly cos: number; // cosine of orientation
+  public readonly sin: number; // since of orientation
+  public readonly fillStyle: string; // fillStyle for rendering with Canvas
+  public readonly strokeStyle: string; // strokeStyle for rendering with Canvas
+
   /**
    * @param color
    * @param size particles are square, this is the length of one side
@@ -57,6 +63,11 @@ export default class SoluteParticle extends PhetioObject {
     this.size = size;
     this.positionProperty = new Vector2Property( position );
     this.orientation = orientation;
+
+    this.cos = Math.cos( orientation );
+    this.sin = Math.sin( orientation );
+    this.fillStyle = color.getCanvasStyle();
+    this.strokeStyle = color.darkerColor().getCanvasStyle();
   }
 
   public toStateObject(): SoluteParticleStateObject {

js/concentration/view/ParticlesNode.ts

@@ -42,7 +42,7 @@ export default class ParticlesNode extends CanvasNode {
    */
   public override paintCanvas( context: CanvasRenderingContext2D ): void {
 
-    const particles = this.particleGroup.getArray();
+    const particles = this.particleGroup.getArray(); // reference - do not modify!
     const numberOfParticles = particles.length;
 
     // Set and compute static properties that should be shared by all the particles, and start the path.
@@ -51,21 +51,19 @@ export default class ParticlesNode extends CanvasNode {
 
       const halfViewSize = this.modelViewTransform.modelToViewDeltaX( particles[ 0 ].size ) * Math.SQRT2 / 2;
 
-      context.fillStyle = particles[ 0 ].color.getCanvasStyle();
-      context.strokeStyle = particles[ 0 ].color.darkerColor().getCanvasStyle();
+      context.fillStyle = particles[ 0 ].fillStyle;
+      context.strokeStyle = particles[ 0 ].strokeStyle;
       context.lineWidth = 1;
 
       context.beginPath();
 
       // draw into one big path
       for ( let i = 0; i < numberOfParticles; i++ ) {
         const particle = particles[ i ];
-
-        const position = this.modelViewTransform.modelToViewPosition( particle.positionProperty.value );
-        const x = position.x;
-        const y = position.y;
-        const cos = Math.cos( particle.orientation ) * halfViewSize;
-        const sin = Math.sin( particle.orientation ) * halfViewSize;
+        const x = this.modelViewTransform.modelToViewX( particle.positionProperty.value.x );
+        const y = this.modelViewTransform.modelToViewY( particle.positionProperty.value.y );
+        const cos = particle.cos * halfViewSize;
+        const sin = particle.sin * halfViewSize;
         context.moveTo( x + cos, y + sin );
         context.lineTo( x - sin, y + cos );
         context.lineTo( x - cos, y - sin );