Color Polishing

[emily-phet]

When this sim has its visual features finalized (in particular, the color cueing when moving markers and any coloring associated with different ratio choices), I'd like to have a Thursday design meeting with as many designers as are available/interested to discuss color in this sim.

I generally try to stay out of color conversations, but I feel like this sim needs a little more polish in that department. Depending on how colorful the set of final color cueing is, we might consider having the hands be a dark blue, and perhaps the circle/pointer area be off-white somehow (maybe ivory or something). Right now it feels a bit stark, and I think could be more playful.

We'll have to attend to color contrast, and not becoming too chaotic color-wise (since we are using color for cueing).

[emily-phet]

More thoughts on color: Can we do some fancy color transitions for all the grey colored lines/graphics/text in the sim (e.g., the gridlines, numbers, and radio button icons)? Can they get darker grey as the background gets darker? I like the grey conceptually, because it cues that these are not the most important things to attend to (as emphasized by Dor in previous conversation)...but they are hard to see when screen turns green as they are now.

[emily-phet]

Note to self - planning to bring up general color refinements in an upcoming Thursday design meeting.

[zepumph]

Today during design meeting:

• [x] We decided the bars when no grid lines are visible should be the same color gray as the grid.
• [x] We diced that the gray color of the grid lines and units would change with the fitness, so that the dark green background will have darker grey lines on them.

I'm sure there are other color polishing steps to get to, but I'll assign myself for now.

[zepumph]

Implemented above.

I have to say, I Really like the interpolating the gray to dark gray. It feels very natural. I hardly notice it, except that I not longer experience contrast issues. Please review @emily-phet.

[emily-phet]

@zepumph - I'm looking at the latest on phettest, and the black bars are still black, so I'm not seeing these changes (even after emptying caches, etc.).

[zepumph]

Hmmm. I'm not sure what was happening there! I see it up on phettest now, can you try again? Here is also a dev version I just made, https://phet-dev.colorado.edu/html/ratio-and-proportion/1.0.0-dev.30/phet/ratio-and-proportion_en_phet.html

[emily-phet]

I see it now - all looks good!

Let's circle back around to color polishing a bit later. For now, I think this is great improvement.

[emily-phet]

@zepumph

• [x] For the first screen, can you have the color of the hand match the challenge color (with a medium black stroke around the outside of the hand)?

• [x] For the second screen, can you have the color of the hand match the blue number spinner color (again, with a medium black stroke around the outside of the hand)?

• [x] For the second screen, can you have the hands in the accordion box have the same blue color with outside border stroke, to match the (now new) interactive hands?

[zepumph]

I got some feedback from the dev team about how to do this, and I will need SVG images from the ai files so that I can move that into the code. Then once they are SCENERY/Path instances created from the SVG drawing code, I can change the color/stroke easily.

Here is a starting patch:

```diff Index: js/common/view/RatioHalf.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/RatioHalf.js (revision 7632012cb53b81607e4d1c816e91734891bb0a62) +++ js/common/view/RatioHalf.js (date 1598979176128) @@ -69,14 +69,16 @@ * @param {Property.} tickMarkRangeProperty * @param {RatioDescriber} ratioDescriber * @param {HandPositionsDescriber} handPositionsDescriber - * @param {Property.} colorProperty + * @param {Property.} frameColorProperty + * @param {Property.} handColorProperty * @param {number} keyboardStep * @param {BooleanProperty} horizontalMovementAllowedProperty * @param {BooleanProperty} playUISoundsProperty * @param {Object} [options] */ constructor( valueProperty, valueRange, enabledValueRangeProperty, firstInteractionProperty, bounds, tickMarkViewProperty, - tickMarkRangeProperty, ratioDescriber, handPositionsDescriber, colorProperty, keyboardStep, horizontalMovementAllowedProperty, playUISoundsProperty, options ) { + tickMarkRangeProperty, ratioDescriber, handPositionsDescriber, frameColorProperty, handColorProperty, + keyboardStep, horizontalMovementAllowedProperty, playUISoundsProperty, options ) { options = merge( { isRight: true, // right ratio or the left ratio @@ -97,9 +99,9 @@ this.isBeingInteractedWithProperty = new BooleanProperty( false ); // "Framing" rectangles on the top and bottom of the drag area of the ratio half - const topRect = new Rectangle( 0, 0, 10, FRAMING_RECTANGLE_HEIGHT, { fill: colorProperty } ); + const topRect = new Rectangle( 0, 0, 10, FRAMING_RECTANGLE_HEIGHT, { fill: frameColorProperty } ); this.addChild( topRect ); - const bottomRect = new Rectangle( 0, 0, 10, FRAMING_RECTANGLE_HEIGHT, { fill: colorProperty } ); + const bottomRect = new Rectangle( 0, 0, 10, FRAMING_RECTANGLE_HEIGHT, { fill: frameColorProperty } ); this.addChild( bottomRect ); // @private @@ -110,20 +112,21 @@ const tickMarksNode = new RatioHalfTickMarksNode( tickMarkViewProperty, tickMarkRangeProperty, bounds.width, bounds.height - 2 * FRAMING_RECTANGLE_HEIGHT, - colorProperty ); + frameColorProperty ); this.addChild( tickMarksNode ); // @private - The draggable element inside the Node framed with thick rectangles on the top and bottom. - this.ratioHandNode = new RatioHandNode( valueProperty, enabledValueRangeProperty, tickMarkViewProperty, keyboardStep, { - startDrag: () => { - firstInteractionProperty.value = false; - this.isBeingInteractedWithProperty.value = true; - }, - isRight: options.isRight, - a11yCreateAriaValueText: () => handPositionsDescriber.getHandPosition( valueProperty, tickMarkViewProperty.value ), - endDrag: () => this.alertManager.alertRatioChange(), - a11yDependencies: options.a11yDependencies - } ); + this.ratioHandNode = new RatioHandNode( valueProperty, enabledValueRangeProperty, tickMarkViewProperty, + keyboardStep, handColorProperty, { + startDrag: () => { + firstInteractionProperty.value = false; + this.isBeingInteractedWithProperty.value = true; + }, + isRight: options.isRight, + a11yCreateAriaValueText: () => handPositionsDescriber.getHandPosition( valueProperty, tickMarkViewProperty.value ), + endDrag: () => this.alertManager.alertRatioChange(), + a11yDependencies: options.a11yDependencies + } ); this.addChild( this.ratioHandNode ); // Sound for the wave slider clicks Index: js/common/view/RatioHandNode.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/RatioHandNode.js (revision 7632012cb53b81607e4d1c816e91734891bb0a62) +++ js/common/view/RatioHandNode.js (date 1598979239299) @@ -27,9 +27,10 @@ * @param {Range} enabledValueRangeProperty * @param {EnumerationProperty.} tickMarkViewProperty * @param {number} keyboardStep + * @param {Property.} handColorProperty * @param {Object} [options] */ - constructor( valueProperty, enabledValueRangeProperty, tickMarkViewProperty, keyboardStep, options ) { + constructor( valueProperty, enabledValueRangeProperty, tickMarkViewProperty, keyboardStep, handColorProperty, options ) { options = merge( { cursor: 'pointer', ```

I think I can just convert the ai to SVG online. I'll report back!

[zepumph]

I looked at the pattern used for another ai that needed customization over in https://github.com/phetsims/equality-explorer/blob/master/assets/README.md#organize-button. This involved taking the shape out of SVG and putting it into a Path into the sim. When I do that for the ai files for the current hand cutout, this is what it looks like out-of-the-box.

From here I COULD scale/transform/rotate as needed, but I felt like I would checkin with @emily-phet about going further on these hands, since we are going to get new designs at some point soon.

Here is what I recommend currently:

1. Get new hand ai files from a designer. In part we should talk to the designer about trying to do the most simple hand drawing possible, without using scaling/rotation. This way the shape itself is as similar as possible between the ai and Path in the sim.
2. put those into the sim using the same SVG strategy.
3. Use these to dynamically adjust the colors of the hands in this issue.

Over to @emily-phet

UPDATE: patch to come back to:

```diff Index: js/common/view/RatioHandNode.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/RatioHandNode.js (revision 8c32f1b65c2fb7b2f3e60d92580d77ac0e583fd1) +++ js/common/view/RatioHandNode.js (date 1598991732614) @@ -14,9 +14,9 @@ import Node from '../../../../scenery/js/nodes/Node.js'; import AccessibleSlider from '../../../../sun/js/accessibility/AccessibleSlider.js'; import cutOutHandImage from '../../../images/cutout-hand_png.js'; -import filledInHandImage from '../../../images/filled-in-hand_png.js'; import ratioAndProportion from '../../ratioAndProportion.js'; import RatioAndProportionConstants from '../RatioAndProportionConstants.js'; +import HandPath from './HandPath.js'; import TickMarkView from './TickMarkView.js'; class RatioHandNode extends Node { @@ -46,7 +46,7 @@ !options.asIcon && this.initializeAccessibleSlider( valueProperty, enabledValueRangeProperty, new BooleanProperty( true ), options ); // @private - const filledInHandNode = new Image( filledInHandImage ); + const filledInHandNode = new HandPath(); const cutOutHandNode = new Image( cutOutHandImage, { visible: false } ); Index: js/common/view/HandPath.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/HandPath.js (date 1598991809271) +++ js/common/view/HandPath.js (date 1598991809271) @@ -0,0 +1,43 @@ +// Copyright 2020, University of Colorado Boulder + +/** + * Path for the hand + * + * @author Michael Kauzmann (PhET Interactive Simulations) + */ + +import merge from '../../../../phet-core/js/merge.js'; +import Path from '../../../../scenery/js/nodes/Path.js'; +import ratioAndProportion from '../../ratioAndProportion.js'; + +class HandPath extends Path { + + /** + * + * @param {Property.} valueProperty + * @param {Range} enabledValueRangeProperty + * @param {EnumerationProperty.} tickMarkViewProperty + * @param {number} keyboardStep + * @param {Object} [options] + */ + constructor( valueProperty, enabledValueRangeProperty, tickMarkViewProperty, keyboardStep, options ) { + + options = merge( { fill: 'black' }, options ); + + const shape = 'm 0,0 c -0.716,0.716 -1.572,1.075 -2.57,1.075 -1,0 -1.857,-0.359 -2.573,-1.075 -0.716,-0.717 ' + + '-1.074,-1.573 -1.074,-2.571 v -21.355 h -1.041 v 17.188 c 0,0.998 -0.359,1.855 -1.075,2.572 ' + + '-0.717,0.715 -1.573,1.073 -2.571,1.073 -0.999,0 -1.856,-0.358 -2.573,-1.073 -0.714,-0.717 ' + + '-1.073,-1.574 -1.073,-2.572 v -17.188 -8.334 l -5.012,6.674 c -0.826,1.107 -1.934,1.66 -3.322,1.66 ' + + '-1.15,0 -2.132,-0.406 -2.945,-1.22 -0.815,-0.814 -1.222,-1.796 -1.222,-2.946 0,-0.933 0.282,-1.769 ' + + '0.847,-2.507 l 12.5,-16.667 c 0.825,-1.106 1.931,-1.659 3.32,-1.659 h 22.397 c 0.737,0 1.399,0.238 ' + + '1.985,0.715 0.586,0.478 0.955,1.086 1.106,1.822 l 2.475,13.186 c 0.108,0.693 0.162,1.334 0.162,1.92 ' + + 'v 16.21 c 0,0.998 -0.358,1.856 -1.073,2.572 -0.717,0.717 -1.574,1.073 -2.572,1.073 -0.998,0 -1.856,-' + + '0.356 -2.572,-1.073 -0.716,-0.716 -1.075,-1.574 -1.075,-2.572 v -8.854 H 9.407 v 17.188 c 0,0.998 ' + + '-0.356,1.855 -1.073,2.572 C 7.617,-3.451 6.76,-3.093 5.762,-3.093 4.764,-3.093 3.907,-3.451 3.19,' + + '-4.166 2.475,-4.883 2.116,-5.74 2.116,-6.738 V -23.926 H 1.075 V -2.571 C 1.075,-1.573 0.717,-0.717 0,0'; + super( shape, options ); + } +} + +ratioAndProportion.register( 'HandPath', HandPath ); +export default HandPath; \ No newline at end of file

[zepumph]

From design meeting today, @emily-phet mentioned that this will be on hold, and she will let us know if we will need to do a partial solution before we get new hand artwork.

[zepumph]

We are soon going to have new hands that will be ready to get colors, over in #185. Marking on hold, and assigning myself.

[zepumph]

Over in https://github.com/phetsims/ratio-and-proportion/issues/185 we now have Paths for the hands, so we can dynamically change the colors over here. Taking off hold.

[zepumph]

```diff Index: js/common/view/RAPScreenView.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/RAPScreenView.js (revision 81a425136d65c65d600d204d2d1d9e141d49aea3) +++ js/common/view/RAPScreenView.js (date 1602271839604) @@ -7,6 +7,7 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import EnumerationProperty from '../../../../axon/js/EnumerationProperty.js'; import NumberProperty from '../../../../axon/js/NumberProperty.js'; +import Property from '../../../../axon/js/Property.js'; import Bounds2 from '../../../../dot/js/Bounds2.js'; import LinearFunction from '../../../../dot/js/LinearFunction.js'; import ScreenView from '../../../../joist/js/ScreenView.js'; @@ -64,7 +65,10 @@ // What is the unit value of the tick marks. Value reads as "1/x of the view height." This type is responsible for // resetting this on reset all. - tickMarkRangeProperty: new NumberProperty( 10 ) + tickMarkRangeProperty: new NumberProperty( 10 ), + + leftHandColorProperty: new Property( 'black'), + rightHandColorProperty: new Property( 'black') }, options ); const tickMarksAndLabelsColorProperty = new DerivedProperty( [ model.ratioFitnessProperty ], @@ -133,6 +137,7 @@ model.ratio.lockedProperty, // not a bug playTickMarkSoundProperty, this.inProportionSoundGenerator, { + handColorProperty: options.leftHandColorProperty, accessibleName: ratioAndProportionStrings.a11y.leftHand, a11yDependencies: a11yDependencies, isRight: false // this way we get a left hand @@ -157,6 +162,7 @@ model.ratio.lockedProperty, // not a bug playTickMarkSoundProperty, this.inProportionSoundGenerator, { + handColorProperty: options.rightHandColorProperty, accessibleName: ratioAndProportionStrings.a11y.rightHand, a11yDependencies: a11yDependencies, helpText: ratioAndProportionStrings.a11y.rightHandHelpText Index: js/discover/view/ChallengeRatioComboBoxNode.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/discover/view/ChallengeRatioComboBoxNode.js (revision 81a425136d65c65d600d204d2d1d9e141d49aea3) +++ js/discover/view/ChallengeRatioComboBoxNode.js (date 1602272435668) @@ -29,7 +29,7 @@ * @param {RatioDescriber} ratioDescriber * @param {Object} [options] */ - constructor( targetRatioProperty, ratioDescriber, options ) { + constructor( targetRatioProperty, ratioDescriber, colorProperty, options ) { assert && options && assert( !options.children, 'ChallengeRatioComboBoxNode sets its own children.' ); @@ -55,15 +55,15 @@ tagName: 'h3' } ); const comboBox = new ComboBox( [ - new ChallengeComboBoxItem( this.ratioToChallengeNameMap.get( 1 / 2 ).capitalized, new Color( 233, 69, 69 ), 1 / 2, { + new ChallengeComboBoxItem( this.ratioToChallengeNameMap.get( 1 / 2 ).capitalized, new Color( 233, 69, 69 ), targetRatioProperty, colorProperty, 1 / 2, { soundPlayer: soundGenerators[ 0 ], a11yLabel: ratioAndProportionStrings.challenge1 } ), - new ChallengeComboBoxItem( this.ratioToChallengeNameMap.get( 1 / 3 ).capitalized, new Color( 87, 182, 221 ), 1 / 3, { + new ChallengeComboBoxItem( this.ratioToChallengeNameMap.get( 1 / 3 ).capitalized, new Color( 87, 182, 221 ), targetRatioProperty, colorProperty, 1 / 3, { soundPlayer: soundGenerators[ 1 ], a11yLabel: ratioAndProportionStrings.challenge2 } ), - new ChallengeComboBoxItem( this.ratioToChallengeNameMap.get( 3 / 4 ).capitalized, new Color( 255, 200, 0 ), 3 / 4, { + new ChallengeComboBoxItem( this.ratioToChallengeNameMap.get( 3 / 4 ).capitalized, new Color( 255, 200, 0 ), targetRatioProperty, colorProperty, 3 / 4, { soundPlayer: soundGenerators[ 2 ], a11yLabel: ratioAndProportionStrings.challenge3 } ) Index: js/common/view/RatioHalf.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/RatioHalf.js (revision 81a425136d65c65d600d204d2d1d9e141d49aea3) +++ js/common/view/RatioHalf.js (date 1602271940958) @@ -85,6 +85,8 @@ options = merge( { isRight: true, // right ratio or the left ratio + + handColorProperty: new Property( 'black' ), tandem: Tandem.OPTIONAL, // AccessibleValueHandler via RatioHandNode @@ -116,7 +118,7 @@ this.addChild( tickMarksNode ); // @private - The draggable element inside the Node framed with thick rectangles on the top and bottom. - this.ratioHandNode = new RatioHandNode( valueProperty, enabledRatioComponentsRangeProperty, tickMarkViewProperty, keyboardStep, { + this.ratioHandNode = new RatioHandNode( valueProperty, enabledRatioComponentsRangeProperty, tickMarkViewProperty, keyboardStep, options.handColorProperty, { startDrag: () => { firstInteractionProperty.value = false; this.isBeingInteractedWithProperty.value = true; Index: js/discover/view/DiscoverScreenView.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/discover/view/DiscoverScreenView.js (revision 81a425136d65c65d600d204d2d1d9e141d49aea3) +++ js/discover/view/DiscoverScreenView.js (date 1602272358464) @@ -4,6 +4,7 @@ * @author Michael Kauzmann (PhET Interactive Simulations) */ +import Property from '../../../../axon/js/Property.js'; import RAPScreenView from '../../common/view/RAPScreenView.js'; import ratioAndProportion from '../../ratioAndProportion.js'; import ChallengeRatioComboBoxNode from './ChallengeRatioComboBoxNode.js'; @@ -18,9 +19,14 @@ */ constructor( model, tandem ) { - super( model, tandem ); + const colorProperty = new Property( 'black' ); - const comboBoxContainer = new ChallengeRatioComboBoxNode( model.targetRatioProperty, this.ratioDescriber ); + super( model, tandem, { + leftHandColorProperty: colorProperty, + rightHandColorProperty: colorProperty + } ); + + const comboBoxContainer = new ChallengeRatioComboBoxNode( model.targetRatioProperty, this.ratioDescriber, colorProperty ); this.topScalingUILayerNode.addChild( comboBoxContainer ); Index: js/discover/view/ChallengeComboBoxItem.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/discover/view/ChallengeComboBoxItem.js (revision 81a425136d65c65d600d204d2d1d9e141d49aea3) +++ js/discover/view/ChallengeComboBoxItem.js (date 1602272435665) @@ -20,13 +20,19 @@ * @param {number} value * @param {Object} [options] */ - constructor( text, color, value, options ) { + constructor( text, color, value, targetRatioProperty, colorProperty, options ) { super( new HBox( { spacing: 8, children: [ new Rectangle( 0, 0, 15, 15, { fill: color } ), new RichText( text ) ] } ), value, options ); + + targetRatioProperty.link( targetRatio => { + if ( targetRatio === value ) { + colorProperty.value = color; + } + } ); } } Index: js/common/view/RatioHandNode.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== --- js/common/view/RatioHandNode.js (revision 81a425136d65c65d600d204d2d1d9e141d49aea3) +++ js/common/view/RatioHandNode.js (date 1602272489261) @@ -31,7 +31,7 @@ * @param {number} keyboardStep * @param {Object} [options] */ - constructor( valueProperty, enabledRatioComponentsRangeProperty, tickMarkViewProperty, keyboardStep, options ) { + constructor( valueProperty, enabledRatioComponentsRangeProperty, tickMarkViewProperty, keyboardStep, colorProperty, options ) { options = merge( { cursor: 'pointer', @@ -49,9 +49,12 @@ !options.asIcon && this.initializeAccessibleSlider( valueProperty, enabledRatioComponentsRangeProperty, new BooleanProperty( true ), options ); // @private - const filledInHandNode = new FilledInHandPath(); + const filledInHandNode = new FilledInHandPath( { + fill: colorProperty + } ); const cutOutHandNode = new CutOutHandPath( { - visible: false + visible: false, + fill: colorProperty } ); const container = new Node( { @@ -89,7 +92,7 @@ */ static createIcon( isRight, tickMarkViewProperty, options ) { return new Node( { - children: [ new RatioHandNode( new Property( 0 ), new Range( 0, 1 ), tickMarkViewProperty, new Property( 10 ), merge( { + children: [ new RatioHandNode( new Property( 0 ), new Range( 0, 1 ), tickMarkViewProperty, new Property( 10 ), new Property( 'black' ), merge( { isRight: isRight, asIcon: true, pickable: false @@ -106,7 +109,6 @@ constructor( options ) { options = merge( { - fill: 'black', scale: HAND_PATH_SCALE }, options ); @@ -132,7 +134,6 @@ constructor( options ) { options = merge( { - fill: 'black', scale: HAND_PATH_SCALE }, options ); ```

[zepumph]

Colors have been implemented. I also added the color updates to the home screen icons. Please review. My guess is that the second screen dark blue is not going to stick around, as its contrast with the black stroke isn't very strong. Just so you are aware, it is easy to change the color of the NumberPickers in correlation with the hands, and we can also easily differentiate each hand if that would be clearer. Please review.

[emily-phet]

@zepumph Where should I be looking? Checked on phettest, and the hands look "old" (straight-line bottom edge, color = black).

[zepumph]

I just pulled all and things looking good to me. Here is a dev version also just in case.

https://phet-dev.colorado.edu/html/ratio-and-proportion/1.0.0-dev.67/phet/

[emily-phet]

Colors look great on my phone. Will check on computer when I have internet again.

[emily-phet]

I'm not 100% happy with the colors right now, but I think increasing the size of the hands will help. I'd like input from visual designers, but don't have a good mechanism to get that...I might ask for a quick Thursday design meeting just on this (asking those attending to consider color in advance, and discuss their thoughts briefly Thursday).

[emily-phet]

@kathy-phet @amanda-phet @ariel-phet @arouinfar Please take a look at the latest RaP, and consider the current four different colors of the hands (three colors on the first screen, one for each challenge) and one color on the second screen.

Please consider if you like these colors - or if you have a suggestion for improving them. If you don't care for these color choices, please suggest other colors as specifically as you can.

I'm trying to finalize this decision asap, but I'm not great with colors. They feel a bit "off" to me somehow, but not sure how to improve them. I think the broader a11y team is happy with them, but I'd like to get some final suggestions from PhET folks who work with color a bit more than we do before we close this this issue and call the colors final.

I requested a Thursday design meeting slot to discuss briefly any suggestions, but if responses are straightforward we won't need to have that.

[amanda-phet]

I like the colors of the hands! I think I recall the green background being really important, but If I were to change anything, it would be that. If you considered that path, I would look into a different green hue, or pick a hue based on the hand colors. If that's not an option, then I would keep everything as it is! I also really like the stroked hand.

[emily-phet]

Thanks @amanda-phet!

[arouinfar]

I also like the hand colors, but I tried to see if I could find an alternative palette based on the background color, and I didn't really like any of the options I came up with. They are all quite a bit muddier than the original set of hand colors.

I followed @amanda-phet's suggestion to find an alternative green for the background. I tried a few different greens based on the hand colors, and this set ended up working out the best for colorblind contrast. backgroundInterpolationToFitness is 10% brighter than backgroundInFitness.

  backgroundInFitness: { // the color will jump from backgroundInterpolationToFitness to this when actually in ratio
    default: new Color( '#74c15b' )
  },
  backgroundInterpolationToFitness: { // this will be the max of the interpolation for the background color
    default: new Color( '#89c767' )
  },

Here are few screenshots with these color values.

[zepumph]

I wanted to add that I personally dislike that challenge three is the same/close to the cue arrows. Of the above colors. I hope we can find a cue arrow color that isn't the same as a potential ratio hand color.

[arouinfar]

Given the amount of color in the sim, you could probably go with a light gray for the cueing arrow. I think this especially true if challenge 1 is going to start out in ratio, as it currently does in master. The arrow shape itself is also attention-grabbing.

[amanda-phet]

@arouinfar I love what you did with the green. +1 for making the green brighter as you have done.

[emily-phet]

@zepumph Let's make the arrows the same orange as in @arouinfar color palette above (first row, third column).

That addresses the issue with Challenge 3 hands being too similar to the cueing arrows - I believe.

Note about my thought process on this: I might have suggested we go with white for the cueing arrows, to minimize the addition of more colors, but I'd like to use the same ones for the keyboard cueing for the both hands mode, and that could happen when the background is white...and I didn't like that idea. I also think that this sim has a more than typical use of often-disabled features (on the second screen), which are also grey, so didn't like the double use of grey.

[emily-phet]

@zepumph @terracoda @Matthew-Moore240 @BLFiedler @jbphet @Ashton-Morris Please weigh in re changing the background green to the brighter green background color in the screenshots above.

I initially felt it was too lime-y, but I think that was just when considering in contrast to the current color. Looking back at it later, it didn't feel as "lime-y".

Please indicate "yes", "no", or "no preference" to changing the background color to this new one. I'd prefer to avoid discussion of further green options for the background, and instead, just consider do we want to make the change @arouinfar has suggested or continue with our current background color.

• [x] @zepumph
• [x] @terracoda
• [x] @Matthew-Moore240
• [x] @BLFiedler
• [x] @jbphet
• [x] @Ashton-Morris

@ariel-phet Could you weigh in as well? Just a thumbs up or down regarding angry-fruit-saladness would be great!

[brettfiedler]

I kind of like it. Notches the "playfulness" up one more and matches the aesthetic of the hands.

Yes from me.

[zepumph]

Originally I was very used to the current green, and wasn't sure about a new one, but now that I see this one, I really like it. It is much less dull, and the contrast makes it feel more phet-like. I'm all in for the new colors.

[terracoda]

I like the new green.

[Ashton-Morris]

I like the new green as well. I also like the light blue hands

[emily-phet]

Well - I see how this is going. :)

@zepumph Please implement the new green.

@arouinfar Thanks for suggestion, and your effort in looking around for some new colors. I definitely agree, the new green complements the new hand colors very nicely.

[Matthew-Moore240]

Really like the new green, I think this is a big improvement.

[zepumph]

Implemented above, see https://bayes.colorado.edu/dev/phettest/ratio-and-proportion/ratio-and-proportion_en.html?ea&brand=phet

[zepumph]

Anything else here?

[emily-phet]

@zepumph In the link above, it looks like the old green (comparing it to the screenshots above).

[emily-phet]

@zepumph There is also changing the arrow colors - see this comment for specifics.

[zepumph]

I updated the cue arrows to the orange as desired in https://github.com/phetsims/ratio-and-proportion/issues/57#issuecomment-715534107. To me it looked a bit weird until I removed the transparency (opacity) that was set back in https://github.com/phetsims/ratio-and-proportion/issues/18#issuecomment-619556276. So now the cue arrows have no transparency. This helped bring out the orange (before it felt muddy. That said, I will provide screenshots to compare soon.

[arouinfar]

The first row, third column orange from https://github.com/phetsims/ratio-and-proportion/issues/57#issuecomment-713202022 is #e68a5b.

I also realized that the hexcodes I provided in the code snippet do not match the screenshots. I iterated over a few different options locally, and I think I made an error when copying the values over.

If you compare master to the screenshots, you can see the difference.

master	https://github.com/phetsims/ratio-and-proportion/issues/57#issuecomment-713202022

@zepumph here's the code snippet with the correct hexcodes:

  backgroundInFitness: { // the color will jump from backgroundInterpolationToFitness to this when actually in ratio
    default: new Color( '#5ab46c' )
  },
  backgroundInterpolationToFitness: { // this will be the max of the interpolation for the background color
    default: new Color( '#77ce81' )
  },

[zepumph]

Thanks @arouinfar. I updated to these new values.

As for the cue arrow opacity (with the updated background greens) No transparency:

20% transparency:

To me, having the transparency just feels like it muddies the color. Let me know and I can add it back in.

Also, is this orange too similar to the challenge 1 red now?!? Lol.

[zepumph]

(And @emily-phet this time my commits are actually pushed)

[emily-phet]

@zepumph The green looks nice!

For the arrows - it looks like we're threading a color needle here, now the orange-y color looks too reddish (to similar to the red hands).

Let's go with @arouinfar's suggestion of a grey (a dark grey, may like the numbers when numbered grid lines are on). Grey fill, black stroke still. The sim's so bright now (particularly on startup) that maybe a more muted arrow actually contrasts and grabs attention in the way we're looking for.

[zepumph]

I used the same dark grey as the framing rectangles. How is that?

[emily-phet]

@zepumph I think a little lighter would feel "friendlier". Since I can't join tomorrow for our usual meeting, I'll message you on Slack to see if we can set up a time tomorrow to sort this out in realtime. I'm guessing it will be most efficient that way.

[zepumph]

How about this gray? It is the color of the tick marks and framing rectangles when out of proportion. If not, let's meet tomorrow about this.

[zepumph]

@emily-phet and I like the dark grey that is currently committed for consistency.

We also want the arrows scaled in correlation with the hands getting bigger. I'll mention that over in https://github.com/phetsims/ratio-and-proportion/issues/217.