Kaip procedūriniu būdu pasirinkti spalvas (algoritmai) – „Dev.Mag“

Meno spalvų keitimas gali būti puikus būdas padidinti žaidimo turinio kiekį ir suteikti įvairovės bei turtingumo. Tai palyginti lengva įgyvendinti. Ne visada taip lengva gauti spalvų rinkinį, kuris atrodytų malonu. Šiame straipsnyje pateikiamos kelios idėjos, kaip pasirinkti gražiai atrodančias spalvų paletes.

Keli dalykai apie spalvą

Spalva yra stebėtinai sudėtinga. Kaip veikia spalva, lemia šviesos ir medžiagų fizika, mūsų akių ir smegenų biologija, sumaišyta su šiek tiek psichologijos.

Nors nereikia žinoti visi apie spalvų matymo fiziką, biologiją ir psichologiją naudinga turėti tam tikrą pagrindinę informaciją (į kurią rasite nuorodas šio straipsnio pabaigoje).

Norėdami pasirinkti paletę, yra keli svarbūs dalykai.

Skaitmeninė spalvų teorija labai skiriasi nuo teorijų, pagrįstų pigmentais (arba chemikalais, arba kristaluose esančiais metalais). Tiesą sakant, jokia spalvų maišymo sistema negali sukurti visų spalvų, kurios atsiranda gamtoje. Dažų parduotuvėje galite nusipirkti tamsiai labai ryškiai žalią spalvą, tačiau arčiausiai jūsų ekrano atkuriamos spalvos atrodys nesotintos (tiesiog pažiūrėkite į dažytų spalvų ratų atvaizdus). Tyrinėdami algoritmų spalvas, įsitikinkite, kad jie taikomi skaitmeninėms RGB spalvoms.

Vektoriniai atstumai RGB ir daugelyje kitų spalvų modelių neatitinka suvokimo skirtumų.

Redaguoti: Pasirodo, tapau paties dalyko, apie kurį kalbu, auka. Žemiau pateikti aprašymai yra teisingi mano monitoriuje, tačiau nebūtinai turi būti jūsų monitoriuje. Pagrindinė mintis vis dėlto yra – RGB vertės ir suvokimas skiriasi (ypač kai įmetate ekrano įtaisų kintamumą).

Ryškumas

Šios pilkos spalvos yra vienodai išdėstytos. Tačiau atkreipkite dėmesį, kiek lengviau atskirti šviesesnes pilkas.

Atspalvio diferencijavimas.

Kiekvienoje eilutėje atspalvis skiriasi 5%. Atkreipkite dėmesį, kad negalima atskirti tam tikrų spalvų. Taip pat atkreipkite dėmesį, kad jis skiriasi priklausomai nuo ryškumo. Šviesesnės mėlynos spalvos yra labiau skiriamos nei tamsesnės, o tamsesnės magentos – labiau nei šviesesnės.

Šis faktas tampa svarbus, kai bandote pasirinkti spalvas, kurios atrodo „vienodai“ toli viena nuo kitos; apskritai to negalima padaryti nenaudojant suvokimu pagrįstos spalvų erdvės (pvz., LAB spalvų) arba tinkamai neatlikus kitų spalvų erdvių.

Čia yra šiek tiek daugiau šiuo klausimu:

Štai būdas apskaičiuoti naudingą spalvų atstumą, kuris gali būti naudingas vėliau:

Laboratorijos spalvų erdvės yra suvokimo požiūriu vienodesnės ir gali būti spalvų pasirinkimo algoritmų, kurie suteikia vizualiai malonesnių rezultatų, pagrindas. („Photoshop“ guru žinos, kad atspalvio koregavimas turi mažiau artefaktų, kai manipuliuojama LAB kanalais, o ne RGB kanalais).

Spalvų suvokimas nėra absoliutus. Spalvos atrodo skirtingai, priklausomai nuo aplinkinių spalvų. Tai yra svarbus veiksnys renkantis spalvų paletes, kurios veikia su esamomis, arba derinant daugiau nei vieną paletę.

Čia yra daugiau informacijos apie spalvų kontrasto efektus:

Spalvų harmonijos teorija. Nors kodėl tam tikri spalvų deriniai atrodo geriau nei kiti, šiek tiek paslaptis, spalvų harmonijos teorijos yra gera vieta pradėti suprasti daugybę išvaizdžių paletių.

Žr., Pavyzdžiui:

Procesinių paletių naudojimas

Procedūrinės paletės gali būti naudojamos:

• Gaukite daugiau įvairovės iš eilės generuojamose scenose, tokiose kaip Maži sparnai.
• Norėdami gauti daugiau įvairovės iš vieno turto, kaip parodyta žemiau.
• Norėdami gauti automatines sąsajos komponentų spalvas, pvz., Ankstesnių „Microsoft Excel“ versijų (ir „Open Office Calc“) grafikuose.

Svarstymai

Renkantis algoritmus, turite galvoti apie tai, ko jums reikia:

• Kiek spalvų jums reikia? Keli, ar daug? Fiksuotas skaičius ar savavališkas skaičius?
• Kaip paletės spalvos turėtų būti susijusios viena su kita? Pavyzdžiui, ar spalvos turėtų suformuoti harmoninę triadą?
• Ar jums reikia didelio kontrasto paletės, ar paletės su minimaliu vektoriniu atstumu tarp spalvų?
• Kokios spalvos bus naudojamos su procedūriškai parinktomis spalvomis?
• Ar spalvomis perteiksite prasmę? Ar jie turi atitikti realaus pasaulio elementus? Ar jie naudojami simboliškai atskiriant skirtingus elementų tipus?
• Kokio tipo veislės jums reikia? Įvairovė kartose iš eilės? Įvairovė scenoje?

7 algoritmai

1. Atsitiktinių spalvų pasirinkimas iš pasirinkto iš anksto nustatyto

Šis labai paprastas algoritmas suteikia didžiausią kontrolę ir yra lengvai įgyvendinamas. Tai naudinga tik mažesnėms paletėms, ir, žinoma, visos paletės apsiriboja originaliu rinkiniu. Tačiau jį galima derinti su kitais algoritmais, kad gautų didesnes spalvų rinkinius.

2. Vienodas atsitiktinis RGB

Paprasčiausias procedūrų spalvų parinkimo algoritmas yra tiesiog pasirinkti atsitiktines kiekvieno iš trijų RGB kanalų reikšmes.

color = new Color(Random(), Random(), Random())

Šis algoritmas suteikia spalvų rinkinius, kurie paprastai yra gana negražūs. Paletėje nėra jokios struktūros, santykio tarp spalvų, nėra jokio akį džiuginančio rašto. Visi toliau pateikti algoritmai bando apriboti sugeneruotas spalvas taip, kad tarp spalvų būtų ryšys ar darna.

3. Atsitiktinis kompensavimas

Šis algoritmas apskaičiuoja paletę apskaičiuodamas mažą atsitiktinį poslinkį iš tam tikros spalvos.

Paprastas įgyvendinimas paprasčiausiai apskaičiuoja atsitiktinius kiekvieno RGB komponento poslinkius. Alternatyva yra tiesiog pakeisti spalvos vertę atsitiktiniu poslinkiu.

float value = (color.r + color.g + color.b)/3;
float newValue = value + 2*Random() * offset – offset;
float valueRatio = newValue / value;
Color newColor;
newColor.r = color.r * valueRatio;
newColor.g = color.g * valueRatio;
newColor.b = color.b * valueRatio;

Atsitiktinai pakeitus vertę, tam tikrais atvejais galima imituoti šešėlius (žr. Žemiau esančią vidurinę eilutę), kad scena atrodytų tarsi gilesnė nei iš tikrųjų.

Apskritai šis algoritmas yra:

• Nėra gerai mažoms paletėms, kur norima didelio kontrasto.
• Gerai praturtina sceną, kurioje pagrindinės spalvos yra apibrėžtos ir kartojamos daug kartų.
• Gerai dažyti plyteles su siūlėmis (norint gauti daugiau dispersijų su besiūromis plytelėmis, reikia šiek tiek daugiau dirbti. Žr. Skyrių Dinaminis dažymas „Kaip gauti daugiau iš besiūlių plytelių“).

Maksimalaus pasirinkto poslinkio poveikis skiriasi atsižvelgiant į pagrindinę spalvą:

• Kuo mažiau prisotinta pagrindinė spalva, tuo spalvingesnis yra suvokiamas rezultatas.
• Skirtingi atspalviai turės skirtingą suvokiamą dispersiją. Pavyzdžiui, jei pagrindinė spalva yra geltona, rezultatas bus suvokiamas kaip spalvingesnis, nei jei pagrindinė spalva būtų žalia.

4. Pasirinkimas iš gradiento

Žemiau pateiktuose kodų pavyzdžiuose Gradient.GetColor ima parametrą nuo 0 iki 1 ir sukuria atitinkamą spalvą gradiente.

Vienodas atsitiktinis Atsitiktinai pasirinkite reikšmes nuo 0 iki 1 ir priskirkite tai gradientui, kad pasirinktumėte spalvas. Tai suteikia mažai struktūros, išskyrus tą, kuri jau būdinga gradientui.

Tinklelis Tai naudinga renkantis žinomą spalvų skaičių, užtikrinant, kad dvi spalvos nebus arčiau viena kitos (palei gradientą) kaip 1 / n.

Tai naudinga spalvoms, perduodančioms informaciją, jei spalvų yra nedaug.

Nervuotas tinklelis Tai naudinga norint gauti daugiau įvairovės su nedideliu spalvų skaičiumi, kai žinote spalvų skaičių iš anksto. (Įvairovė yra ne tarp spalvų, o tarp skirtingų kartų).

for(int i = 0; i < n; i++)
   color[i] = gradient.GetColor((i + Random.NextFloat()) * intervalSize)

Netinkamo tinklelio naudojimas gerai tinka nedideliam spalvų pasirinkimui, todėl kelios kartos duoda skirtingus rezultatus. Vienas trūkčiojančio tinklelio naudojimo trūkumas yra tas, kad nėra garantuojama, kad spalvos sekoje bus vienodai skirtingos viena nuo kitos. Galite išspręsti šią problemą apribodami drebėjimo kiekį, kad garantuotumėte mažiausią atstumą tarp spalvų:

maxJitter = ...//some value between 0 1nd 1

for(int i = 0; i < n; i++)
   color[i] = gradient.GetColor(
      (i + 0.5 + (2 * Random.NextFloat() - 1) * maxJitter) * intervalSize);

Auksinis santykis Tai schema, leidžianti pasirinkti spalvų seką, nebūtinai iš anksto, kad iš eilės pasirinktos spalvos visada būtų toli viena nuo kitos. Spalvos niekada nesikartoja (nors laikui bėgant spalvos tampa artimos anksčiau pasirinktoms spalvoms).

offset = Random.NextFloat();

for (int i = 0; i < n; i++)
   color[i] = gradient.GetColor(offset + (0.618033988749895f * i) % 1);

Šis algoritmas yra naudingas renkantis spalvas kontrastui sąsajoje, kur garantuojamas didelis kontrastas tarp vienas po kito einančių spalvų.

Čia yra straipsnis, paaiškinantis, kodėl tai veikia:

5. Atsitiktinių kanalų pasirinkimas kitose spalvų erdvėse

Pavyzdžiui, gerų rezultatų galima pasiekti naudojant HSL spalvų erdvę.

Atsitiktinis atspalvis

Atsitiktinis sodrumas

Atsitiktinis skaistis

Atsitiktinis sodrumas ir skaistis

6. Standartinės spalvų harmonijos

http://www.websiteoptimization.com/speed/tweak/color–harmony/

Atsitiktinių spalvų pasirinkimo būdai standartinėms spalvų harmonijoms visi veikia iš esmės vienodai: apribokite galimą atspalvio pasirinkimą ir kontroliuokite sodrumą bei skaistį. Įvairių spalvų harmonijoms sukurti galime naudoti bendrą triadinį algoritmą su tinkamais parametrais:

Algoritmas turi keletą parametrų; svarbūs yra du poslinkio kampai ir du kampų diapazonai.

Paprasčiausia algoritmo forma veikia taip:

• Pasirinkite atsitiktinį atskaitos kampą.
• Pasirinkite atsitiktinį kampą iš viso diapazono (sudėjus tris diapazono kampus)
• Jei kampas yra mažesnis nei pirmasis diapazonas, išlaikykite jį
• Kitu atveju, jei kampas yra didesnis už pirmąjį diapazoną, bet mažesnis už pirmųjų dviejų diapazonų sumą, kompensuokite jį pirmuoju poslinkio kampu
• Priešingu atveju kompensuokite jį antruoju poslinkio kampu
• Pridėkite šį kampą prie atskaitos kampo
• Spalva su tokiu kampu kaip spalva yra spalva, sukurta pagal trijų harmoniją

Čia yra šio algoritmo C # įgyvendinimas, kuris sukuria nurodytą spalvų skaičių su kontroliuojamu sodrumu ir skaisčiu.

public static List GenerateColors_Harmony(
   int colorCount,
   float offsetAngle1,
   float offsetAngle2,
   float rangeAngle0,
   float rangeAngle1,
   float rangeAngle2,
   float saturation, float luminance)
{
   List colors = new List();

   float referenceAngle = random.NextFloat() * 360;

   for (int i = 0; i < colorCount; i++)
   {
      float randomAngle = 
         random.NextFloat() * (rangeAngle0 + rangeAngle1 + rangeAngle2);

      if (randomAngle > rangeAngle0)
      {
         if (randomAngle < rangeAngle0 + rangeAngle1)
         {
            randomAngle += offsetAngle1;
         }
         else
         {
            randomAngle += offsetAngle2;
         }
      }

      HSL hslColor = new HSL(
         ((referenceAngle + randomAngle) / 360.0f) % 1.0f,
         saturation, 
         luminance);

      colors.Add(hslColor.Color);
   }

   return colors;
}

Algoritmą galima padaryti šiek tiek intuityvesnį, centravus atskaitos ir poslinkio kampus atitinkamuose diapazonuose.

• Pasirinkite atsitiktinį atskaitos kampą.
• Pasirinkite atsitiktinį kampą iš viso diapazono (sudėjus tris diapazono kampus)
• Jei kampas yra mažesnis nei pirmasis diapazonas, sumažinkite jį puse pirmojo diapazono.
• Kitu atveju, jei kampas yra didesnis už pirmąjį diapazoną, bet mažesnis už pirmųjų dviejų diapazonų sumą, kompensuokite jį pirmuoju poslinkio kampu, atėmus antrąjį diapazoną.
• Priešingu atveju atskaitykite jį antruoju poslinkio kampu, atėmus trečiąjį diapazoną.
• Pridėkite šį kampą prie atskaitos kampo.
• Spalva su tokiu kampu kaip spalva yra spalva, sukurta pagal trijų harmoniją.

Daugiau veislių

• Naudojant centruotą algoritmo versiją, lengva pateikti (o ne generuoti) atskaitos kampą, todėl algoritmą galima susieti su kitais spalvų parinkimo algoritmais.
• Galima pridėti daugiau įvairovės pasirinkus atsitiktinį sodrumą ir atsitiktinį ryškumą (galbūt diapazone nuo nurodytų parametrų). Tai gali pakeisti harmoninę schemą, kai kraštų spalvos pabrėžiamos jų sodrumu / skaisčiu. Daugeliu atvejų tai yra gerai.
• Atspalvį galima pasirinkti vienodai, o ne atsitiktinai visame diapazone. Tai užtikrins, kad spalvos būtų mažiausiu atstumu nuo atspalvio.
• Su netinkamais parametrais galime sukurti įprastas spalvų schemas:
  • Analogiškas: Pasirinkite antrą ir trečią 0 diapazonus.
  • Papildoma: Pasirinkite trečiąjį diapazoną 0 ir pirmąjį poslinkio kampą 180.
  • Padalinti papildomą: Pasirinkite poslinkio kampus 180 +/- mažas kampas. Antrasis ir trečiasis diapazonai turi būti mažesni už skirtumą tarp dviejų poslinkių kampų.
  • Triada: Pasirinkite poslinkio kampus 120 ir 240.

7. Triadų maišymas

Šis algoritmas pasiima tris spalvas ir jas maišo …