Farbe


Processing 2.0

Hier kommt bei Processing, wie bei vielen anderen Programmen zunächst das sog. RGB-Modell zum Einsatz. D.h. jede Farbe wird aus einem Rot-, Grün- und Blauwert zwischen 0 und 255 definiert. Konkret wird dann aus einer Mischung aller Farben mit der maximalen Intensität (255,255,255) –> Weiß und (0,0,0) ergibt Schwarz.

Wenn man alle drei Farben zu gleichen Teilen mischt, ist das Ergebnis immer ein Grauton. Seine Intensität ergibt sich aus der Intensitäten der Einzelfarben.

Mit den Funktionen

background(r,g,b);
fill(r,g,b);
fill(r,g,b,alpha);
stroke(r,g,b); und
stroke(r,g,b,alpha);

kann man die Eigenschaften der Elemente am Schirm definieren. Alpha definiert die Deckkraft eines Objekts (0…durchsichtig bis 255…volle Deckung).

Processing bringt im Menü unter Tools auch den Color Selector mit dem man Farben auswählen und dann deren RGB- und HSB- Werte ablesen kann.

Beispiel: starte Applet

Bewege deine Maus über die Animation und bestimme damit die Deckkraft der Farbkreise.

void setup()
{
size(300, 300);
noStroke();
}

void draw()
{
background(200);
fill(255,0,0,mouseX*2);
ellipse(150,100,150,150);
fill(0,255,0,mouseX*2);
ellipse(100,170,150,150);
fill(0,0,255,mouseX*2);
ellipse(180,170,150,150);
}

Beispiel: starte Applet

void setup() {
size(300, 300);
}

void draw() {
background(262, 202, 49);
for (int i=0; i<300; i++) {
stroke(0, 0, 255, i-(100));
line(i, 0, i, 300);
}
}

Aufgabe: Verändere den Code des letzten Beispiels so, dass sich der Übergang je nach Mausposition nach links und recht verschieben lässt.

Um den Umgang mit Farben noch etwas einfacher zu gestalten, kann man in Processing auf einen eigenen Datentyp, nämlich color() zugreifen. Damit kann man Farben, die man öfters verwendet Namen zuordnen. Die Farbdefinition funktioniert, wie sonst auch, als Grauwert oder RGB, mit oder ohne alpha-Wert.

Beispiel: starte Applet

Die Farbe des Rechtecks ändert sich je nach Mausposition von einer vorher definierten Farbe grün zu blau.

void setup() {
size(300, 300);
}

void draw() {
background(255,188,3);
color blue=color(3,206,255);
color green = color(195,255,3);
if (mouseX<150){
fill(blue);
} else {
fill(green);
}
rect(50,50,100,100);
}

Neben dem Standard-Farbmodell RGB kann man in Processing auch das HSB-Modell anwenden. Hier wird eine Farbe mit der Angabe des Farbtons (hue), der Farbintensität (straturation) und der Helligkeit (brightness) angegeben. Mit der Funktion colorMode(mode) kann man das Fabmodell wählen. Mode kann somit für RGB oder HSB stehen.

Beispiel: starte Applet

int a=1;
int c=1;

void setup(){
size(300, 300);
colorMode(HSB);
}

void draw(){
a++;
for(int i=0; i<width; i++){
c=(a+i)%255;
stroke(c,255,255);
line(i,0,i,300);
}
}

Aufgabe: Gestalte das Spiel Ping Pong farbig.

Advertisements

Ein Kommentar

  1. Pingback: Processing – Über dieses Weblog « processing – tutorial

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: