Differences
This shows you the differences between two versions of the page.
|
de:p5:basics:lesson1 [2009/04/01 22:20] steffen changed structure |
de:p5:basics:lesson1 [2009/04/06 12:50] (current) steffen |
||
|---|---|---|---|
| Line 64: | Line 64: | ||
| quad (12, 19, 31, 85, 67, 74, 80, 19); | quad (12, 19, 31, 85, 67, 74, 80, 19); | ||
| </code> | </code> | ||
| - | |||
| ===== Farben verwenden ===== | ===== Farben verwenden ===== | ||
| + | {{ :b01_rgb_system.jpg}} | ||
| Standardmäßig arbeitet Processing mit dem [[http://de.wikipedia.org/wiki/RGB-Farbraum#RGBA-Farbmodell|RGBA-Farbraum]] (Rot, Grün, Blau, Alpha). Für jeden der sogenannten Kanäle steht ein Wertebereich von 256 Einheiten, beginnend bei 0, zur Verfügung um das Mischverhältnis zu bestimmen ([[http://de.wikipedia.org/wiki/Additive_Farbsynthese|additive Farbmischung]]). Ein Anteil von 0 bedeutet, daß kein Teil dieses Kanals in die Farbmischung eingeht – mit 255 der komplette Kanal.\\ | Standardmäßig arbeitet Processing mit dem [[http://de.wikipedia.org/wiki/RGB-Farbraum#RGBA-Farbmodell|RGBA-Farbraum]] (Rot, Grün, Blau, Alpha). Für jeden der sogenannten Kanäle steht ein Wertebereich von 256 Einheiten, beginnend bei 0, zur Verfügung um das Mischverhältnis zu bestimmen ([[http://de.wikipedia.org/wiki/Additive_Farbsynthese|additive Farbmischung]]). Ein Anteil von 0 bedeutet, daß kein Teil dieses Kanals in die Farbmischung eingeht – mit 255 der komplette Kanal.\\ | ||
| Drei Befehlen bietet Processing um Farben für unterschiedliche Eigenschaften/Bereiche festzulegen: //background()// für das einfärben der gesamten Zeichenfläche, //fill()// für die Füllfarbe und //stroke()// für die Umrandung von visuellen Elemente. | Drei Befehlen bietet Processing um Farben für unterschiedliche Eigenschaften/Bereiche festzulegen: //background()// für das einfärben der gesamten Zeichenfläche, //fill()// für die Füllfarbe und //stroke()// für die Umrandung von visuellen Elemente. | ||
| + | |||
| ==== Hintergrund einfärben ==== | ==== Hintergrund einfärben ==== | ||
| Processing färbt ohne unser Zutun den Hintergrund des Sketchfensters grau ein. Wenn wir die Fläche leeren wollten, sie mit einem Farbton füllen, müssten wir ein Rechteck im Fensterformat zeichnen. Diese Funktionalität bietet uns ebenfalls der Befehl //background()//. Ausgestattet mit Informationen über die Anteiligkeit der Farbkanäle überschreibt er den momentanen Inhalt der Zeichfläche (ohne das wie bei //rect()// Position oder Größe angegeben werden muss). | Processing färbt ohne unser Zutun den Hintergrund des Sketchfensters grau ein. Wenn wir die Fläche leeren wollten, sie mit einem Farbton füllen, müssten wir ein Rechteck im Fensterformat zeichnen. Diese Funktionalität bietet uns ebenfalls der Befehl //background()//. Ausgestattet mit Informationen über die Anteiligkeit der Farbkanäle überschreibt er den momentanen Inhalt der Zeichfläche (ohne das wie bei //rect()// Position oder Größe angegeben werden muss). | ||
| Line 91: | Line 92: | ||
| noStroke (); | noStroke (); | ||
| </code> | </code> | ||
| - | === Graustufen === | + | ==== Graustufen ==== |
| + | {{ :b01_grey.jpg}} | ||
| + | Im [[http://de.wikipedia.org/wiki/RGB-Farbraum|RGB Farbraum]] mischen sich Graustufen aus gleichen Anteilen der drei Kanäle Rot, Grün und Blau. Durch die [[http://de.wikipedia.org/wiki/Additive_Farbsynthese|additive]] Zusammensetzung erhält man bei drei vollen Teilen die Farbe weiß, bei keinen Angaben für R,G,B schwarz. Processing bietet für diesen Fall eine Kurzschreibweise für die Festlegung von Füll- und Strichfarben. Statt drei gleicher Werte wird nur eine Wert zwischen den runden Klammern genannt. Die Zeile //fill(38, 38, 38);// hat die gleiche Aufgabe wie //fill(38);//. | ||
| + | <code> | ||
| + | background (110); // grau | ||
| + | fill (0); // schwarz | ||
| + | stroke (255); // weiß | ||
| + | </code> | ||
| + | Neben dem Grauwert kann als zweiter Wert die Transparenz für den Grauton angageben werden, ebenfalls von 0 bis 255. | ||
| + | <code> | ||
| + | background (110); // grau | ||
| + | fill (0, 90); // schwarz, transparent | ||
| + | stroke (255, 200); // weiß, transparent | ||
| + | </code> | ||
| + | |||
| + | Aufrufe von //fill()// und //stroke()// lassen sich wie folgt lesen: | ||
| + | * **1 Wert** Grauton, deckend | ||
| + | * **2 Werte** Grauton, mit Transparenzangabe | ||
| + | * **3 Werte** RGB Farbtonangabe, deckend | ||
| + | * **4 Werte** RGB Farbtonangabe, mit Transparenzangabe | ||
| ===== Zeichenreihenfolge ===== | ===== Zeichenreihenfolge ===== | ||