Skolekoding.no > Tekstkoding > p5.js > Kurs > 3. Farger

---

3.1 Strektykkelse

Tykkelsen på streken som omgir figurer er som standard ett punkt. For å endre strektykkelsen bruker vi strokeWeight();

strokeWeight(5); gjør omrisset fem punkter bredt. 
Hvis vi ikke vil ha noe omriss bruker vi noStroke();

Skriv dette i editoren:

• ​function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • stroke(0);
  • strokeWeight(1);
  • ellipse(100, 100, 40, 40);
  • strokeWeight(5);
  • ellipse(150, 100, 40, 40); 
  • ellipse(200, 100, 40, 40); 
  • noStroke();
  • ellipse(250, 100, 40, 40); 
  • ellipse(300, 100, 40, 40);
• }

---

3.2 Svart/hvitt

Vi angir gråtone ved å bruke fill(). Mellom parentesene har vi 256 valg. Vi setter et tall fra og med 0 til og med 255. 0 er svart. 255 er hvit. Alle tall i mellom gir gråtoner. Historien om 256 (256 = 2⁸).

Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(220);
  • fill(150);
  • ellipse(100, 100, 40, 40);
  • fill(200);
  • ellipse(200, 100, 40, 40);
  • fill(255);
  • ellipse(300, 100, 40, 40);
• }

---

​3.3 RGB

For å få farger må vi bruke tre tall i fill(), ett tall for rødt, ett for grønt og ett for blått: fill(R,G,B). Alle tallene skal være mellom 0 og 255.

fill(255, 0, 0); // Helt rødt

For å finne den rette fargekoden kan du søke på nettet etter «color selector rgb».

Hvorfor rødt, grønt og blått?
Blanding av farget lys er annerledes enn blanding av malingsfarge. Lysblanding fungerer addivit, malingsblanding fungerer subtraktivt. Ved malingsblanding tar vi bort de fargene som ikke skal synes, de absorberes. Bare den fargen som skal synes reflekteres tilbake til oss. Ved lysblanding treffer fargen oss direkte, vi legger vi til farge for å få den fargen vi ønsker.

---

3.4 Oppgaver

A) Lag en ny skisse.
Tegn tre sirkler. En rød, en grønn og en blå.
​
B) Hent fram skissen av snømannen. Sett farge på snømannen.

---

​ 3.5 Gjennomskinnelig

Hvis vi legger til en fjerde parameter i fill(); kan vi justere gjennomskinneligheten. 

0 usynlig (totalt gjennomskinnelig).
255 full farge (fullstendig tett).

Bruker vi gråskala, får vi gjennomskinnnelighet med én ekstra parameter: fill(150, 100); gir mørkegrå og gjennomsiktig.

Skriv dette i editoren:

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • background(255);
  • noStroke();
  • fill(255, 0, 0, 100);
  • ellipse(100, 200, 200, 100);
  • fill(0, 255, 0, 100);
  • ellipse(200, 200, 200, 100);
  • fill(0, 0, 255, 100);
  • ellipse(300, 200, 200, 100);
• }

---

3.6 HSB

Vi kan angi farge på en annen måte enn med RGB. I stedet for rød, grønn og blå, kan vi bruke fargetone (Hue), fargemetning (Saturation) og lyshet (Brightness).

En av fordelene med denne metoden er at fargen  er representert med kun ett tall: Fargetonen. De andre tallene justerer fargen.

Fargetonen er nemlig det vi oppfatter som fargen, og maksimal metning og lyshet gir den sterkeste og klareste fargen.

For å bruke HSB-systemet må vi skrive colorMode(HSB); i starten av programmet. Også her er det standard å bruke verdier fra 0 til 255.

• colorMode(HSB);
• fill(255, 255, 255);

Dette gir fargen rød med maksimal metning og lyshet.

For at det skal være enklere for oss å bruke HSB-systemet, justerer vi gjerne maks-verdiene til mer intuitive verdier. Dette gjøres ved å legge til tre nye parametere i colorMode().

• colorMode(HSB, 360, 100, 100);

Nå kan fargetonen angis som et tall mellom 0 og 360 (som gradtallet i en sirkel). Metning og lyshet har maksverdi på 100, (tilsvarende 100%).

Skriv dette i editoren.

• function setup() {
  • createCanvas(400, 400);
• }
• function draw() {
  • colorMode(HSB, 360, 100, 100);
  • fill(0, 100, 100); rect(0, 0, 50, height);  // rød
  • fill(60, 100, 100); rect(50, 0, 50, height);  // gul
  • fill(120, 100, 100); rect(100, 0, 50, height); // grønn
  • fill(180, 100, 100); rect(150, 0, 50, height); // cyan
  • fill(240, 100 ,100); rect(200, 0, 50, height); // blå
  • fill(300, 100, 100); rect(250, 0, 50, height); // ​magenta
  • fill(360, 100, 100); rect(300, 0, 50, height); // rød
• }

---

3.7 Oppgaver

A) Lag en ny skisse.
Tegn tre overlappende tektangler. Sett ulik farge på ved å bruke  fil(); Ta med gjennomskinnelighet.
​
B) Bruk samme skisse. Endre fargesystem til HSB. Sett maksverdier til 360, 100, 100, 100.
Sett metning og lyshet til 100. Endre fargetone. Endre så metning og lyshet.
– Hva skjer om metning er null og lyshet er 100?
– Hva skjer om lysheten er null?