3
\$\begingroup\$

I'm learning some concepts of procedural content generation. Now I'm generating a map with regions and each region has a diferent colors generated in a pseudo-random way.

My problem right now is that most of times (more probably when more regions exists), some regions has colors that are visually similar.

I want to control that adjacent colors are visually different, but still with some random component. What make colors different?

\$\endgroup\$
  • \$\begingroup\$ Similar question on different colors set - gamedev.stackexchange.com/questions/46463 \$\endgroup\$ – Kromster Oct 10 '18 at 6:09
  • \$\begingroup\$ Yes, but that question is not based on the fact that colors are procedurally generated. This changes conditions \$\endgroup\$ – Killrazor Oct 10 '18 at 18:49
5
\$\begingroup\$

You could now go really deep into color theory to answer the question of what exactly makes two colors visually distinct. RGB is a color system for machines which doesn't map linearly to human perception. So if you want a really good formula, then it can get amazingly complex. And if you want your game to be accessible for people with various forms of color blindness, then you might have to offer some completely different alternative formulas.

But a quick-and-dirty solution could be to simply look at their respective difference of their R, G and B components and add them up. So if you have the colors col1 and col2, then you could calculate their difference with

abs(col1.r - col2.r) + 
abs(col1.g - col2.g) +
abs(col1.b - col2.b)

But now that we have this formula, what do we do if our algorithm placed two very similar colors next to each other? We could change one of them to a random other color, but now it might be too similar to one of its other neighbors. So changing one color could cause a ripple effect affecting all the other colors.

One solution I could think of would be to create four different color palettes 1 to 4. Make sure that none of the colors in one palette is visually close to a color in a different palette (you can have visually close colors in the same palette, though). Then pick colors from these palettes at random according to this schema:

12121212
34343434
12121212
34343434

Or in technical terms:

  • If X is even and Y is even, use palette 1
  • If X is odd and Y is even, use palette 2
  • If X is even and Y is odd, use palette 3
  • If X is odd and Y is odd, use palette 4

This means that all neighbors of a tile will be from a different palette. And because no color has a similar color in a different palette, you will never have two visually similar colors next to each other.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.