HLS barvni model

Abstract

The following page presents generation of HLS (hue - lightness - saturation) colour model in javascript with two possible crossections: with constant L and through the L axis. The viewer may choose his view to the desiderated slices.

Uvod

Grafika je poglavje v računalniku, kjer verjetno brez barv ne bi šlo. Lahko gre za enostavno senčenje enobarvne površine ali pa lepljenje komplicirane teksture, vedno se uporabi barvo iz palete. Te barve se potem prikazujejo bodisi na monitorju bodisi na priterju oziroma ploterju. Tudi zato, da se prikaže sposobnost prikazovanja vseh možnih barv oziroma da se pogleda, katero barvo se lahko izbere, se generira barvne modele, ki so nekakšen standard za podajanje barve.

Programerjem je v grafiki na voljo množica barv od vsaj 256 do 16M barv v 24-bitnem sistemu (primer za RGB barvni prostor). Tudi zaradi tega se mora dati vsaka barva na različnem prikazu vedno enako podati in vsaj približno enako prikazati.

Barvni modeli

Barvni modeli so se razvili iz različnih interesov in potreb. Na primer model RGB (Red-Green-Blue), je standarden za prikaz na monitorju in je človeku tudi najbližje za razumevanje. Namreč če se hoče dobiti določeno barvo, je treba zmešati določeno količino rdeče, zelene in modre komponente. Zelo podoben modelu RGB je CMY model (Cyan-Magenta-Yellow) - ravno tako se meša določeno količino posamezne komponente - in je zato tudi njegova prostorska predstavitev enaka namreč kocka.

Kot omenjeno se barvni model opiše v nekem prostoru, koordinatnem sistemu, ki ima dimenzijo enako številu komponent. Tako se RGB in CMY modela opišeta enostavno v kartezičnem koordinatnem sistemu, kjer se komponente nanašajo na njegove linearno neodvisne osi. Iz tega tudi izhaja 24-bitna globina barv, saj je na vsaki osi možno 256 intenzitet določene komponente. Ker je model kocka, je potem možno število barv 256×256×256 kar znese 16777216 barv (16M = 16 × 1024 × 1024) ali 224. Pomeni, da je pri maksimalni vrednost na osi R (255) in ob vrednostih ostalih komponent postavljenih na 0, barva čista rdeča. Ob manjšanju intenzitete rdeče konponente, gre barva vedno bolj proti črni, torej izgublja na svetlosti. In tu se pojavi vprašanje, zakaj ne opisovati barve z njihovim osnovnim odtenkom, svetlostjo in sivino.

Poznana sta še dva modela, ki pa ne podajata barv glede na njihovo sestavo po osnovnih barvnih komponentah, ampak glede na njihovo intenziteto, svetlost in tipično značilnost, ki ločuje posamezno barvo od druge. Ta dva modela uporabljata polarni koordinatni sistem, njuni kratici pa sta HSV in HLS. Prva pomeni Hue - Saturation - Value drugi pa Hue - Lightness - Saturation. Že po imenu se torej ne razlikujeta veliko, saj sta v obeh primerih značilnosti Hue in Saturation enakega pomena.

HSV uporablja za svoj barvni model enojno pokončno enakostranično šestrobo piramido. Koordinatni sistem je kot rečeno polarni in ima tele komponente:
- Saturation kot radij
- Hue kot kôt in
- Value kot višino.
Prvi, ki je zasnoval podoben sistem, je bil leta 1905 Munsell, ki je uporabil spremenljivke hue, chroma in value. Po njegovi definiciji chroma pomeni enako kot saturation danes, definicije posameznih spremenljivk, pa je podal na takšen način:

Prvi je HSV model predlagal Smith. Nanašal se je na to kako umetnik meša svoje barve z dodajanjem bele ali črne barve. H pravzaprav pomeni izbira barve. Z zmanjševanjem S se dodaja bela barva, kar pomeni da barva izgublja na intenzivnosti. Zmanjševanje V pa ustreza dodajanju črne. In prav tako se barve obnašajo v HSV piramidi, katere skelet kaže slika 1.

Slika 1: Skelet HSV barvnega modela

Kot je videti, se v ogliščih pojavljajo enake barve kot pri kartezičnem sistemu, kot sta RGB oz. CMY. Torej imamo v ogliščih povrsti rdečo, rumeno, zeleno, svetlo modro, modro in vijolično, s tem da se črna nahaja v vrhu piramide, bela pa v središču osnovne ploskve. To navaja, da se transformacija iz kartezičnega načina predstave barv opravi z preslikavo treh kockinih ploskev, ki bi jih videli, če bi pogledali vzporedno z diagonalo v oglišče z belo točko, v osnovno ploskev piramide. In prav tako poteka tudi numerična transformacija iz RGB prostora v HSV, ki je podana v referencah.

HLS barvni model

Zelo soroden HSV modelu je HLS model. Bazira na Ostwaldovem barvnem sistemu, uporablja pa ga proizvajalec strojne opreme Tektronix. Lahko ga vidimo kot deformacijo HSV z osjo V razpotegnjeno, tako da nastane dvojna šeststrana piramida. Sicer Tektronix uporablja dvojni model stožca, vendar sta Foley in Van Dam uporabila dvojno piramido zaradi združljivosti s HSV.

Slika 2: Skelet HLS barvnega modela

Centralna os se imenuje L (lightness), hue je še vedno kot okoli piramide. Bela točka ima sedaj enak geometrični položaj kot črna, saj je samostojna. Prav zaradi tega je ta model bolj zadovoljujoč od HSV. Na sliki 4 so prikazani trije prerezi z ravninami skozi os L in sicer v intervalih po 60°, slika 3 pa kaže ravnine prerezov. Enako bo v nadaljevanju prikazal tudi program v JavaScriptu.

Slika 3: Ravnine prerezov skozi os L

Slika 4: Prerezi skozi os L

Definicija naloge

Izris barvnega modela Hue - Lightness - Saturation s presekom ravnine. Imamo dva možna preseka: stranski ris in tloris. Uporabnik naj izbere pogled in parametre.

Rešitev naloge - o programu

Program je napisan v JavaScriptu® in uporablja javin applet raster.jar za rastrski izris na zaslon. Na zaslonu pa se lahko barve izriše samo s pomočjo podajanja komponent RGB za vsako točko (pixel) izrisa. Potrebna je torej pretvorba iz HLS prostora v RGB prostor. To pretvorbo opravlja v programu funkcija hls2rgb, ki jo potem kliče glavni program. V referencah je podana takšna procedura v pascalu, ki jo za boljše razumevanje njenega delovanja tukaj podajam.

procedure HLS2RGB(H,L,S:Real;var R,G,B,int);
 function RGBx(q1,q2,hue:real):real;
    begin
      if hue>360 then hue:=hue-360;
      if hue<0 then hue:=hue+360;
      if hue<60 then RGBx:=q1+(q2-q1)*hue/60
      else if hue<180 then RGBx:=q2
         else if hue<240 then RGBx:=q1+(q2-q1)*(240-hue)/60
          else RGBx:=q1;
 end;
  var p1,p2,r1,g1,b1:real;
   begin
      if L<=0.5 then p2:=L*(1+S)
      else p2:=L+S-L*S;
      p1:=2*L-p2;
      if S=0 then
         begin
          r1:=L; g1:=L; b1:=L;
         end
      else
         begin
          r1:=RGBx(p1,p2,H+120);
          g1:=RGBx(p1,p2,H);
          b1:=RGBx(p1,p2,H-120);
         end;
  r:=trunc(r1*255);
  g:=trunc(g1*255);
  b:=trunc(b1*255);
end;

Glavni program starta risanje najprej prereza skozi osnovo ploskev dvostrane piramide. Le-ta je v obliki šestkotnika s premerom včrtanega kroga 200 pikslov, kar pomeni da riše program iz središča ploskve v y smeri 100 pikslov navzdol in 100 pikslov navzgor, medtem ko x teče 115 pikslov v levo in 115 pikslov v desno. Območje je omejeno s štirimi enačbami premic, ki tečejo ob poševnih robov šestkotnika. Za točko, ki pade v prejšnje pogoje, se izračuna vrednost hue, ki je kot med koordinatama x in y, vrednost saturation pa je normirana vrednost oddaljenosti piksla od izhodišča izbranega koordinatnega sistema. Potem se regenerira piksel z barvo RGB, ki jo določi funkcija hls2rgb. Izris in regeneracijo točke pa izvajata funkciji, ki sta del appleta raster.jar in to sta set_pixel(int x, int y, int red, int green, int blue) in pixel_update(). Izrisana je torej ploskev s konstantnim L.

Po izrisu tega dela, pa se starta risanje prereza, ki si ga lahko izberemo z radio buttonom pod oknom rastrskega appleta. Brez predizbire, bo izrisan prerez predstavil ravnino prereza skozi oglišči z rdečo in svetlo modro barvo. Pomeni, da je na eni strani konstanten hue z vrednostjo 0, na levi strani pa konstanten hue z vrednostjo 180°. Ostane samo še izračun vrednosti za točke, ki ležijo nad premico y = x/2. X in y seveda tečeta v intervalih x = (0,115), y = (0,58), saj se lahko izračunavajo vrednosti L in S samo za eno četrtino končnega izrisa. Za zgornjo četrtino so nove vrednosti lightness le l1 = 1 - l, za levo četrtino pa se le poveča vrednost hue za 180°; h1 = h + 180. Vrednost S teče vedno za vse štiri ploskve na enak način, tako da sledi normirani koordinati x. Pomeni da se hkrati sedaj izrisujejo štirje piksli, namesto da bi v pogoje izrisovanja vključili celoten prerez. S spremembo radio buttona se spremeni le vrednost hue za 60°.

Pod tem oknom izrisa, se nahaja še eno okno, ki izrisuje plašč HLS modela in sicer se izrišeta tloris (pogled od zgoraj) in izbrani stranski ris. Za izris tlorisa se za pretvorbo v RGB komonente uporabi funkcija hsv2rgb, iz enostavnega razloga ohranjanja izračuna koordinat iz prejšnjega okna, s to razliko, da je sedaj konstatna vrednost V, ki je 1, saj gre v bistvu za izris osnovne ploskve HSV barvnega modela. Stranski ris mora risati šest ploskvic, kjer se spet izračunajo najprej vrednosti H, L, S za najbližjo spodnjo ploskvico, transformacija ostalih koordinat, pa poteka po podobnem postopku opisanem za gornji primer.

Za zadnji primer (plašč) obstaja tudi source in aplikacija Win_32 narejena v Delphi-ju 4.0, katera si lahko snamete s strežnika.
Download.

Ogled delovanja programa

Zaključek

Pisanje programa v JavaScriptu ni težko delo, vendar bi rad poudaril, da začetnik nima toliko izkušenj, da bi samo kodo pripeljal do optimuma, kar bi izkušenejši kolegi znali. Sam sem se lotil programiranja povsem začetniško, kar je verjetno vzrok za tako počasno delovanje samega izrisa. Za tiste, ki bi radi kaj več izvedeli o RGB barvnem modelu, pa ste vabljeni k ogledu poročila kolega.

Literatura

Alan Watt
Fundamentals of Three-Dimensional Computer Graphics
Addison-Wesley Publishing Company, 1989
Avtor:
Aljoša Kos © 2000