Farbrad-Grafik in Processing programmieren

Mit der Programmiersprache Processing sind einfache Programme mit grafischer Ausgabe recht flott entwickelt. Im Rahmen eines umfangreicheren Processing-Projektes zur Programmierung einer Android-App als Fernsteuerung in der Make-Ausgabe 4/18 standen wir vor der Aufgabe, ein Bild zu berechen, das systematisch sämtliche Farben des Regenbogens auf einer quadratischen Fläche abbildet. Der Code dafür steht als Zip-Archiv zum Download bereit und wird im Folgenden kurz erklärt.

Die Idee hinter diesem kleinen Programm: Zwei verschachtelte for-Schleifen durchlaufen die komplette Bildfläche Pixel für Pixel. Den Farbwert des jeweiligen Pixels berechnet eine trigonometrische Funktion, die Sättigung ist abhängig vom Abstand zum Bildmittelpunkt.

Zeile für Zeile

Das berechente Bild soll eine Größe von 500 mal 500 Pixeln haben, das legt Zeile 1 fest. Zeile 2 setzt den ColorMode auf HSB (Hue, Saturation, Brightness). Genau wie im voreingestellten RGB-Modus kodieren drei Zahlen zwischen 0 und 255 die Farbe. Im Unterschied zum RGB-Modus stehen diese aber nicht für Rot-, Grün- und Blauanteil, sondern für Farbwert, Sättigung und Helligkeit. Zweck der Übung: Bei konstant gesetzter Helligkeit (Zeile 3) ist es nun möglich, das komplette Farbspektrum mit zwei Parametern zu beschreiben. Das vereinfacht die Abbildung auf der Fläche.

Die Zeilen 9 und 10 sind entscheidend, denn sie berechnen den Farbwert und die Sättigung für jedes einzelne Pixel abhängig von den x- und y-Koordinaten. Zeile 9 nutzt die Funktion atan2(), um aus den jeweiligen Koordinaten den Winkel zum Bildmittelpunkt zu berechnen. Zeile 10 berechnet mit dist() die Entfernung zum Bildmittelpunkt.

Farbe geometrisch bestimmt

In beiden Zeilen müssen nun noch Winkel und Entfernung in den Farbwert oder die Sättigung übersetzt werden. Das erledigt die Funktion map(). Sie bildet einen Wert aus einem gegebenen Wertebereich auf einen gewünschten Wertebereich ab. In Zeile 9 geht der gegebene Wertebereich von -PI bis PI. Die Funktion map() skaliert diesen auf den der HSB-Codierung ensprechenden Bereich von 0 – 255. Entsprechend verfährt Zeile 10, nur das in diesem Fall der gegebene Wertebereich für den Abstand von 0 bis radius läuft.

Zeile 11 setzt mit stroke(farbwert, saettigung, helligkeit) die Zeichenfarbe auf die berechneten Werte, point(x, y) zeichnet dann ein entsprechend eingefärbes Pixel.

Nach dem Durchlauf der beiden Schleifen ist das Programmfenster vollständig wie gewünscht eingefärbt. Zeile 17 speichert den Inhalt des Programmfensters mit saveFrame() als Bilddatei unter dem Dateinamen regenbogenflaeche.png direkt im Ordner des Processing-Sketches. Ein einfacher Dateiname bezieht sich immer auf diesen Ordner, per absolutem Pfad ist aber auch jeder andere Ordner als Speicherort adressierbar. Die Endung bestimmt das Dateiformat, möglich sind neben .png auch .tiff und .jpg. (pek)