Update colors

[arouinfar]

Self-assigning to experiment with CollisionLabColors.js.

[arouinfar]

I'll fold this into to testing https://github.com/phetsims/QA/issues/524.

[arouinfar]

For https://github.com/phetsims/QA/issues/529

I thought the ball colors could be a bit more saturated. The color momentum should also be changed since we usually reserve yellow for acceleration. I experimented locally with the colors, and found some that I think work nicely.

These are color changes from the screenshots above:

BALL_COLORS: [
    new Color( 37, 221, 222 ),
    new Color( 325, 37, 173 ),
    new Color( 149, 27, 235 ),
    new Color( 235, 192, 27 )    
  ],

 MOMENTUM_VECTOR_FILL: 'rgb( 71, 79, 179 )',

@ariel-phet do these look reasonable to you? Any objections/suggestions?

[brandonLi8]

@arouinfar FYI the second color in BALL_COLORS (new Color( 325, 37, 173 )) is equivalent to new Color( 255, 37, 173 )) since rgb values only go up to 255.

@ariel-phet I pushed these changes to master so you can see it in action. Please close if master is good.

[arouinfar]

@arouinfar FYI the second color in BALL_COLORS (new Color( 325, 37, 173 )) is equivalent to new Color( 255, 37, 173 )) since rgb values only go up to 255.

🤦‍♀️ Looking at my illustrator file, I meant to use rgb(235, 37, 173) which got corrected to rgb(255, 37, 173). However, I think it was a happy accident because a red value of 255 leads to an improved contrast between the magenta and purple balls.

[ariel-phet]

@arouinfar generally I think these work quite nicely, but I have to say I am not a big fan of the "yellow" color. It feels a bit mustard to me...could it be more orange? That feels like it would be more consistent.

[brandonLi8]

@ariel-phet we already use orange for the center-of-mass. Would it be a problem if we have colliding colors?

[arouinfar]

Thanks for the feedback @ariel-phet. I originally went with mustard because it was a color that doesn't already appear in the sim and is dark enough for the path to be seen against the background.

If we want to go with something more in the vein of yellow-orange, rgb( 248, 151, 16 ) is an option. It's a bit close to the current COM color, so I experimented with alternatives for the COM.

Option 1: Original Color

Option 2: Forest Green

  CENTER_OF_MASS_FILL: new Color( 39, 145, 86 ),

Option 3: Red

  CENTER_OF_MASS_FILL: new Color( 248, 4, 37 ),

Option 4: Black

  CENTER_OF_MASS_FILL: Color.BLACK,
  CENTER_OF_MASS_STROKE: Color.BLACK,

Personally, my preference would be to stick with mustard or go with option 1. What would you prefer @ariel-phet?

[ariel-phet]

@arouinfar I think @kathy-phet had some thoughts. We should probably have a quick collision lab meeting at design this week anyhow since it is so close to publication to finalize.

[arouinfar]

Sounds good @ariel-phet. Please include a link to this issue in the preflight.

[arouinfar]

Discussed in the 8/27/20 design meeting.

• The mustard color is too muddy. Use a more saturated version of the COM orange, rgb( 255, 90, 0 )
• Change COM to be a dark gray. rgb( 70, 70, 70 )
• Try something closer to a royal blue for momentum so its saturation is similar to velocity and has better contrast with the black used for the total momentum in the Momenta Diagram. rgb( 50, 50, 255 )

@kathy-phet gave these colors a 👍 over Slack.

@jonathanolson please make the following changes:

• [x] Ball 4: rgb( 255, 90, 0 )
• [x] MOMENTUM_VECTOR_FILL: rgb( 50, 50, 255 )
• [x] CENTER_OF_MASS_FILL: rgb( 70, 70, 70 )
• [x] CENTER_OF_MASS_STROKE: Color.BLACK
• [x] Make the COM Values background transparent white to match the other value readouts.

[jonathanolson]

Should be complete with the above commit, can you verify?

[arouinfar]

Looks great!