colors for Mystery functions

[pixelzoom]

Not even considering colorblind compatibility, generating random colors that don't conflict proved to be difficult. A much simpler approach is to use a pool of predefined colors, randomly choose from the pool until all of the colors have been used, then start over. That approach is demonstrated in this dev version:

http://www.colorado.edu/physics/phet/dev/html/function-builder/1.0.0-dev.61/function-builder_en.html

...which uses this pools of colors (colors from the Numbers screen, with similar colors removed):

  var COLOR_POOL = [
    'rgb( 128, 197, 237 )',
    'rgb( 147, 231, 128 )',
    'rgb( 255, 120, 120 )',
    'rgb( 255, 246, 187 )',
    'rgb( 0, 222, 224 )',
    'rgb( 246, 164, 255 )',
    'rgb( 250, 186, 75 )',
    'rgb( 127, 225, 173 )',
    'rgb( 249, 144, 99 )'
  ];

@amanda-phet Please review the current color set. If it's sufficient (which I doubt that it is), then close this issue. Otherwise please provide a color pool (RGB values preferred). Ideally, the colors should be checked for colorblind issues, but I suspect that may be complicated.

[ariel-phet]

@pixelzoom hadn't we also discussed having the question marks also change color to add a bit of "fun" factor? Certainly not a showstopper, and certainly not necessary for publication, but thought this might be a good place to make that note.

[pixelzoom]

If you want to further increase the complexity, then by all means provide me with a question mark color for each background color. But if you introduce dark function colors, there's going to be problems with how they look on the dark builder. So I really don't see the point.

[pixelzoom]

So just to clarify... I did start down the path of randomly generating colors. There are many non-trivial problems to solve, including:

(1) The colors have to look good against the (dark) builder color. (2) The colors have to look good with each other in combinations of more than 1 function. (3) The colors have to look good with a black question mark, or the question mark color also needs to be generated. (4) If the question mark color is generated, then it needs to work on the background color. (5) All of the above random color choices have to be colorblind safe.

Having a pool of predefined colors seemed like a much simpler approach that will be just as effective. So (given our time limitations) that's what I implemented. I'm hoping that someone other than me will have time to choose some colors.

Happy to revisit, but please consider the affect on deadlines.

[pixelzoom]

If we really want to be certain that colors work together for combined function, the color pool could consist of sets of 1, 2 or 3 colors. Randomly choose a set that has the correct number of colors (same as number of functions), randomize the order, and apply the colors to the functions.

[pixelzoom]

Sets of colors (as described in https://github.com/phetsims/function-builder/issues/70#issuecomment-227631239) is not a good idea, has problems.

How about sets of colors that are of similar shade?

var COLOR_POOL = [
  [ /* reds */ ],
  [ /* oranges */ ],
  [ /* yellows */ ],
  [ /* greens */ ],
  [ /* blues */ ],
  [ /* purples */ ]
];

The algorithm for N functions would be:

1. randomly pick N sets of colors (eg, reds, blues, yellows)
2. randomly pick 1 color from each set

This would ensure that we don't have similar colors in challenge, while providing a variety of color shades.

[amanda-phet]

How about sets of colors that are of similar shade?

I think what you described above, if easy to implement, solves a lot of problems with adjacent colors.

I'm not too concerned about color-blindness in this particular case, because the colors do not hold particular significance. A user really only needs to know that the refresh button worked, and they will see that because there will be at least a minor change in the function appearance.

[pixelzoom]

I've implemented the "color sets" approach described in https://github.com/phetsims/function-builder/issues/70#issuecomment-227757240.

Here's a dev version: http://www.colorado.edu/physics/phet/dev/html/function-builder/1.0.0-dev.62/function-builder_en.html?testScreen

Got to the "Test" screen, select "Mystery function colors" from the combo box, and you'll see the complete set of colors, as shown in the screenshot below. Each row is a set of colors, RGB values are displayed on the functions. If you want to change any of these, provide the old and new RGB values. If you want to add any, give me RGB values.

[pixelzoom]

1.0.0-dev.62 also has a new query parameter. showAllColors bypasses the "random" algorithm and instead assigns colors to functions in the order that they appear in the pool, so you can cycle through all colors and see them in context. For example, with showAllColors, the first 3-function challenge looks like this:

[amanda-phet]

Replace Magenta (255, 26, 255) with (255, 0, 255).

The colors all looked good to me against the blue builder and also next to each other (in case you get two adjacent colors).

[pixelzoom]

@amanda-phet:

Replace Magenta (255, 26, 255) with (255, 0, 255).

Done in 1.0.0-dev.63, see the "Test" screen: http://www.colorado.edu/physics/phet/dev/html/function-builder/1.0.0-dev.63/function-builder_en.html?testScreen

The colors all looked good to me against the blue builder and also next to each other (in case you get two adjacent colors).

You will never get 2 colors from the same "set". The algorithm is: For a challenge with N functions, choose N colors sets, then choose 1 color from each set.

If this looks good, feel free to close.

[amanda-phet]

Right. Regardless, I think the colors all looked good on the builder. Thanks Chris!

[pixelzoom]

👍