Jak znaleźć optymalny zestaw kolorów dla 10 graczy?

Chcę nadać każdemu z 10 graczy niepowtarzalny kolor identyfikujący. Czy jest do tego optymalny zestaw kolorów? Jak mogę je utworzyć?

Każdy zestaw, który wymyśliłem, zawiera kolory, które są zbyt podobne.

Aktualizacja: poniżej zapytano mnie, po co to jest (uczciwe pytanie). Teraz mogę powiedzieć - Windwardopolis i kolory działały świetnie.

Możesz wygenerować jednakowo odległe wartości odcienia w przestrzeni HSV:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

Możliwe jednak, że nie zawsze będziesz mieć 10 graczy. W takim przypadku paleta nie byłaby bardzo wydajna, chyba że ponownie wygenerujesz inną paletę dla innej liczby graczy. Zamiast tego niektórzy autorzy zalecają wygenerowanie palety przy użyciu złotego współczynnika, wykorzystując właściwość wynikającą z twierdzenia o równej dystrybucji :

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0), 0.5, 1.0);

W ten sposób, nawet jeśli zatrzymasz się na 3, 4 lub 7 graczach, uzyskasz bardzo dobry rozrzut barwy.

Wiele irracjonalnych liczb wystarczy, ale złoty podział będzie działał najlepiej (zostało to udowodnione ).

Na koniec możesz użyć dwóch różnych sekwencji generujących, aby dostosować Slub Vteż. Na przykład ( edytuj : Dodałem sqrtwezwanie do lepszej równej dystrybucji ):

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0),
                    0.5,
                    sqrt(1.0 - fmod(i * 0.618033988749895, 0.5)));

Aktualizacja : powyższe wyniki można poprawić, stosując krzywą korekcji dla H(podobną do krzywej gamma dla komponentów RGB), która uwzględnia ludzki układ wzrokowy. Oto krzywa korekcji odcienia, którą obliczyłem za pomocą pomiaru CIEDE2000 :

Wyniki dla równo odległych wartości odcienia są następujące:

A dla sekwencji generowania złotego podziału (z poprawkami i bez V):

Opublikuję aproksymację wzoru krzywej do zastosowania w programach, jak tylko znajdę dość dobrą.

8 kolorów StarCraft to :

Czerwony, niebieski, turkusowy, fioletowy, pomarańczowy, brązowy (zielony na mapach pustynnych), biały (zielony na mapach lodowych), żółty

Obv. Blizzard to geniusze UI i badał problem.

Zostawili Greena jako zamianę Browna na pustynnych mapach, więc technicznie jest ich tam 9.

W 12 Warcraft 3 kolory:

Czerwony, niebieski, turkusowy, fioletowy, żółty, pomarańczowy, zielony, różowy, szary, jasnoniebieski, ciemnozielony, brązowy

Oto jak to wygląda:

Jak widać, są one dość wyraźne i łatwe do odróżnienia. Ciemnozielony jest właściwie łatwy do odróżnienia od turkusowego, być może dlatego, że ludzkie oko może najłatwiej odróżnić odcienie zieleni. Jeśli jesteś pewien, że twoi gracze będą tetrachromatami żeńskimi , prawdopodobnie wybierzesz dowolne kolory.

Kilka osób tutaj zaleca podzielenie przestrzeni barw HSV w 10 równo oddalonych pozycjach odcień. Moim zdaniem nie jest to dobre rozwiązanie. Ludzkie oko nie dostrzega jednakowo różnic w kolorze w całym spektrum HSV. Na przykład to, co nazwalibyśmy pomarańczowym, zajmuje niewielki kawałek pasma, podczas gdy dobry 25% fragment może zostać zakwalifikowany jako zielony. Zaczyna się więc od złej przesłanki. Spójrz na pierwszy rząd kolorów w tej odpowiedzi . Dwie zielenie są prawie nie do odróżnienia.

Pamiętaj, że użytkownicy będą musieli się komunikować i odnosić do kolorów. W świetle powyższego motyw Starcraft / Warcraft stanowi świetny trop do naśladowania. Wybór w oparciu o listę zwykłych angielskich kolorów Crayola wcale nie jest złym pomysłem, ponieważ skończysz ze znanymi nazwanymi kolorami. Następnie dostosuj te kolory, aby były odważne, wyciszone, niezależnie od tego, co pasuje do Twojej estetyki, o ile nadal są rozpoznawalne jako np. Czerwony, pomarańczowy, żółty, zielony, niebieski, fioletowy, brązowy, szary, biały, czarny.

Edycja: związek między postrzeganiem języka i kolorów jest tak interesujący, chciałem tylko udostępnić ten niesamowity link:

Kreacjonizm świata: jak nadaliśmy nazwy kolorom, a nasze mózgi pomieszały się w empirycznej gorliwości

Pomyślałem, że muszę przełamać to podejście „symboli” na osobną odpowiedź.

Wcześniej zakładam, że ludzie potrzebowali flag i innych rzeczy, aby łatwo zidentyfikować armię w oddali, więc wiesz, czy zaatakować, czy bronić (w przypadku wrogów), czy uzyskać ulgę (w przypadku sojuszników).

Nawiasem mówiąc, właśnie to próbujesz zrobić. Łatwo zidentyfikuj coś w oddali.

Możesz to zrobić za pomocą samego koloru, ale być może lepszym sposobem jest użycie koloru i symboli . Używanie kombinacji kolorów i symboli pomoże osobom niewidomym w rozpoznawaniu rzeczy, jak wiele osób wspomniano powyżej.

Jeśli jednostki są wystarczająco duże, możesz także użyć 2-4 kolorów herbów.

Wzór jest łatwo rozpoznawalny, nie tylko kolor. Dobre teksturowanie może oznaczać dość duży herb na piersi lub ramieniu każdej jednostki.

Na powyższym zdjęciu hełmy dla różnych jednostek mają inną geometrię , a także insygnia tarczy.

Interesujący może być również pomysł japońskiego Ponu , które są bardzo prostymi „logotypami”

Teraz w zasadzie brandujesz swoje urządzenia nowoczesnymi „markami”. StarCraft II zrobił to trochę z „naklejkami”,

ale są one ledwo widoczne w grze

i nie są używane do identyfikacji jednostek, tak jak kolory.

Inspiracji szukałbym również flag, szczególnie tych, które nie używają 3-paskowego wzoru marki (te stają się trochę mylące). Rozważać:

• Szwajcaria:
• Somolia:
• Korea Południowa:

Wszystkie mają bardzo proste, ale charakterystyczne flagi.

Sprawdź także symbole używane przez rząd amerykański do identyfikacji personelu obrony. Są to obrazy monochromatyczne (można to zrobić całkowicie w czerni i bieli), więc może to być świetne rozwiązanie, które nie wyklucza osób niewidomych (w zasadzie używają symboli do identyfikacji zespołów zamiast kolorów)

Po co wymyślać koło ponownie? Istnieje nawet standard dla zestawu szesnastu kolorów, z których można wybrać dziesięć. To jest zestaw ANSI http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

Kolory ANSI są równomiernie rozmieszczone na kostce RGB, co moim zdaniem lepiej nadaje się do tego problemu niż przestrzeń HSV.

Kiedy bierzesz skrajności kostki RGB, otrzymujesz znajome kolory, takie jak czerwony, niebieski, cyjan itp. Po ośmiu punktach narożnych otrzymujesz wszystkie punkty pomiędzy nimi, na krawędziach.

Stworzenie 10 kolorów, które można rozróżnić, będzie naprawdę trudne. Jest to dość powszechny problem podczas tworzenia wykresów lub wykresów dla wielu wartości, dlatego często używają kolorów i kształtów lub kombinacji kolorów i wzorów mieszania.

Jeśli chcesz wyświetlić znaczniki, możesz użyć 4 podstawowych kolorów (na przykład czerwony, niebieski, pomarańczowy, czarny) i czterech podstawowych kształtów (kwadrat, koło, trójkąt, diament) i uzyskać 16 bardzo łatwych do odróżnienia znaczników.

Jeśli farbujesz w obszarach, skorzystaj z tego samego pomysłu, ale zamiast kształtów połącz kolory z wzorami kreskowania w czarne lub białe linie.

Inną rzeczą do rozważenia jest nie używanie koloru jako jedynego sposobu, aby powiedzieć stronie. Najechanie myszką na obszar może go podświetlić i dać podpowiedź z wyraźnie podaną nazwą gracza. A może lista 10 graczy może być przesunięta, a gdy najedziesz myszką na nazwę gracza, wyświetlone zostaną wszystkie obszary na mapie dla tego gracza.

Wybierając kolory, pamiętaj także o ślepocie kolorów. Na przykład zielony i czerwony mogą nie być rozróżnialne. Spójrz na http://jfly.iam.u-tokyo.ac.jp/color/#select, aby uzyskać zestaw sugerowanych kolorów, które nie będą stanowić problemu dla osób niewidomych. Dodatkowym zasobem jest http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest

Nawet jeśli uda ci się uzyskać 10 unikatowych kolorów, które są łatwo rozpoznawalne przez jedną osobę, inna osoba może nadal mieć trudności z rozróżnieniem tego zestawu.

Rozważ ograniczenie się do mniejszego zestawu kolorów i dodanie wyróżniającej się cechy , takiej jak czarny pasek . W przypadku zestawu kolorów prawdopodobnie najlepiej nie odejść zbyt daleko od tego, co większość ludzi może łatwo odróżnić: ROYGBIV . Prosty pasek / brak paska na ROYGBIV daje 14 identyfikujących elementów gry.

Nie musisz też ograniczać się do czarnego paska. Rozważ następujące rozwiązanie okablowania 25 par (które równie łatwo mogą być paskami zamiast par): http://en.wikipedia.org/wiki/25-pair_color_code

Chciałem tylko nawiązać do palety Tableau-10, która została opracowana z myślą o dużej odrębności i która została opisana w tym artykule:

http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf

„Paleta Tableau-10 zapewnia najlepszą wyrazistość kolorów i minimalne nakładanie się nazw”.

Brent Berlin i Paul Kay pokazali, że przestrzeń kolorów można podzielić na kilka podstawowych kolorów, ale to zależy od kultury, ponieważ nadanie nazwy kolorowi czyni go bardziej rozpoznawalnym.

W języku angielskim istnieje 11 podstawowych kolorów: biały, czarny, czerwony, zielony, żółty, niebieski, brązowy, fioletowy, różowy, pomarańczowy i szary.

Nie podoba mi się pomysł wybierania odcieni wokół koła z tych samych powodów, co stwierdził Matt Montag

Rób więcej niż tylko kolory - posiadaj reprezentacje wizualne, które dodają zarówno do wiedzy, stylu sztuki, jak i reprezentacji kolorów.

Na przykład Legend of the Five Rings używa niesamowitego sposobu rozróżnienia między „zestawem kolorów”.

Jeden z najpiękniejszych przykładów, z którego można wyciągnąć lekcję. Zwróć uwagę na setki sposobów rozróżnienia między Klanami. To nie tylko kolory podstawowe, ale także kolory wtórne, a nawet trzeciorzędowe. Kolory są nawet uwzględnione w fryzurze, rodzaju noszenia, rodzaju postaci, dołączonym symbolu, flagach, banerach, mini-flagach na plecach, osobowości.

Największą rzeczą, którą z tego wziąłbym, jest połączenie wielu kolorów. To nie jest proste: niebieski, czerwony, fioletowy, brązowy, żółty, zielony, turkusowy.

Jest to połączenie dwóch kolorów, przy czym oba są bardzo wyraźne. Może to pozwolić na znaczną liczbę dodatkowej liczby graczy.

Każdy klan miałby zarówno kolor podstawowy, jak i zestaw kolorów wtórnych.

„Krab był głównie identyfikowany z niebiesko-szarymi, a także z kolorami czarnym, czerwonym i brązowym”

Jest piękny, ponieważ bez względu na to, jak ta osoba wyglądała (duża, wątła, samurajska, czarodziej, chłop), zawsze można było powiedzieć, z którego klanu pochodzili. To nie była tylko „czerwona” dla Scorpiona, to była ciemna Krwawa Czerwień i CZARNA. Podczas gdy Phoenix miał kolory sunburst: czerwony, pomarańczowy, żółty.

Nigdy nie pomylisz Skorpiona z Feniksem, nawet jeśli ich kolory były podobne i oboje używali dużo czerwieni.

Wypróbuj ten mikser kolorów: w3schools.com Mikser kolorów HTML .

Oto, co bym zrobił: wybierz kolor dla pierwszej opcji. Następnie wybierz jeden dla drugiej opcji, aby drugi kolor znajdował się dokładnie w przeciwnej pozycji w stosunku do pierwszej. Kolor w pozycji: wiersz 1, komórka 1 miałby odwrotność: ostatni rząd, ostatnia komórka.

W ten sposób za każdym razem otrzymujesz 2 bardzo różne kolory na końcach mieszanki. Powtórz to 5 razy, zawsze wybierając kolory, które są daleko od ostatniego wyboru.

To pytanie ma wiele odpowiedzi, ale chciałem się bardziej skupić na dostępności.

Gdybym był w twoim scenariuszu (muszę wybrać kolory dla pewnej liczby rzeczy w grze, które muszą być postrzegane jako odrębne przez wszystkich zaangażowanych graczy), moim głównym zmartwieniem byłoby pomieszczenie nie tylko graczy, którzy są ślepi na kolory, ale także graczy, którzy mają słaba widoczność.

O ile mi wiadomo, jedynym rozwiązaniem tego problemu jest WARTOŚĆ KONTRASTOWA . Niektóre osoby widzą tylko w czerni i bieli (źródło: historie przyjaciół z college'u artystycznego dotyczące wzięcia udziału w zajęciach z teorii kolorów, ale nie są w stanie dostrzec żadnego koloru z powodu nieudanej operacji laserowej oka). Niektóre osoby są niedowidzące lub częściowo / prawnie niewidome. Musisz różne odcienie szarości jako punkt wyjścia, tak że kolory DO wyboru są widoczne i wyraźne dla KAŻDEGO .

Aby to wszystko osiągnąć i mieć dobrze wyglądające kolory, weź pod uwagę ten obraz uzyskany przez nałożenie poziomego gradientu tęczy w trybie mieszania kolorów na pionowy gradient czarno-biały (spróbuj sam, być może z niestandardowym kolorem gradient inny niż tęcza!):

Od najciemniejszych do najlżejszych: czarny, niebieski, czerwony, purpurowy, zielony, cyjan, żółty, biały.

Czy widzisz słaby zygzak „czystego koloru”? TO jest naturalna wartość przedstawionych kolorów. Nawet przy użyciu czystych kolorów niebieski jest najciemniejszy, a żółty najjaśniejszy. Skorzystaj z tych informacji, aby wybrać kolory, które pasują do wymagań wartościowych dla graczy, którzy są ślepi na kolory i / lub niedowidzący ORAZ są estetyczne dla osób, które mogą dostrzec pełny majestat wybranych barw.

Mam nadzieję że to pomoże! : -)

PS Chcę się upewnić, że również widziałeś ten komentarz!

Najlepszą odpowiedzią na ślepotę kolorów jest to, że nie można polegać na kolorze. Każdy gracz powinien mieć idealną sylwetkę dla wszystkich aktorów, którymi kontroluje. Mam na myśli sylwetkę, a nie jakiś symbol; zbyt wiele gier typu Dopasuj 3 źle to robi, a nawet dla osób bez ślepoty na kolory są po prostu trudne do gry i powodują zbyt duże zmęczenie oczu. - Sean Middleditch, 30 grudnia 2012 o 5:08

Sposobem na zapewnienie optymalnego zestawu pod względem rozróżnialnych kolorów dla zmiennej liczby graczy (bez uwzględnienia ślepoty barw) byłoby wybranie modelu kolorów HSL (odcień, nasycenie i jasność).

Wybierz stałą jasność i nasycenie, w zależności od wyboru. Następnie zmieniasz odcień koloru 360 / playerCount, jak w poniższym pseudo kodzie:

saturation = 200;
lightness = 128;
hueDelta = 360 / PLAYER_COUNT;

for (int i = 0; i < PLAYER_COUNT; i++)
    color[i] = Color.FromHSL(hueDelta * i, saturation, lightness);

Chcę przedstawić alternatywny schemat kolorów:

Są to kolory RGB (ta sama kolejność) z sugerowanymi nazwami:

#eeeeee - white
#efef00 - yellow
#00e1da - cyan
#bfbf00 - olive
#12c055 - light green
#e21e80 - pink
#777777 - gray
#c10008 - red
#8900ae - light purple
#7c3900 - light brown
#0029b9 - blue
#400086 - dark purple
#4b1c00 - dark brown
#003004 - dark green
#07004b - dark blue
#111111 - black

Uwaga: nie użyłem czystej czerni i bieli, myśląc, że być może są one używane jako tło lub kontury.

Metodologia: wybrałem 12 kolorów na nasyconej powierzchni kolorowego sześcianu (myślę, że byłbym szczęśliwy z 12), przyglądając się ich separacji, a następnie - używając narzędzia do symulacji ślepoty barw - zacząłem poprawiać. Potem dodałem prawie biały, prawie czarny i zakradłem się do szarego, bo mogłem. To dało mi 15 kolorów. Chciałem 16 kolorów, ponieważ jest to potęga 2, i pomyślałem, że może to ułatwić deweloperom. W końcu znalazłem sposób na dodanie szesnastego koloru, musiałem w tym celu przenieść inne. Następnie ... sprawdź ponownie za pomocą narzędzia do symulacji ślepoty barw, napraw i powtórz.

Oto różne przypadki ślepoty na kolory:

Normalna:

Protanopia:

Deuteranopia:

Tritanopia:

Protanomalia:

Powtórzonego Prawa:

Trytanomalia:

Achromatopsja:

Achromatomalia:

Po dłuższej zabawie z narzędziem do symulacji ślepoty barw, muszę przyznać, że najważniejszy jest kontrast.

Rozważmy na przykład: piąty (jasnozielony), siódmy (szary) i dziewiąty (jasnofioletowy) kolor. Wyglądają podobnie w niektórych przypadkach, w szczególności w małych rozmiarach i oddzielone innym kolorem. Jednak połóż je obok siebie, aby je rozróżnić. Zwiększ obszar pokryty kolorem, dzięki czemu łatwiej je rozróżnić. Więc ... projektowanie ślepoty barw to nie tylko wybieranie kolorów.

W tej notatce ... jeśli wybierzesz kombinację dwóch kolorów zamiast jednego, aby reprezentować frakcję, to bardzo daleko.

Te kolory zostały wybrane bardzo empiryczną metodą. Zauważam, że bardzo ważną kwestią jest upewnienie się, że wszystkie mają różną jasność. Zauważam również, że większość „kolorów” pojawia się dwa razy (są dwie zielenie, dwa fioletowe, dwa brązowe itp.). W rzeczywistości czwarty kolor (oliwkowy) jest ostatnim, który dodałem i postanawiam, że będzie to kolor podobny do żółtego, ponieważ nie było nic takiego jak żółty. Podejrzewam, że może to stanowić podstawę do bardziej systemowego wybierania kolorów.

Z perspektywy czasu prawdopodobnie powinienem przyciemnić drugi żółty kolor (oliwkowy) i użyć tej plamki jasności dla różu (patrz 7. kolor). Dlaczego? Ponieważ dałoby to więcej odcieni do zabawy. Ern ... to wystarczy, a zrobienie wszystkich zdjęć jest kłopotliwe.

Dodatek : Nie zastanawiałem się nad tym, jak ekran LCD rozróżnia kolory, jeśli spojrzysz poza preferowany zakres kątów.