Question

I’m making an app that requires the user to select multiple colors from a color picker and set the probability that some colors will have more than equal chance to be selected.

An example: Let’s say user selects the colors red, green and blue and selects that red should have 3 chances to be selected and the other tow only 1.
So in the end red will have a 60% chance , green 20% and blue 20%.

Now i want to do that but graphically and easy to understand.

I have a few ideas but i’m not sure which one is good …or easy…or whatever.

Idea 1:

The user selects which of the colors are more likely to get. The numbers are basically weights attached to every color.
The problem with this is that you can’t exactly have a full spectrum of colors ( all 16,777,216 of them) for obvious reasons…so you need to have relatively few colors (~150 or something).

Idea 2:

The user selects colors from areas. This is better because you can have full range of colors…but i can’t think of a simple way to have a color with more chance to be picked (like weights above).

These are just my flawed ideas. You can improve on these or give other ideas. A link to a color picker’s source code that does exactly what i want would be better though. 🙂

Answer 1

If I got you right, the user has to do the assignment between a color and a number/weight. I can see how that would easily work with Idea #1, but not with #2, since in the latter you don’t have a distinct color value to check against.

The only think you could perhaps do, is to take the user shape input (those blobs) convert them into rectangles (or only allow those to begin with) and store them in your app with each rectangle having a weight assigned as well.

Based on that information you can then calculate some “weight bands”:

1. Assumption: three rects (doesn’t matter where they are on the screen, but for clarity sake I name the left, middle, right): left (weight 4), middle (weight 2), right (weight 6)

2. Sum all weights (12)

3. Find normalization factor to get from sum to range 0..1 -> factor = 1/12

4. For each rect calculate normalized weight:
   
   L = 4 * 1/12 = 0.333
   
   M = 2 * 1/12 = 0.167
   
   R = 6 * 1/12 = 0.500

=> resulting three bands:
#1 from 0.0 to 0.167
#2 from 0.167 to 0.500 (= 0.167 + 0.333)
#3 from 0.500 to 1.000

1. Generate random value between 0 and 1, e.g 0.75.

2. Compare random value, against the normalized weight bands -> 0.75 is between 0.5 and 1.0 -> third rect

Now that you have found your relevant rect, get two other random values with the bounds being the min and max of X (for the first value) and Y (for the second value) coordinates of your determined rectangle (those rectangles were saved after the user drew those blobs/rectangles in the first place).

Last step is to look up the color value in your above shown color range texture at those just generated new coordinates and voilà, you got your color determined based on the weight assigned to the rects.