Creative Coding

btk

Till Nagel

Bedingungen – Woche 3

Aufgaben

C1: Zeichenprogramm 2

Erweitere Übung B1 so, dass nur dann gezeichnet wird, wenn die Maus geklickt ist. Verwende hierzu eine if()-Abfrage und benutze die Variable mousePressed.

C2: Erste Schritte

Lass eine horizontale Linie von oben nach unten über die Zeichenfläche laufen. Verwende dazu eine int-Variable y, die in draw() jeweils um 1 erhöht wird.

zu einem frühen Zeitpunkt

zu einem späteren Zeitpunkt

Variation: Erweitere dies so, dass die Linie wieder oben anfängt, wenn sie unten rausgelaufen ist (also, wenn y > die Höhe des Zeichenbereichs).

C3: Interaktiver Mauszeiger

Zeichne ein Element an die aktuelle Mausposition. Das Element soll in der oberen Hälfte ein Kreis sein, und in der unteren Hälfte ein Quadrat. Tipp: Verwende if und else.

Variation: Links soll das jeweilige Element klein, und rechts groß sein.

C4: Bunte Mauskreise

Zeichne bunte Kreise an die aktuelle Mausposition. Mach die Farbe der Kreise interaktiv.

Variation: Wenn die Maustaste gedrückt wird, werden die Kreise größer.
Variation: Verwende HSB als Farbmodell.


Variablen-Gültigkeitsbereich

Der Gültigkeitsbereich einer Variable ist der Abschnitt eines Programms, in dem die Variable "sichtbar" ist, in dem wir die Variable verwenden können. Dieser Gültigkeitsbereich wird auch Scope (englisch für Rahmen, Bereich, Reichweite) genannt.

Global

Variablen, die außerhalb von setup() und draw() deklariert werden, sind überall im Programm nutzbar.

Lokal

Variablen, die innerhalb eines Programmblocks deklariert werden, sind nur innerhalb dieses Bereichs nutzbar.

Siehe auch Variablen in draw().

Programmblock

Ein Programmblock ist jeder Teilbereich eines Programms, der von geschweiften Klammern umfasst wird. Also beispielsweise:

(Vorsicht! Lokale Variablen überschreiben globale Variablen mit gleichem Namen. Daher am Besten für verschiedene Variablen immer auch unterschiedliche Namen verwenden.)

Bedingungen

Um den Programmfluß zu steuern, sind Bedingungen notwendig. Eine Prüfung entscheidet, ob eine Bedingung erfüllt ist und bestimmte Anweisungen ausgeführt werden sollen, oder nicht. Die Bedingung kann entweder wahr oder falsch (true oder false) sein.

if-Abfrage

Mit Hilfe dieser if-Abfrage werden also bestimmte Bedingungen geprüft. Die Anweisungen innerhalb der geschweiften Klammern werden abhängig vom Ergebnis der Prüfung ausgeführt.
Sollen im Falle, dass die Bedingung falsch ist, andere Anweisungen ausgeführt werden, so kann else verwendet werden:

Relationale Operatoren

Im Folgenden die Vergleichsoperatoren, die für Bedingungen eingesetzt werden können:

<
kleiner als
>
größer als
<=
kleiner gleich
>=
größer gleich
==
gleich
Vorsicht: Hier müssen zwei Gleichheitszeichen stehen, nicht nur eins (denn das wird bereits für die Zuweisung verwendet)
!=
ungleich

Farben

Es gibt verschiedene Farbsysteme, oder Farbmodelle.

  • RGB

    RGB steht für Rot, Grün, Blau. Dies ist ein additives Farbmodell, bei dem sich die Grundfarben zu Weiß addieren (Lichtmischung). Eine Farbe wird durch drei Werte beschrieben: den Rot-, den Grün- und den Blauanteil.

  • HSB

    HSB steht für Hue (englisch für Farbton), Saturation (Sättigung), Brightness (Helligkeit). Eine Farbe im HSB-Farbraum wird mit Hilfe dieser drei Werte beschrieben.

  • CYMK

    CMYK steht für Cyan, Magenta, Yellow (gelb) und blacK (schwarz). Dies ist ein subtraktives Farbmodell, welches die technische Grundlage für den modernen Vierfarbdruck bildet. Der Schwarz-Anteil ist zur Erhöhung des Kontrastes in dunklen Stellen. Vereinfacht kann es als komplementär zum RGB-Farbmodell verstanden werden.

In Processing werden wir die beiden Farbmodelle RGB und HSB verwenden.
Üblicherweise wird RGB in Werten von 0 bis 255 angegeben, und bei HSB der Farbton von 0 bis 360, und Sättigung und Helligkeit von 0 bis 100.

Farben in Processing

Wir haben bereits gesehen, wie wir Grauwerte benutzen. Um bunte Farben zu verwenden, kann man statt eines Wertes drei in den Farbanweisungen angeben.

Um Farben wieder verwenden zu können, benutzen wir den Datentyp color. Hierin können wir die drei Werte RGB oder HSB speichern.

Transparenz

Um die Elemente transparent werden zu lassen, können wir einen vierten Alpha-Wert angeben. Dieser geht ebenso von 0 bis 255 (d.h. von unsichtbar bis nicht-transparent).

colorMode()

colorMode(mode, range);

Setzt einen Farbmodus in Processing. Alle folgenden Farbanweisungen (wie stroke() oder fill()) werden dann im gewählten Farbmous ausgeführt.

Creative Commons Lizenz: Namensnennung-NichtKommerziell-Weitergabe unter gleichen Bedingungen 2.0 (Deutschland)

© 2007 Till Nagel, All rights reserved – Alle Rechte vorbehalten.