Farger i Processing | skolekoding.no

Fritt etter «Color» av Daniel Shiffman: https://processing.org/tutorials/color/

1. Farger i den digitale verden

Når vi ønsker å snakke om farger i den digitale verden er det nødvendig å være presis. Det holder ikke å si: «Hei, kan du lage den sirkelen blågrønn?» Farge blir i stedet definert ved hjelp av en rekke med tall. La oss starte med det enkleste tilfellet: svart/hvitt (eller gråtoner). 0 betyr svart, 255 betyr hvitt. I mellom disse ytterpunktene vil ethvert tall – 50 – 87 – 162 – 209, osv – bety én spesiell gråtone mellom svart og hvit.

Hvorfor et tall mellom 0 og 255 tenker du kanskje?
Fargen til en gitt figur må lagres i maskinens minne. Dette minnet er ikke annet enn en lang rekke av nuller og enere (en hel masse av- og på-knapper). Hver eneste av disse bryterne er en bit (engelsk: uttales bitt). Åtte bit blir tilsammen en byte. Tenk deg at vi har åtte bits (en byte) i en rekke – hvor mange ulike kombinasjoner av «av» og «på» er det mulig å få i denne rekka? Svaret er 256 ulike kombinasjoner. For første bit er det to muligheter, av og på. For andre bit er det også to muligheter. For hver av de to mulighetene hos bit nr 1 er det to muligheter hos bit nr 2. Hvis rekka bare besto av to bit, ville antall kombinasjoner vært
2 x 2 = 4
eller
2²=4
Hvis rekka hadde tre bit ville antall kombinasjoner vært
2 x 2 x 2 = 2³ = 8
Denne rekka har åtte bit. Da blir antall kombinasjoner
2⁸ = 256
Vi kan derfor bruke tallene fra og med 0 til og med 255.
For gråtoner bruker vi åtte bit. For fullfarge bruker vi åtte bit for hver av fargene rød, grønn og blå, tilsammen 24 bit. Legger vi på alfaverdi (se nedenfor) bruker vi enda åtte bit, tilsammen 32 bit.

2. Strekfarge, fyllfarge og bakgrunnsfarge

Vi kan bestemme fargen til en figur hvis vi legger til stroke() og fill() før vi tegner figuren. Vi har også funksjonen background(), som setter bakgrunnsfargen på lerretet. Her er et eksempel:

size(200, 200);
background(255); _{// Setter bakgrunnen til hvit}
stroke(0); _{// Svart omriss}
fill(150); _{// Grå fyllfarge}
rect(50,50,75,100);_{// Tegner et rektangel}

Virkningen av stroke() og fill() kan oppheves ved å bruke noStroke() og noFill(). Instinktivt vil vi kanskje oppfatte at «stroke(0)» betyr «ingen strek», men det betyr altså «svart strek».

En ting til: pass på at du ikke opphever begge – med både noStroke() og noFill(), er det ingenting som vises!

Hvis vi tegner to figurer vil Processing bruke den farge- eller strek-funksjonen som ble brukt sist. Processing leser koden vår ovenfra og ned. Se eksempelet nedenfor.

stroke(0) gir strekfargen til line(0, 0, 100, 100). Deretter gis en ny stroke() og en noFill() som bestemmer utseendet på rektangelet som kommer under.

3. RGB-farger

Husker du maling med vannfarger? Ved å blande tre «primærfarger», kunne du få en hvilken som helst farge. Hvis du smurte alle fargene sammen fikk du en skitten brunfarge. Jo mer farge du la på, jo mørkere ble det.

Digitale farger blir også til ved å blande tre primærfarger, men det fungerer annerledes enn for maling.

For det første er det ikke de same primærfargene. For datamaskinen er primærfargene rød, grønn og blå (derfor RGB – red, green, blue). For det andtre blir blandingen annerledes. På skjermen blander du nemlig lys, ikke maling. Les mer på Kodeklubbens oppgaveside.

Rød + Grønn = Gul
Rød + Blå = Magenta
Grønn + Blå = Cyan
Rød + Grønn + Blå = Hvit
Ingen farger = Svart

Dette forutsetter at fagene er så klare som mulig. Du kan selvfølgelig få til en mengde ulike farger, slik at litt rødt, litt grønt pluss litt blått blir til grått. Litt rødt pluss litt blått blir til mørk fiolett.

Det kan ta litt tid å bli vant til fageblanding på denne måten, men jo mer du programmerer og eksperimenterer, jo mer instinktivt vil det bli. Du kan selvfølgelig ikke si: «Bland litt rød med litt blå», du må oppgi eksakt mengde.

På samme måte som for gråtone angis farge med et tall fra 0 til 255 (fra ingen farge til full farge). Rekkefølgen er R, G, B.

Processing har en fargevelger som kan være til hjelp. Du får tilgang til fargevelgeren via menylinjen: Tools > Color Selector

4. Gjennomskinnelighet (alfa-verdi)

I tillegg til verdiene for rød, grønn og blå, kan vi legge til en valgfri fjerde parameter. Denne kalles fargens alfa-verdi.

Alfa-verdien angir gjennomskinnelighet, og er spesielt nyttig når du vil tegne figurer som skal være delvis gjennomsiktige oppå andre figurer. Alle alfaverdiene for et bilde blir av og til betegnet samlet som «alfa-kanalen» for bildet.

Det er viktig å være klar over at punkter (pixler) ikke egentlig er gjennomsiktige. Dette er kun en illusjon som følger av fargeblandingen. Bak i kulissene tar Processing tallene for hver farge, trekker fra noen prosenter her, og legger til noen prosenter der. På den måten skapes en optisk virkning av fargeblanding.

Alfaverdiene går også fra 0 til 255. 0 betyr fullstendig gjennomsiktig og 255 betyr helt tett.

I eksemplet nedenfor tegnes først en svart bakgrunn. Deretter tegnes et blått rektangel på venstre halvpart av lerretet. Deretter tegnes fire vannrette rektangler med samme farge (kun rød), men med avtagende tetthet. Mellom hvert rektangel er det et lite mellomrom der bakgrunnen er helt sylig (de blå og svarte feltene)

size(200,200);
background(0); _{// Svart bakgrunn (synes igjennom i høyre halvdel og nedover)}
noStroke();
fill(0,0,255);
_{// Ikke noen fjerde parameter betyr helt tett farge}
rect(0,0,100,200); _{// Blått rektangel som dekker hele venstre halvpart av lerretet, overskrevet av de røde.}
_{// 255 som fjerde tall betyr også helt tett farge}
fill(255,0,0,255);
rect(0,0,200,40);_{// Øverste røde liggende rektangel.}
_{// 75% tett. 0,75 x 255 = 191,25}
fill(255,0,0,191);
rect(0,50,200,40); _{// Andre rektangel}
_{// 55% tett}
fill(255,0,0,127);
rect(0,100,200,40); _{// Tredje rektangel}
_{// 25% tett}
fill(255,0,0,63);
rect(0,150,200,40); _{// Nederste liggende røde rektangel, nesten helt gjennomsiktig}

5. Tilpassning av fargeskalaen – colorMode()

RGB-farger i intervallet 0-255 er ikke den eneste måten du kan behandle farger på i Processing. Bak i kulissene, i maskinens minne, behandles farger alltid som serier av 24 bits (eller 32 hvis vi tar med alfa-verdier). Processing lar oss imidlertid behandle farger på den måten vi foretrekker, for så å oversette våre tallverdier til verdier maskinen forstår. Det kan for eksempel hende du vil tenke på fargeverdier i et intervall fra 0 til 100 (som prosent). Du kan gjøre dette ved å bruke funksjonen colorMode().

colorMode(RGB, 100);

Funksjonen over sier: «OK, vi vil tenke på farge i form av rød, grønn og blå. Fargeverdiene skal kunne variere fra 0 til 100».

Selv om det neppe er aktuelt å gjøre det, kan du faktisk ha ulike intervaller for de ulike fargene.

colorMode(RGB, 100, 500, 10, 255);

Nå sier vi: «Rød skal kunne variere fra 0 til 100, grønn fra 0 til 500 og blå fra 0 til 10. Alfaverdien skal kunne variere fra 0 til 255.

Til slutt tar vi med at selv om du sannsynligvis bare trenger RGB-systemet, kan du også spesifisere farger i HSB-systemet (hue, saturation, brightness).

Hue – Tone (fargetypen), 0-255
Saturation – Metning, 0-255
Brightness – Lyshet, 0-255

Med colorMode() kan du selv bestemme intervallet tallverdiene skal holde seg innenfor på samme måte som beskrevet over. Noen foretrekker 0-360 for fargetonen (tenk på fargehjulet som er 360 grader), og 0-100 for metning og lyshet (tenk på 0-100%).

Les mer om farger på Kodeklubbens oppgaveside:
http://oppgaver.kidsakoder.no/processing/farger/farger.html

skolekoding.no
Stein Olav Kivle