Letztes Update: 27.07.2017
Behandelte Befehle: setup, draw, frameRate, mouseX, mouseY, pmouseX, pmouseY, keyPressed, mousePressed, random, text, textAlign, textSize, colorMode

Lernziele

  • Interaktion mit der Maus programmieren
  • Auf Events wie Tastendruck reagieren
  • Zufallszahlen verwenden
  • Text im Grafikfenster ausgeben

Ein Programm wird normalerweise Zeile für Zeile abgearbeitet, aber in Processing gibt es noch einen Kniff, der es erlaubt, sehr bequem Animation und Interaktion einzubauen. Auf dieser Seite werden wir ersten Formen der Interaktion kennen lernen.

3.1 Statischer und aktiver Modus

Zunächst mal sollte man als Programmierer immer genau wissen, wie Processing den Code abarbeitet. Das schauen wir uns jetzt genauer an.

Video: Wie wird der Code abgearbeitet? (7:46)

Statischer Modus

In Processing können Sie einfach Befehle untereinander hinschreiben und das ganze starten. Processing arbeitet dann alles zeilenweise ab. Das nennt man den statischen Modus. Ein Beispiel für ein Programm im statischen Modus:

println("Hello, world!");
ellipse(50, 50, 40, 40);

Aktiver Modus

Sobald sich irgendetwas bewegen soll oder Sie gern Interaktion einbauen möchten, müssen Sie den aktiven Modus verwenden. Dazu schreiben Sie zunächst mal diese Codezeilen:

void setup()
{
   println("und");
}

void draw()
{
   println("hopp");
}

Diese Zeilen definieren zwei so genannte Funktionen: setup und draw. Sobald Processing mindestens eine davon sieht, schaltet es in den aktive Modus.

Sobald Sie entweder ein setup() oder ein draw() im Code haben, wird das Programm im aktiven Modus ausgeführt.

Was heißt hier aktiver Modus? Ganz einfach: Sie schreiben Ihren Code zwischen die geschweiften Klammern von jeweils setup und draw. Processing arbeitet dann Ihren Code in folgender Weise ab:

  1. zunächst alle Zeilen in setup
  2. dann alle Zeilen in draw
  3. dann alle Zeilen in draw
  4. dann alle Zeilen in draw
  5. usw.

Processing wiederholt also die Abarbeitung der draw-Zeilen und zwar so lange, bis Sie den Stop-Knopf drücken. Das ist es letztlich, was Animation und Interaktion möglich macht. Warum? Wenn Sie einen Kreis von links nach rechts wandern lassen möchten (Animation), dann tun Sie das, indem Sie den Kreis immer wieder zeichnen, jedes mal ein Stückchen weiter rechts. Das passiert dann eben in diesen draw-Zeilen. Ein Beispiel für Interaktion ist im Video zu sehen.

Code-Block

Der Teil, der von den geschweiften Klammern eingeschlossen wird, nennt man einen Code-Block. So ein Code-Block können Sie sich so vorstellen, dass die enthaltenen Zeilen zusammengepackt werden und wie eine Einheit "gesehen" werden. Alle Zeilen, die zum aktuellen Code-Block gehören, sind eingerückt, damit man den Code besser lesen kann.

void setup()
{  // hier beginnt der Code-Block
   println("wir"); // alles eingerückt!
   println("sind");
   println("ein Block");
}  // hier endet er

Verwenden Sie die Auto Format Funktion (Menu Edit) von Processing häufig, dann werden die Zeilen automatisch korrekt eingerückt (Tastenkürzel STRG-T bzw. CMD-T).

Achten Sie immer darauf, dass Ihre Code-Blöcke richtig eingerückt sind. Wenn der Code komplexer wird, macht fehlerhafte Einrückung den Code teils unleserlich.

Frame Rate

Wie häufig wird draw abgespielt? Wir messen dazu, wie oft draw pro Sekunde aufgerufen wird. In Analogie zum Film und zur Animation spricht man hier von frame rate, ein Aufruf/Abspielen von draw entspricht also einem "frame". Es wird auch von den frames per second (fps) gesprochen, das ist synonym zu frame rate.

Von Haus aus versucht Processing, das draw 60 Mal pro Sekunde aufzurufen, d.h. frame rate = 60. Sie können das mit dem Befehl frameRate ändern. Der folgende Code schreibt ein Mal pro Sekunde etwas auf die Konsole:

void setup()
{
   frameRate(1);
   println("und");
}

void draw()
{
   println("hopp");
}

Bedenken Sie, dass es auch immer sein kann, dass der Rechner langsamer agiert, d.h. es kann immer sein, dass die tatsächlich erreichte frame rate niedriger ist, weil der Rechner ausgelastet ist und es schlichtweg nicht schafft, schneller zu arbeiten. Die angegebene frame rate ist also eine Obergrenze für die tatsächliche frame rate.

Mischen Impossible

Man darf aktiven und statischen Modus nicht mischen. Konkret heißt das: sobald eines der beiden Konstrukte (setup oder draw) hingeschrieben sind, darf man keine Befehle außerhalb von setup und draw hinschreiben. Das hier z.B. funktioniert nicht:

// aktiver Modus?
void setup()
{
   println("so geht das");
}

println("eher nicht"); // statischer Modus!

Stattdessen schreiben Sie Ihren Code entweder im statischen Modus:

println("so geht das");
println("richtig!");

Oder im aktiven Modus, wo nur ein setup() steht. Auch hier wird der Code nur einmal ausgeführt:

void setup()
{
   println("so geht das");
   println("richtig!");
}

Übungsaufgaben

(a) Zeitmuster

Schreiben Sie ein Programm, dass folgende Ausgabe auf der Konsole erzeugt. Dabei sollen auf der zweiten Zeile die Zeichen im Halb-Sekunden-Takt erscheinen.

Start
Tick.Tick.Tick.Tick.
      
Tipp
Verwenden Sie println() und print(). Beachten Sie den Unterschied zwischen den zwei Befehlen. Verwenden Sie frameRate(), um die Taktung richtig einzustellen.

Zusammenfassung

  • Statischer Modus: Code wird zeilenweise von oben nach unten abgearbeitet. Ist die letzte Zeile verarbeitet, ist das Programm zu Ende.
  • Aktiver Modus: Sobald Sie eines der Konstrukte setup() oder draw() hinzufügen, startet Processing das Programm im aktiven Modus. Das bedeutet, dass zunächst der Code in setup() 1x abgearbeitet wird (von oben nach unten). Dann wird der Code in draw() immer wieder abgearbeitet, auch jeweils von oben nach unten. Die Häufigkeit, mit der draw() pro Sekunde durchlaufen wird, nennt man Frame Rate und lässt sich mit dem Befehl frameRate() ändern.
  • Modus nicht mischen: Wenn Sie den aktiven Modus anstreben, darf außerhalb der Code-Blöcke von setup() und draw() kein Code stehen.

3.2 Interaktion mit der Maus

Interaktion bedeutet, dass der Benutzer während des Programmlaufs - also nach dem Drücken von START und vor dem Drücken von STOP - einen Einfluss auf das Programm nehmen kann. Das passiert über Eingabegeräte, also Tastatur und Maus, später vielleicht auch über Sprache, Kamera, Spielecontroller und andere Sensorik (Kinect, Wiimote etc.). In diesem Abschnitt beschäftigen wir uns mit der Maus.

Processing ist so freundlich, uns zwei Platzhalter zur Verfügung zu stellen, die immer durch die aktuellen Mausposition (x und y) ersetzt werden. Dieses Konzept nennt man Variablen, das lernen Sie im nächsten Kapitel richtig kennen. Jetzt müssen Sie nur wissen, dass die Wörter mouseX und mouseY im Code immer durch die Mausposition ersetzt werden. So wie hier:

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

void draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

Sie sehen, dass der Kreis immer der Maus folgt.

Interaktives Feld:

Wenn wir die Illusion erwecken wollen, dass der Kreis sich bewegt und nicht immer neu gezeichnet wird, müssen wir den Hintergrund immer neu befüllen und somit den "alten" Kreis (aus dem vorigen draw()- Aufruf) übermalen.

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

void draw() {
  background(200); // Bild löschen durch Übermalen
  ellipse(mouseX, mouseY, 20, 20);
}

Jetzt sehen wir immer nur einen Kreis:

Interaktives Feld:

Jetzt malen wir nur Punkte, ohne das Bild zu löschen:

void setup() {
  strokeWeight(2);
}

void draw() {
  point(mouseX, mouseY);
}

Interaktives Feld:

Wenn wir statt Punkten Linien zeichnen wollen, damit keine Lücken entstehen, brauchen wir noch mehr Infos, nämlich die Mausposition aus der jeweils vorigen draw()-Runde. Die stellt uns Processing netterweise auch zur Verfügung und zwar mit pmouseX und pmouseY .

void setup() {
  strokeWeight(2);
}

void draw() {
  line(pmouseX, pmouseY, mouseX, mouseY);
}

Interaktives Feld:

Diese Art der Interaktion ist "kontinuierlich", da Ihr Programm im Grund ständig auf Ihren Input reagiert. Eine zeitlich punktuelle Art der Interaktion lernen Sie im nächsten Abschnitt kennen.

Übungsaufgaben

(0) Mauskoordinaten

Schreiben Sie ein Programm, dass ständig die aktuelle x-Koordinate der Maus auf der Konsole ausgibt. Das sieht z.B. so aus:

69
71
72
72
72

(a) Interaktive Linie

Programmieren Sie eine Linie, deren eines Ende der Maus folgt.

(b) Rechteck-Quiz

Welchem Prinzip folgt das Quadrat in dem interaktiven Feld:

Finden es heraus und programmieren Sie es nach.

(c) Fadenkreuz

Zeichnen Sie zwei Linien, die parallel zur x- bzw. y-Achse sind und immer der Maus folgen. Der Schnittpunkt liegt genau auf dem Mauszeiger.

Programmieren Sie zunächst eine der beiden Linien, dann wird es Ihnen leicht fallen, die zweite hinzuzufügen.

(d) Linie und Kreis

Zeichnen Sie eine Linie, die parallel zur y-Achse verläuft und immer der Maus folgt. Im Bereich zwischen der Linie und dem linken Rand soll mittig ein Kreis gezeichnet werden, der links und rechts genau anstößt.

(e) Radiergummi

Schreiben Sie ein Programm, wo ein schwarzes Quadrat in der Mitte steht und die Maus als Radiergummi (Durchmesser 15) fungiert.

(f) Symmetrische Linie

Programmieren Sie eine Linie, deren eines Ende der Maus folgt, das andere Ende liegt immer punktgespiegelt auf der anderen Seite des Mittelpunkts.

Tipp
Sie benötigen nur einen einzigen line()-Befehl. Welches ist der richtige Startpunkt?

(g) Rechteck-Ecke

Zeichnen Sie ein Rechteck in die Mitte des Fensters, wo immer eine Ecke der Maus folgt.

Tipp
Überlegen Sie, welcher Zeichenmodus für Rechtecke hier am besten geeignet ist (es ist nicht CENTER).

(h) Kreisrand *

Programmieren Sie einen Kreis, dessen Mittelpunkt links oben (bei 0, 0) sitzt und dessen Rand immer auf dem Mauszeiger liegt.

Tipp

Verwenden Sie den Satz von Pythagoras. Verdeutlichen Sie sich mit Hilfe einer Zeichnung, wo der Kreis ist, welche Informationen Sie haben (Mausposition) und welche Information Sie berechnen müssen.

Die Wurzel ziehen Sie mit dem Befehl sqrt(), engl. für square root.

(i) Position zu Graustufe

Ein mittig positioniertes Quadrat soll seinen Grauwert ändern, je nachdem, wo sich die Maus befindet. Ist die Maus ganz links, ist das Quadrat schwarz. Ist sie recht, wird das Quadrat weiß.

Hinweis: Bei einer Division mit einer ganzen Zahl (z.B. 10) müssen Sie 10.0 schreiben, um zu signalisieren, dass das Ergebnis eine Kommazahl sein soll (sonst wird das Ergebnis zu einer ganzen Zahl gerundet).

Tipp
Der Grauwert muss in einem Bereich von 0 bis 255 liegen. In welchem Bereich liegt der Wert der Maus-Position? Um die Position auf den Grauwert zu übertragen (man spricht hier auch von Mapping), benötigen Sie den Dreisatz.

Zusammenfassung

Die aktuelle Mausposition steht, sofern die Maus sich über dem Grafikfenster befindet in den Variablen mouseX und mouseY.

Man muss sich vorstellen, dass die beiden Wörter in dem Moment, wo die Code-Zeile verarbeitet wird, durch den aktuellen Zahlenwert ersetzt werden.

Die beiden Variablen erlauben es, interaktive Zeichnungen zu programmieren, wo die Mausposition beispielsweise zur Bestimmung von Position, Größe oder Farbe eingesetzt wird.

3.3 Interaktion mit Tasten

Die beiden Konstrukte setup() und draw() sind ganz praktisch. Sie erlauben mir, jeweils ein Stückchen Code zu formulieren, der unter bestimmten Bedingungen ausgeführt werden soll: Der Code in setup nur ganz am Anfang, der Code in draw immer wieder.

Wie reagieren wir auf den Druck einer Taste der Tastatur oder der Maustaste? Processing erlaubt Ihnen dazu, folgendes in Ihren Code zu schreiben (wir haben draw() hinzugefügt, damit wir im aktiven Modus sind):

    void draw() {} // nichts tun

    // Auf Taste reagieren (egal welche)
    void keyPressed() 
    {
       background(0);
    }
    

Der Teil "void keyPressed() ..." sieht so ähnlich aus wie setup() und draw(). Es handelt sich ebenfalls um eine Funktion. Auch hier wird wieder ein Code-Block definiert. Dieser Code-Block wird jedesmal aufgerufen, wenn eine Tastatur-Taste gedrückt wird. Im Bespiel wir der Hintergrund auf schwarz gestellt.

Analog können Sie folgenden Code für die Maustaste einbauen. Fügen Sie dazu folgendes hinzu:

    void mousePressed() 
    {
       background(255, 0, 0);
    }
    

Der Bespielcode stellt den Hintergrund auf rot, wenn die Maus gedrückt wird.

Diese beiden "Ereignisse", also dass eine Taste oder Maustaste gedrückt werden, nennt man auch Events (engl. für Ereignis). Beachten Sie, dass Events zeitlich klar definiert sind und genau einmal vorkommen. Im Gegensatz dazu sind z.B. die Informationen aus mouseX und mouseY immer vorhanden und werden oft in einen kontinuierlichen Zusammenhang gestellt, z.B. mit der Position eines Kreises etc.

Damit Processing auf Tasten-Events reagiert, müssen Sie ein draw() im Code haben. Wenn nur setup() vorhanden ist, bleibt die Codeausführung nach Abarbeiten von setup() stehen.

Übungsaufgaben

(a) Einfacher Stempel

Schreiben Sie ein Programm, wo das Fenster zunächst leer ist. Sobald Sie eine Taste der Tastatur drücken, erscheint ein Quadrat in der Mitte.

(b) Löschen

Schreiben Sie ein Programm, wo zunächst ein Kreis in der Mitte zu sehen ist. Sobald Sie eine Maustaste drücken, wird der Kreis gelöscht.

(c) Mausstempel

Schreiben Sie ein Programm, wo bei jedem Mausklick ein Quadrat (20x20) und bei jedem Tastaturdruck ein Kreis (Durchmesser 20) gezeichnet wird - jeweils an der aktuellen Mausposition.

(Interaktives Feld. Erst anklicken, dann interagieren.)

Tipp
Ihr draw() muss leer sein, damit Ihre Formen nicht ständig überzeichnet werden.

(d) Ampel

Schreiben Sie ein Programm, das ein graues Feld zeigt. Bei Tastendruck wird das Feld rot, bei Mausklick grün.

(Interaktives Feld. Erst anklicken, dann interagieren.)

Tipp
Verwenden Sie keyPressed() und mousePressed().

Zusammenfassung

Ein punktuelles Ereignis wie das Herunterdrücken einer Taste nennt man ein Event. In Processing kann man auf ein Event reagieren, indem man spezielle Funktionen schreibt.

Möchten Sie auf den Druck einer beliebigen Taste auf der Tastatur reagieren, dann schreiben Sie die Funktion keyPressed(). Der Code dieser Funktion wird immer dann ausgeführt, wenn eine Taste gedrückt wird.

In gleicher Weise können Sie die Funktion mousePressed() schreiben. Dieser Code wird immer dann ausgeführt, wenn eine Maustaste gedrückt wird.

Sie können noch nicht zwischen verschiedenen Tastatur- oder Maustasten unterscheiden. Dazu benötigen Sie die If-Anweisung.

3.4 Zufall und Text

Zufall

Sie können sich nicht entscheiden, welche Graustufe Sie für Ihr Objekt wählen sollen? Fragen Sie einfach den Zufall! In Processing gibt es dafür das Kommando random(). An der Stelle, wo Sie diesen Befehl hinschreiben, wird eine Zufallszahl eingesetzt.

fill(random(256)); // zufällige Zahl aus {0,1,...,255}
ellipse(50,50,50,50);

Bei jedem Neustart sehen Sie eine andere Graustufe.

Wenn Sie nur random() schreiben, bekommen Sie eine float-Zahl zwischen 0 und 1 (exklusive der 1). Schreiben Sie zwei Zahlen, z.B. random(-10, 10) , so bekommen Sie eine Zufallszahl dazwischen (auch float), inklusive der -10 und exklusive der 10.

Text in der Grafik

Damit Sie auch über Text mit Ihrem Benutzer kommunizieren können, gibt es den Befehl text . Dieser setzt einen Text (nennt man auch String) an die angegebene Stelle.

size(200, 200);
fill(0); // Textfarbe schwarz
text("sei gegrüßt!", 100, 100);

// Orientierungskreuz
stroke(255);
line(100,0,100,200);
line(0,100,200,100);

Ergibt:

Allgemein lautet der Befehl also:

text(string, basisX, basisY);

Beachten Sie, dass die Textfarbe mit fill() gesetzt wird (nicht etwa mit stroke).

Sie sehen im Beispiel, wo die Positionsangabe genau die Mitte des Fensters ist, dass sich diese Koordinatenangabe auf den linken Startpunkt der Grundlinie bezieht.

Diese Ausrichtung (Alignment) kann man mit dem Befehl textAlign in Kombination mit den Werten CENTER, LEFT, RIGHT ändern, z.B. mittig mit:

textAlign(CENTER);
text("sei gegrüßt!", 100, 100);

Mit textSize gibt man die Punktgröße an:

textSize(32);
textAlign(CENTER);
text("sei gegrüßt!", 100, 100);

Übungsaufgaben

(a) Zufall: Kästchen

Bei Mausklick soll an zufälliger Position ein Kasten erscheinen, mit zufälliger Breite und Höhe (je zwischen 5 und 40 Pixel)

(Interaktives Feld. Erst anklicken, dann interagieren.)

(b) Zufall: Farbe

Schreiben Sie ein Programm, das ein graues Feld zeigt. Bei Mausklick wird das Feld mit einer zufälligen Farbe eingefärbt.

(Interaktives Feld. Erst anklicken, dann interagieren.)

(c) Text: Textmauszeiger

An der aktuellen Mausposition soll der Schriftzug "maus" erscheinen (mittig über Maus, Schriftgröße 20).

(Interaktives Feld. Erst anklicken, dann interagieren.)

(d) Zufall + Text

Bei Mausklick soll an einer zufälligen Position, mit zufälliger Größe (zwischen 5 und 30), mit zufälligem Grauton, die Schrift "hallo" erscheinen.

(Interaktives Feld. Erst anklicken, dann interagieren.)

3.5 Farbe II

Im ersten Kapitel haben Sie gelernt, wie man mit drei Werten für Rot, Grün und Blau im RGB-Farbraum eine Farbe benennt. Hier wollen wir zwei weitere Methoden beschreiben, Farben zu verwenden.

HSB-Farbraum

Neben RGB gibt weitere Farbräume, die für manche Situationen besser geeignet sind. Denn im RGB-Raum lassen sich viele Farben nicht intuitiv erschließen, z.B. wie man von Rot=(255, 0, 0) zu Orange=(255, 150, 0) kommt - denn dies sind doch "ähnliche" Farben, aber dass man dafür den Grünwert hochdrehen muss, ist vielleicht nicht jedem direkt klar.

Der sogenannt HSB-Farbraum versucht, besser "lesbar" zu sein, d.h. ähnliche Farben sollten dicht beieinander sein. HSB steht für Hue (Farbton), Saturation (Sättigung) und Brightness (Helligkeit). Der wichtigste Wert ist zunächst mal Hue: Mit einem einzigen Wert legt man den prinzipiellen Farbton anhand einer Skala von 0...360 fest (man sieht, dass Rot und Orange tatsächlich nah beieinander liegen):

Man stellt sich den Farbton auch als Kreis vor, daher 0° bis 360°, um eine Umdrehung zu machen. In einer Darstellung als Kreisscheibe nimmt die Sättigung zur Mitte hin ab. Üblich ist eine Darstellung als 3D-Kegel. Dabei wird die Helligkeit als Achse nach unten dargestellt (Abb. aus Wikipedia):

In der Abbildung steht V (Value) statt B, aber die Konzepte sind vergleichbar.

In Processing werden die Wert H, S und B wieder mal im Bereich 0..255 dargestellt. Um den HSB-Farbraum zu verwenden, schreiben Sie colorMode(HSB);. Hier ein Beispiel, wie Sie interaktiv die Farben explorieren können. Da wir den HSB-Farbraum verwenden, können wir mit einem Wert (x-Achse) den kompletten Farbton-Umfang durchlaufen:

void setup() {
  size(255, 100);
  colorMode(HSB);
}

void draw() {
  background(mouseX, 255, 255);
}

(Fahren Sie mit der Maus über das Feld)

Farbwähler und Hexadezimal

Viele Farbwähler in Grafikprogrammen (Photoshop etc.) verwenden das HSB-Modell. Auch Processing bietet im Menüpunkt Tools > Color Selector einen Farbwähler an:

Der vertikale Farbstreifen zeigt den Hue-Wert und das linke Farbfeld zeigt den gewählten Farbton an und lässt anhand zweier Dimensionen Sättigung (x-Achse) und Helligkeit (y-Achse) einstellen.

Zusätzlich sehen Sie die numerischen Werte als HSB (obere drei Felder) und RGB (untere drei Felder). Wichtig: Die RGB-Werte sehen Sie auch als Hexadezimalzahl, gekennzeichnet durch den #-Tag.

Den Hexadezimalwert können Sie direkt in Processing verwenden!

background(#3B3A9B);
fill(#FFC917);
rect(25,25,50,50);

Dies ist sicherlich die schnellste und genaueste Art, in Processing Farben zu wählen und einzusetzen.

Hexadezimalsystem

Das Hexadezimalsystem ist ein alternatives Zahlensystem. Statt 10 Ziffern wie im Dezimalsystem hat man im Hexadezimalsystem 16 Ziffern. Man zählt wie folgt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Wenn mann bei F ankommt, zählt man die nächste Stelle hoch und kommt also bei 10 an. Weiter geht es mit 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21 und so fort. Eine "10" im Hexadezimalsystem ist also eine "15" im Dezimalsystem. Um hier nicht durcheinander zu geraten, kann man das Zahlensystem kennzeichnen, z.B. #10 für die Hexadezimalzehn und 10 für die Dezimalzehn.

Warum soll man überhaupt ein anderes Zahlensystem wählen als das Dezimalsystem? Auf der niedrigsten Ebene arbeiten Computer mit sogennanten Bits. Diese haben nur zwei Werte, nämlich 0 und 1. Es handelt sich wiederum um ein alternatives Zahlensystem (Binärsystem) mit den Ziffern 0 und 1. Man zählt hier wie folgt: 0, 1, 10, 11, 100, 101, 110 und so fort.

Der Computerspeicher setzt sich aus vielen solcher Bits zusammen. Man gruppiert nun immer 8 Bits zu einem Byte. Mit 8 Bits bedeutet im Dezimalsystem den Bereich 0, 1, ..., 255. Im Hexdezimalsystem sieht dieser Bereich so aus: 0, 1, ..., FE, FF. Das heißt zwei Hexadezimalstellen decken genau den Bereich von einem Byte ab.

Für eine RGB-Farbe benötigen Sie drei Byte, also z.B. drei Dezimalzahlen zwischen 0 und 255. Im Hexadezimalsystem liegen diese drei Zahlen zwischen #0 und #FF. Deshalb kann man mit einer sechs-stelligen Hexadezimalzahl jeden RGB-Wert ausdrücken: die erste zwei Stellen sind der R-Wert, die zweiten zwei der G-Wert, die letzten zwei der B-Wert.

Übungsaufgaben

(a) ColorMode: Farbe und Intensität

Auf einer Fläche von 255x100 soll folgendes passieren: auf der Achse von links nach rechts soll sich die Farbe ändern (Rot, Orange, Gelb usw.), auf der Achse von oben nach unten soll sich die Sättigung ändern (oben = ungesättigt, unten = gesättigt).

(Interaktives Feld.)

(b) ColorMode: Zufallsfarbe

Bei Mausklick soll die Hintergrundfarbe zufällig neu gesetzt werden. Die Sättigung der Farbe hängt allerdings von der Mausposition (links-rechts) zum Zeitpunkt des Klicks ab (links = ungesättigt, rechts = gesättigt).

(Interaktives Feld. Erst anklicken, dann interagieren.)

Tipp
Bei der Sättigung müssen Sie die Mausposition auf den Bereich 0..255 umrechnen (Maus geht ja von 0..99). Verwenden Sie dazu einen Dreisatz.