Use Color.interpolateRGBA() for energy level colors in NucleonShellView

[Luisav1]

Use Color.interpolateRGBA() where you set the stroke of energy levels in NucleonShellView instead of having a manually calculated array of a range of colors. Such that only the initial and final color properties of the energy levels are needed.
Change link on nucleonCountProperty to multilink that also listens to when the initial + final color properties change.

[zepumph]

Working on this now.

[zepumph]

Tagging phetsims/shred@84a635e as the original commit where the manual interpolation was committed.

https://github.com/phetsims/shred/blob/e5d99a25c55e21f061dba057a6299c47bb12e6f5/js/view/ParticleNode.ts#L28-L36
https://github.com/phetsims/shred/blob/c09eb9f1d2ee3f00c88fea61fc479d60d9a9f9cb/js/model/ParticleAtom.ts#L40-L48

[zepumph]

• Don't forget about Nucleon shell view

[zepumph]

Ok Good progress on ParticleNode above, now onto NucleonShellView.

[zepumph]

Ok. This has all been simplified. @Luisav1 will you please give these commits a spot check and feel free to close.

[Luisav1]

Thanks @zepumph, this looks great. Closing.

[Luisav1]

I noticed there's still a TODO pointing to this issue:

build-a-nucleus/js/common/view/ParticleAtomNode.ts

Lines 165 to 168 in d123a18

	this.electronCloud.fill = new RadialGradient( 0, 0, 0, 0, 0, radius * factor )
	// TODO: use color.interpolateRGBA() to use the same color property in both https://github.com/phetsims/build-a-nucleus/issues/85
	.addColorStop( 0, BANColors.electronColorProperty.value.withAlpha( 200 ) )
	.addColorStop( 0.9, BANColors.electronColorProperty.value.withAlpha( 0 ) );

This similar code is also in these two other places:

• the initial creation of the electron cloud:
  

  build-a-nucleus/js/common/view/ParticleAtomNode.ts

  Lines 47 to 49 in d123a18

  	fill: new RadialGradient( 0, 0, 0, 0, 0, MIN_ELECTRON_CLOUD_RADIUS )
  	.addColorStop( 0, BANColors.electronColorProperty.value.withAlpha( 200 ) )
  	.addColorStop( 0.9, BANColors.electronColorProperty.value.withAlpha( 0 ) )

• the mini electron cloud creation
  

  build-a-nucleus/js/decay/view/DecayScreenView.ts

  Lines 196 to 198 in d123a18

  	fill: new RadialGradient( 0, 0, 0, 0, 0, 18 )
  	.addColorStop( 0, BANColors.electronColorProperty.value.withAlpha( 200 ) )
  	.addColorStop( 0.9, BANColors.electronColorProperty.value.withAlpha( 0 ) )

[zepumph]

@Luisav1 and I would like to ignore and delete the TODO, and the just factor out the new RadialGradient code into BANConstants, where the function takes a radius and returns the gradient. We aren't worried about creating multiple of the gradients, as we don't want to mutate the radius after creating a the Gradient. Also recreating these is fine for the Color Editor, and still allows you to see the changes if you want to update the electronColor

[Luisav1]

The TODO was removed in the commit above and the RadialGradient is now created in BANConstants. Closing.