Implement particles using Sprites

[pixelzoom]

To address the performance issues reported in #209, investigate using Sprites to draw shaker particles and precipitate particles. They are currently implemented as a subclass of CanvasNode. See base class ParticlesNode.ts.

ShakerParticlesNode.ts:

PrecipitateNode.ts:

[pixelzoom]

I took a look at this. It's going to be a significant chunk of work. And the implementation will be much more complicated -- the currently implementation (ParticlesNode extends CanvasNode) is very simple. So over in #209 I'm going to try to improve the performance of ParticlesNode by reducing the number of things that are computed/allocated in paintCanvas.

[pixelzoom]

Questions for @jonathanolson via Slack DM:

I’m investigating re-implementing the particle systems in Beer’s Law Lab using Sprites (they are currently CanvasNode). Each particle is a square, with random rotation. What’s the best way to create an ImageableImage for use with SpriteImage? I’ve considered new Rectangle().rasterize(), but it's return type is Node. It sure would be convenient if any Node could be used with SpriteImage, or if there was a utility for converting any Node to what’s needed by SpriteImage.

Here’s what I came up with. It seems to work if I add it to demoSprites.js. But in TypeScript, it involves a cast (from Node to Image) that feels unsafe. Is there a better way?

const particleRectangle = new Rectangle( 0, 0, 50, 50, {
  fill: 'red',
  stroke: 'black'
} );
const particleCanvasElement = ( particleRectangle.rasterized( { wrap: false } ) as Image ).image;
const particleSpriteImage = new SpriteImage( particleCanvasElement, particleRectangle.center );

[jonathanolson]

Node has toCanvas() which is a bit older and clunky, but can rasterize the Node to a Canvas for use in images. The main thing rasterized() provides is the resolution scaling. If you don't need that, you could just directly use toCanvas() (it is synchronous but has an asynchronous api currently).

[pixelzoom]

As reported in #209, there is no longer any evidence of a performance issue with the current CanvasNode implementation. So I see no reason to convert to Sprites, and I'm closing this issue.