adjust vector colors
Closed this issue · 10 comments
After changing component vectors to have dashed tails in #177, @ariel-phet and I discussed color palette changes via Zoom. This issue is to track those changes.
Goals:
- Good contrast
- Good differentiation and association of colors.
- Differentiation between sum components and non-sum components.
Changes we discussed and that I'll proceed with:
- Now that component vectors are dashed, use the same color for main vector and its components.
- Use 'black' for sum vector and its components in Explore 1D, Explore 2D, and Equation screens. This provides nice contrast.
- For the the Lab screen, we have 2 sums, so we need to different colors for sum vector and its components. Try using dark shades of the main vector colors.
Things we discussed but abandoned:
- For Lab screen, we tried sum vectors that are black with a stroke that matches the main vector color. This didn't look bad. But it gave us no way to differentiate the sum components, because dashed vectors cannot be stroked.
Differentiation between sum components and non-sum components.
Yes! This is something that has really been concerning me when reviewing the dashed components.
Now that component vectors are dashed, use the same color for main vector and its components.
👍
Use 'black' for sum vector and its components in Explore 1D, Explore 2D, and Equation screens. This provides nice contrast.
For the the Lab screen, we have 2 sums, so we need to different colors for sum vector and its components. Try using dark shades of the main vector colors.
I'm not so sure I like this direction. Yes, black has nice contrast, but c and f are not necessarily sums. Dashed black is also more challenging on the grid, so I would like to use it sparingly. It also concerns me that Lab screen would be different from Explore 1D and Explore 2D. I would rather use darker shades of of the vector color on Explore 1D, Explore 2D, and Lab, and leave the Equations screen black.
1.0.0-dev.16 was publish before any color changes were made.
1.0.0-dev.17 contains the changes suggested by @ariel-phet, as summarized in #184 (comment). I also used 'black' for the Component radio button icons, since associating them with any specific vector color (e.g. 'blue') seems incorrect/misleading.
Unfortunately, I received @arouinfar's concerns about the sum vector changes after I had done this work. I can revert and/or make further changes, but I'd like to have a consensus before I doing additional work. Assigning to @arouinfar and @ariel-phet to work on that consensus.
@ariel-phet @arouinfar In the above commits, 1.0.0-dev.18:
- Colors have been reverted to 1.0.0-dev.16
- I created separate (independent) color palettes for each screen. You will find them towards the bottom of VectorAdditionColors.js.
- At the top of VectorAdditionColors.js, you'll find constants
BLUE,PURPLE,RED,GREEN. If you change these, they apply to all color palettes.
Please use this to experiment with colors in your working copy. If you're not comfortable with editing the .js file, then we'll need to discuss adding a ColorProfile so that you can edit via vector-addition-colors.html.
So it sounds like @arouinfar is on the same page in terms of matching colors of vectors and their components. It seems then we just need the right strategy of choosing colors. Just for reference, some screenshots, of what to me is an example of a pedagogically vital case.
With black sum vectors:
with darker blue sum vectors
And darker in the case of the magenta
To me, the black certainly wins the contrast goal, but I understand the concerns @arouinfar raised. It seems that if we go with the theme of lightening the main vectors a touch, using darker shade sum vectors, and then using black vectors for c and f on the equations screen we will be good to go, and meet all goals well. So up to @arouinfar and I to come up with some colors we think work well.
Worked with @arouinfar, she will be putting color choices into this issue. I think we also decided we would like to use the blue for Component radio buttons, the black and gray just looks a little too muted.
@pixelzoom we decided to change the red to pink, and use a darker shade for the sum on Explore 1D, Explore 2D, and Lab. We also thought that the color contrast was sufficient enough that the sum vectors don't need a stroke, and the icon in the panel also serves as a legend. We would like to keep c and f black on the Equations screen.
| Basic Color | Sum Color |
|---|---|
| BLUE, no change | rgb( 5, 85, 125 ) |
| PURPLE, no change | rgb( 84, 2, 128 ) |
rgb( 255, 53, 133 ) |
#800133 (The equivalent rgb value in Illustrator -- rgb( 128, 1, 151 ) -- shows up purple in my local copy and in the GitHub preview, which is why I've provided a hexcode.) |
| GREEN, no change | rgb( 2, 75, 0 ) |
Here are some screenshots of the colors that @ariel-phet and I decided on.
@arouinfar thanks for the clear specification! Updated in master and 1.0.0-dev.19. Please review.
In #184 (comment), @arouinfar said:
#800133(The equivalent rgb value in Illustrator --rgb( 128, 1, 151 )-- shows up purple in my local copy and in the GitHub preview, which is why I've provided a hexcode.)
I investigated this. #800133 is rgb( 128, 1, 51 ), not rgb( 128, 1, 151 ) -- the blue components are different. So I'm guess that this was due to a typo when copying values from Illustrator.
dev.19 looks great, thanks @pixelzoom!
I investigated this. #800133 is rgb( 128, 1, 51 ), not rgb( 128, 1, 151 ) -- the blue components are different. So I'm guess that this was due to a typo when copying values from Illustrator.
🤦♀ well, at least that explains things!