revise and use energy colors in PhetColorScheme

[pixelzoom]

In #455, I discovered sims are not using common-code colors for energy. See:
ESP: phetsims/energy-skate-park#51
MAS: phetsims/masses-and-springs#343
Pendulum Lab: phetsims/pendulum-lab#209

.. and there may be others.

I pointed out that they should be using PhetColorScheme. @arouinfar said in #455 (comment):

@pixelzoom I would argue that some of the colors used for energy in PhetColorScheme are antiquated.

To be clear, I think that energy colors should be consistent across sims, so it's great to point out these inconsistencies. However, using rgb(0, 0, 255) for gravitational potential energy and rgb(236, 153, 55) for total energy are definitely legacy artifacts.

So this issue has two goals:

(1) Revise energy colors in PhetColorScheme. These colors were specified in https://docs.google.com/spreadsheets/d/1mNsOWSbcoO-Ox2evxJij5Lix4HTZbXKbFgMlPe9W-u0/edit#gid=0

(2) Use PhetColorScheme in sims that use energy-related color coding.

[arouinfar]

Thanks for opening this issue @pixelzoom. I'll dig in more tomorrow.

... and there may be others.

The only other sim that comes to mind is Hooke's Law, which has elastic energy. I've opened the above issue in the hookes-law repo.

[pixelzoom]

Over in phetsims/hookes-law#70 (comment), I discovered that at least one color (PhetColorScheme.ELASTIC_ENERGY) was incorrectly ported. So assigning to myself to verify that the HTML5 and Java versions of PhetColorScheme match, except where legitimate changes to the HTML5 version are indicated in GitHub commits.

[pixelzoom]

I confirmed that the only color that is incorrectly ported is PhetColorScheme.ELASTIC_ENERGY. Correcting that will be handled in phetsims/hookes-law#70.

[arouinfar]

Here are my suggested changes @pixelzoom.

Energy	Current PhetColorScheme	Proposed Color
ELASTIC_POTENTIAL_ENERGY	rgb( 0, 204, 255 )	no change
GRAVITATIONAL_POTENTIAL_ENERGY	rgb( 0, 0, 255 ), BLUE	rgb( 55, 130, 215 )
HEAT_THERMAL_ENERGY	rgb( 255, 85, 0 ), RED_COLORBLIND	no change
KINETIC_ENERGY	rgb( 0, 255, 0 ), GREEN	rgb( 30, 200, 45 )
TOTAL_ENERGY	rgb( 236, 153, 55 )	rgb( 180, 180, 0)

I think Pendulum Lab tends to have higher contrast in the colorblind preview modes, so I decided to use its definitions for GPE and KE, with rgb values rounded to the nearest 5. This results in a nicer-looking rgb value, but doesn't perceptibly change the color or relative contrast in colorblind preview modes. Since ESPB is the only sim which uses a solid total bar, I decided to keep its definition for TOTAL_ENERGY, albeit converted from hex to rgb.

Colorblind preview	ESPB	MAS	PL
Protanopia
Deuteranopia

[pixelzoom]

@arouinfar said:

Here are my suggested changes ...

Thanks @arouinfar. You said "suggested changes". Shall I go ahead and make these changes, or do you need to run this by other designers?

[arouinfar]

You said "suggested changes". Shall I go ahead and make these changes, or do you need to run this by other designers?

Mostly so it didn't sound like I was barking orders, but thanks for checking @pixelzoom. Please go ahead and make the changes. Given that the HTML5 sims used similar shades of green and blue, I don't think this is a drastic change that would require broader discussion. I'm also the lead/responsible designer for all of the sims that would be affected by such a change.

[pixelzoom]

👍 Woof woof :)

[pixelzoom]

@arouinfar After looking at current PhetColorScheme, one clarification...

APPLIED_FORCE and TOTAL_ENERGY currently share the same color:

var TAN_ORANGE = new Color( 236, 153, 55 );
APPLIED_FORCE: TAN_ORANGE,
TOTAL_ENERGY: TAN_ORANGE,

Do you want me to change TOTAL_ENERGY, but leave APPLIED_FORCE unchanged, like this? :

APPLIED_FORCE: new Color( 236, 153, 55 ),
TOTAL_ENERGY: new Color( 180, 180, 0 ),

[arouinfar]

@pixelzoom I'm not sure that we would want APPLIED_FORCE and TOTAL_ENERGY to be color-coordinated, so I would recommend that we leave APPLIED_FORCE alone for now.

[pixelzoom]

Here are the changes to PhetColorScheme. APPLIED_FORCE is unchanged, but no longer uses shared color TAN_ORANGE.

APPLIED_FORCE: new Color( 236, 153, 55 ),
GRAVITATIONAL_POTENTIAL_ENERGY: new Color(  55, 130, 215 ),
KINETIC_ENERGY: new Color( 30, 200, 45 ),
TOTAL_ENERGY: new Color( 180, 180, 0 ),

Closing.