Farver i Spil

Fra Holstebro HTX Wiki
Skift til: navigering, søgning
Programmets Farver

Eksemplet her tager udgangspunkt i Color Tutorial[1].

Den simple måde at angive farver på er et tal fra 0 til 255, der giver grå nuancer fra sort til hvid.

En anden simpel måde at angive farver på er ved RGB tal, hvor man angiver 3 tal fra 0 til 255, der angiver hvor meget af hver af farverne Rød Grøn og Blå der skal blandes sammen. Tallene angives som decimaltal med et komma imellem.

RGB kan også angives som man tit gør i HTML som 3 hexadecimale tal med # foran, fx #3366FF.

Programmet herunder viser forskellige farveangivelser.

Rundt om hver rektangel er der en kan (stroke) på 3 pixel, der har standardfarven sort.

void setup() {
  size(200, 400);
  strokeWeight(3);
}

void draw() {
  background(255);
  fill(0);
  rect(20, 10, 160, 20);
  fill(128);
  rect(20, 40, 160, 20);
  fill(240);
  rect(20, 70, 160, 20);
  fill(255, 0, 0);
  rect(20, 100, 160, 20);
  fill(0, 255, 0);
  rect(20, 130, 160, 20);
  fill(0, 0, 255);
  rect(20, 160, 160, 20);
  fill(#3399CC);
  rect(20, 190, 160, 20);
  fill(#003300);
  rect(20, 220, 160, 20);
  fill(#006600);
  rect(20, 250, 160, 20);
  fill(#009900);
  rect(20, 280, 160, 20);
  fill(#00CC00);
  rect(20, 310, 160, 20);
  fill(#00FF00);
  rect(20, 340, 160, 20);
  fill(#FFFF00);
  rect(20, 370, 160, 20);
}

Andre måder at angive farver på

Man kan også angive farver efter HSB (HueSaturationBrightness) princippet - se kilden nederst for nærmere gennemgang.

Der er også mulighed for at indstille hvad der er maks og min for områderne af farveangivelsen - se igen kilden

Gennemsigtighed

Gennemsigtige Farver

En sidste parameter man kan sætte på er gennemsigtighed i farven, så den kan blande med det der er under.

void setup() {
  size(200, 400);
  strokeWeight(3);
}

void draw() {
  background(255);
  fill(255, 0, 0);
  rect(20, 10, 160, 20);
  fill(0, 255, 0);
  rect(20, 40, 160, 20);
  fill(0, 0, 255);
  rect(20, 70, 160, 20);
  fill(#006600);
  rect(20, 100, 160, 20);
  fill(#009900);
  rect(20, 130, 160, 20);
  fill(#00CC00);
  rect(20, 160, 160, 20);

  fill(#FF0000, 40);
  rect(30, 0, 40, 190);
  fill(#FF0000, 128);
  rect(80, 0, 40, 190);
  fill(#FF0000, 210);
  rect(130, 0, 40, 190);
}

Referencer

  1. Color Tutorial på Processing.org