Inhalt

Creative Coding

Processing ist eine grafisch orientierte Codingumgebung auf Opensource-Basis, die von Gestalter:innen und Künstler:innen gerne verwendet wird. Sie gilt als leichter Einstieg in die Welt des Codings, weil sie auf kreative Anwendungen hin konzipiert ist. Die Prinzipien aller Codingsprachen sind ähnlich und lassen sich übertragen. Processing wird als digitales Skizzenbuch verwendet, um schnell mal generative und interaktive Ideen zu testen und zu verändern. Diese Webseite begleitet den Vertiefer Creative Coding mit einer Aufgabensammlung und der Zusammenfassung von Codinganweisungen.

Struktur des Kurses

Erster Teil – Module
20.03 Processingmonster
27.03 Variable
03.04 Rechnen
17.04 Einfachschleife
08.05 Doppelschleife
15.05 Rauschen
22.05 Buchstabe und Projekt

Erster Teil – Fortgeschrittene
HSB-Farbraum
Verzweigung
Drehung
Dreidimensionalität
Vertexformen

Zweiter Teil – Projektphase
Wöchentliche individuelle Beratung

Processingmonster Beispielcode

size(800, 800);
background(255);

// Zuerst Attribute, dann Zeichenform
fill(0, 255, 0); // Attribut
noStroke(); // Attribut
rect(300, 250, 200, 200); // Zeichenform

stroke(0, 0, 255);
strokeWeight(4);
line(350, 250, 300, 200);
line(450, 250, 500, 200);

fill(255, 255, 0);
stroke(0, 0, 255);
strokeWeight(10);
ellipse(300, 200, 50, 50);

fill(255, 0, 255);
ellipse(500, 200, 50, 50);
line(350, 450, 350, 500);
line(400, 450, 400, 500);
line(450, 450, 450, 500);

fill(255, 255, 0);
arc(400, 350, 100, 100, radians(0), radians(180));

fill(0, 255, 0);
noStroke();
triangle(250, 350-50, 250-50, 350, 250+50, 350);
triangle(550, 350-50, 550-50, 350, 550+50, 350);
stroke(0, 0, 255);
strokeWeight(4);
noFill();
bezier(400, 250, 400, 250, 450-100, 100, 450, 100);

fill(255, 0, 0);
stroke(0, 255, 255);
strokeWeight(10);
ellipse(450, 100, 50, 50);

Zeichenformen

Zeichenfenster in Pixeln
size (800, 800);

Hintergrundfarbe als Graustufe
background (255);

Rechteck
rect (x, y, breite, hoehe);

Linie
line (ax, ay, bx, by);

Kreis
ellipse (x, y, breite, hoehe);

Kreisbogen
arc (x, y, breite, hoehe, anfangswinkel, endwinkel);

Dreieck
triangle (ax, ay, bx, by, cx, cy);

Reckteck
rect(x, y, breite, hoehe);

Bezierlinie
bezier(ax, ay, ctrl_ax, ctrl_ay, ctrl_bx, ctrl_by, bx, by);

Kreis
ellipse(x, y, breite, hoehe);

Attribute

Füllfarbe als RGB
fill (0, 255, 0);

Keine Kontur
noStroke();

Konturfarbe als RGB
stroke (0, 0, 255);

Konturstärke
strokeWeight(4);

Video

Worum geht es im Kurs ?

Gestalten mit Processing handelt von Generativer Gestaltung und hat zum Ziel experimentelle Buchstabenbilder zu erstellen. Anhand eines Buchstaben lernen wir die Grundlagen der visuell orientierten Programmiersprache Processing kennen. Der Inhalt der ersten Semesterhälfte ist in Modulen aufbereitet und wird von Aufgaben und dieser begleitenden Webseite ergänzt. Zu jedem Modul wird es ein Video geben. In der zweiten Semesterhälfte folgt die Projektphase. Hier wenden wir das erworbene Modulwissen in einer gestalterischen Experimentierreihe auf einen Buchstaben an. Das Wahlpflichtfach ist ab dem drittem Semester wählbar und Teil des Curriculums an der Hochschule Mannheim.

Video

Was sind Variablen ?

Variablen sind ein Grundkonzept der Informationsverarbeitung. Wir nutzen Variablen, um Information in ihnen zu speichern. Diese ist dynamisch und verändert sich im Laufe eines Programm durch Berechnungen. Bevor wir Variablen in Processing verwenden können, stellen wir diese einem Computer mit einem virtuellen coronafreien Handshake vor.

Methoden und Parameter

size(800, 800);
println ("Hallo Welt");
ellipse (400, 400, 500, 500);

Datentypen

Ganze Zahl
int

Zahl mit Nachkommastelle
float

true oder false
boolean

Einzelner Buchstaben
char

Wort oder Satz
String

Daten in Variablen speichern

float katzen;
katzen = 12;

float hunde = 3;
float maeuse = 10;
float tiere;

tiere = katzen + hunde + maeuse;

println ("Tiere: " + tiere);

Variablen verschiedenen Datentyps

int stueckzahl = 12;
float menge = 2.1;
boolean pendel = true;
char initiale = 'T';
String wort = "Thorsten";

println("Obst: " + stueckzahl);
println("Wasser: " + menge + " Liter");
println("Wahrsager: " + pendel);
println("Anfangsbuchstabe: " + initiale);
println("Vorname: " + wort);

Video

Wie rechnen wir in Processing ?

Um Bilder in Processing zu zeichnen, beschreiben wir sie mit einer formalen Abfolge logischer Verknüpfungen und relativer Bezüge ihrer gestalterischen Elemente untereinander. Das macht sie erst dynamisch und skalierbar. Dafür brauchen wir Variablen – darin speichern wir Werte. In Variablen und in Parametern von Methoden rechnen wir anschließend und erzeugen eben jede Verknüpfungen und Bezüge.

Parameteraddition

size(800, 800);
int radius = 250;
int mitteX = 400;
int mitteY = 400;
noFill();
ellipse (mitteX, mitteY, radius, radius);
ellipse (mitteX, mitteY, radius + 250, radius + 250);

Variablenaddition

size(800, 800);
int radius = 250;
int mitteX = 400;
int mitteY = 400;
noFill();
ellipse (mitteX, mitteY, radius, radius);
radius = radius + 250;
ellipse (mitteX, mitteY, radius, radius);

Relativ statt Absolut

int x = 50;
int y = 50;
line (x, y, x + 20, y - 20);

Grundrechenarten

Variablenaddition
radius = radius + 1;

Variablensubtraktion
radius = radius - 1;

Variablendivision
radius = radius / 4;

Variabelenmultiplikation
radius = radius * 4;


Parameteraddition
ellipse(400, 400, radius + 1, radius + 1);

Parametersubtraktion
ellipse(400, 400, radius - 1, radius - 1);

Parameterdivision
ellipse(400, 400, radius / 4, radius / 4);

Parametermultiplikation
ellipse(400, 400, radius * 4, radius * 4);


Codebeispiel
int radius = 7;
radius = radius + 1;
radius = radius * 4;
println("radius " + radius);

Video

Wie ist ein Programm in Processing aufgebaut ?

Ein Koordinatensystem der Informatik unterscheidet sich vom Koordinatensystem der Mathematik. Wir beschreiben Punkte absolut und relativ zueinander, um uns in einem Koordinatensystem zu bewegen. Außerdem schauen wir uns den Aufbau eines Programms in Processing an. Er kann linear oder strukturiert sein. Ein strukturierter Aufbau teilt das Programm in einen Setup- und einen Draw-Bereich. Während wir im Setup-Bereich allgemeine einmalige Einstellungen eintragen, schreiben wir im Draw-Bereich unser eigentliches Programm. Oberhalb von Setup stellen wir globale Variablen vor, die wir im Programm verwenden wollen.

Linear

int x = 50;
size(100, 100);
background(255);
noFill();
ellipse (x, 50, 75, 75);

noLoop

int x = 50;

void setup() {
  size(100, 100);
  background(255);
  noLoop();
}

void draw() {
  noFill();
  ellipse (x, 50, 75, 75);
}

Loop

int x = 50;

void setup() {
  size(100, 100);
  background(255);
}
void draw() {
  noFill();
  ellipse (x, 50, 75, 75);
}

Video

Welche Grundformen gibt es in Processing ?

Punkt, Linie, Rechteck, Ellipse, Bogen und Bezierkurve sind die wichtigsten Grundformen in Processing mit denen wir unsere generativen Grafiken aufbauen – und es gibt noch mehr Zeichenformen. Zwei Grundformen lassen sich zu neuen elementaren Zeichenformen verbinden. Mit Attributen wie Füllfarbe, Konturfarbe, Strichstärke und Transparenz beeinflussen wir die optischen Eigenschaften von Grundformen. Dabei folgen wir einer einfachen Regel. Wir nennen zuerst das Attribut – erst danach zeichnen wir die Form. Farbe ist von Form unabhängig. Welche Farbe ein Element annimmt, hängt von der Position im Programmverlauf ab, an der wir ein Attribut setzen. Das gesetzte Attribut wirkt solange fort, bis wir ein neues festlegen.

Punkt

size(800, 800);
float px = 400;
float py = 400;
strokeWeight(3);
point (px, py);

Linie

size(800, 800);
float ax = 150;
float ay = 400;
float bx = 650;
float by = 400;
line (ax, ay, bx, by);

Kreis

size(800, 800);
float mitteX = 400;
float mitteY = 400;
float breite = 500;
float hoehe = 500;
ellipse (mitteX, mitteY, breite, hoehe);

Kreisbogen

size(800, 800);
float mitteX = 400;
float mitteY = 400;
float breite = 500;
float hoehe = 500;
float start = radians(0); // Startwinkel
float ende = radians(270); // Endwinkel
arc (mitteX, mitteY, breite, hoehe, start, ende);

Rechteck

size(800, 800);
float eckeX = 150;
float eckeY = 150;
float breite = 500;
float hoehe = 500;
rect (eckeX, eckeY, breite, hoehe);

Bezier

size(800, 800);
float ax = 200;
float ay = 600;
float bx = 200;
float by = 300;
float cx = 300;
float cy = 200;
float dx = 600;
float dy = 200;
bezier(ax,ay,bx,by,cx,cy,dx,dy);

Attribute

size (800, 800);
int radius = 200;
int mitteX = 400;
int mitteY = 400;
noFill();
stroke (0, 0, 255);
ellipse (mitteX, mitteY, radius*3, radius*3);
stroke (0, 255, 255);
ellipse (mitteX, mitteY, radius*2, radius*2);
stroke (255, 0, 255);
ellipse (mitteX, mitteY, radius, radius);

Attribute

Flächengraustufe 0 bis 255
fill(255);

Flächenfarbe(RGB) 0 bis 255
fill(0,0,255);

Keine Füllung
noFill();


Konturgraustufe 0 bis 255
stroke(0);

Konturfarbe(RGB) 0 bis 255
stroke(0,0,255);

Konturstärke 0.1 bis ...
strokeWeight(1);

Keine Kontur
noStroke();


Graustufentransparenz 0 bis 255
fill(255,100);

Farbtransparenz 0 bis 255
fill(0,0,255,100);

Video

Welche Bildformate können wir mit Processing exportieren ?

In Processing erzeugte Bilddaten können wir in unterschiedlichsten Formaten exportieren. Wir beschränken uns auf den Export von Pixeldaten und Vektordaten. Während wir Pixeldaten in 72 dpi Auflösung als JPG, TIFF und PNG exportieren, steht uns für Vektordaten das PDF-Format zur Verfügung. Mit einer PDF-Datei schlagen wir die Brücke zu Print, weil wir beliebig skalierbare Daten herstellen. Damit können wir beispielsweise Buchstabenbilder in Plakatgröße drucken.

Pixelbild

void setup() {
  size (800, 800);
  noLoop();
}

void draw() {
  background (0);
  ellipse (400, 400, 200, 200);
  save ("data/kreis.tif");
}

Vektorbild

import processing.pdf.*;

void setup() {
  size (800, 800);
  noLoop();
}

void draw() {
  beginRecord(PDF, "data/kreis.pdf");
  background (0);
  ellipse (400, 400, 200, 200);
  endRecord();
}

Video

Wie wiederholen wir mit einer Schleife Elemente ?

Mit Schleifen wiederholen wir beliebig oft Teile eines Programms. Zusammen mit Variablen, die ihren Wert im Laufe eines Programms verändern, bauen wir Grafik unter Verwendung eines Elements schrittweite auf. Während wir while-Schleifen im Aufbau und Ablauf leichter nachvollziehen können, sind for-Schleifen kompakter und übersichtlicher. Nützlich werden for-Schleifen vor allem wenn wir zwei oder mehr davon miteinander kombinieren. Schleifen sind das elementare Instrument, wenn es darum geht, Prozesse zu automatisieren.

Schleifenarten

while-Schleife
int x = 40;
while (x <= 60) {
  point (x, 50);
  x = x + 10;
}

for-Schleife
for (int x = 40; x <= 60; x = x + 10) {
  point (x, 50);
}

Konzentrische Wiederholung

size(800, 800);
noFill();
float radius = 50;
while (radius < 600) {
  ellipse(400, 400, radius, radius);
  radius = radius + 50;
}

Horizontale Wiederholung

size(800, 800);
fill(0);
float radius = 8;
for (int x = 40; x <= 760; x = x + 40) {
  ellipse (x, 400, radius, radius);
}

Vertikale Wiederholung

size(800, 800);
fill(0);
float radius = 8;
for (int y = 40; y <= 760; y = y + 40) {
  ellipse (400, y, radius, radius);
}

Video

Wie erstellen wir ein Muster mit einer Doppelschleife ?

Um grafische Muster als Flächen aufzubauen, verwenden wir zwei Schleifen, die wir miteinander verbinden. Die ineinander geschachtelten Schleifen verhalten sich wie zwei Zahnräder – ein großes Zahnrad mit einem kleinen zusammen. Das kleine Zahnrad dreht sich viel öfter als das große. Die mechanische Logik dieses Systems verwenden wir, um ein grafisches Muster in der Fläche entweder zeilenweise oder spaltenweise aufzubauen. Um Muster zu modulieren verwenden wir zusätzlich zum Zahnräderwerk Hilfsvariablen, die mit dem Zahnräderwerk mitlaufen.

Horizontale Wiederholung

size(800, 800);
fill(0);
float radius = 8;
for (int x = 40; x < 800; x = x + 40) {
  ellipse (x, 400, radius, radius);
}

Horizontale Laufvariable

size(800, 800);
fill(0);
float radius = 2;
for (int x = 40; x < 800; x = x + 40) {
  ellipse (x, 400, radius, radius);
  radius = radius + 2;
}

Muster

size(800, 800);
fill(0);
float radius = 8;
for (int x = 40; x < 800; x = x + 40) {
  for (int y = 40; y < 800; y = y + 40) {
    ellipse (x, y, radius, radius);
  }
}

Flächenlaufvariable

size(800, 800);
fill(0);
float radius = 2;
for (int x = 40; x < 800; x = x + 40) {
  for (int y = 40; y < 800; y = y + 40) {
    ellipse (x, y, radius, radius);
    radius = radius + 0.1;
  }
}

Video

Wie generieren wir realistische Zufallszahlen ?

Um ein Muster lebendig zu gestalten, brauchen wir einen digitalen Zufallsgenerator. Noise ist an natürliche Prozesse wie Wolken oder Rauch angelehnt und liefert uns glaubwürdige Zufallszahlen, die auch in einer zweidimensionalen Fläche unser Muster glaubwürdig modulieren können. Einen einmal erzeugten Zufallsgenerator können wir auf einen bestimmten Parameter unser generativen Grafik anwenden und diesen über die Fläche modulieren. Je mehr Zufallsgeneratoren wir erzeugen, desto mehr Parameter können wir modulieren und desto lebendiger wird unsere generative Grafik.

Noise

float off;
float schrittweite = 0.005;
size(800, 800);
off = 0;
for (int x = 0; x < 800; x = x + 1) {
  off = off + schrittweite;
  float zufallszahl = map(noise(off),0,1,0,800);
  point (x, zufallszahl);
}

Noisemuster

float xoff, yoff;
float schrittweite = 0.2;
size(800, 800);
xoff = 0;
for (int x = 40; x < 800; x = x + 40) {
  xoff = xoff + schrittweite;
  yoff = 0;
  for (int y = 40; y < 800; y = y + 40) {
    yoff = yoff + schrittweite;
    float radius = map(noise(xoff, yoff),0,1,10,40);
    ellipse (x, y, radius, radius);
  }
}

Zwei Zufallszahlen

float offset1 = 0;
float offset2 = 0;
size(800, 800);
for (int x = 0; x < 800; x = x + 1) {
  float zufallszahl1 = map(noise(offset1),0,1,0,400);
  float zufallszahl2 = map(noise(offset2),0,1,10,410);
  point (x, zufallszahl1);
  point (x, zufallszahl2);
  offset1 = offset1 + 0.005;
  offset2 = offset2 + 0.004;
}

Methode noise

Das Ergebnis der Methode noise liegt zwischen 0 und 1 und wird in der Variable noiserauschen gespeichert. Damit die Methode noise funktioniert, braucht sie einen Parameter, der hier offset heißt. Das Ergebnis der Methode noise verändert sich nur wenn wir ihren Parameter offset durch eine Variablenaddition verändern. Für gute Ergebnisse stellen wir eine Wert zwischen 0.03 und 0.005 für die Variablenaddition ein.


Um das Ergebnis der Methode noise verwenden zu können, müssen wir es meistens vergrößern. Um das Ergebnis zu vergrößern können wir uns der Methode map bedienen. Sie skaliert für uns den Wertebereich der Noisefunktion – der zunächst immer zwischen 0 und 1 liegt – auf den von uns gewünschten Zielbereich, hier im Beispiel zwischen 10 und 40. Das Mapping des Wertebereichs können wir uns wie einen Pullover vorstellen, der entweder im Trocker schrumpft oder durch Ziehen vergrößert wird. Alle Werte dazwischen passen sich entsprechend an. In unserem Beispiel wird aus einer ursprünglichen 0.5 die genau zwischen 0 und 1 liegt, eine 25 die genau zwischen 10 und 40 liegt.


float offset = 0;
for (int anz = 0; anz < 10; anz = anz + 1) {
  float noiserauschen = map(noise(offset),0,1,10,40);
  println("noise: " + noiserauschen);
  offset = offset + 0.03;
}

Methode map

Noise erzeugt immer sehr kleine Zufallszahlen zwischen 0 und 1. Der Unterschied zwischen gar keinem und einem Pixel ist visuell so gut wie unsichtbar. Wir verwenden die Methode map, um die Ergebnisse von noise zu vergrößeren.


float eingabe = noise(0.1);
float minEingabe = 0;
float maxEingabe = 1;
float minAusgabe = 0;
float maxAusgabe = 255;
float ausgabe = map(eingabe, minEingabe, maxEingabe,
      minAusgabe, maxAusgabe);
println("eingabe", eingabe);
println("ausgabe", ausgabe);

Video

Wie schneiden wir aus einem Muster einen Buchstaben aus ?

Ein Muster erstellen wir mit einer Doppelschleife. Unter dieses Muster legen wir einen einzelnen Buchstaben. Mit einem digitalen Durchpaustrick schneiden wir aus dem Muster den hinterlegten Buchstaben heraus. Der flächige Buchstabe besteht danach aus dem zuerst erzeugten Muster – so gestalten wir einen Buchstaben als Fläche. Um die Kontur eines Buchstabens mit Elementen zu zeichnen, brauchen wir in Processing die externe Library geomerative. Sie liefert uns die Konturkoordinaten eines Buchstabens als Container.

Buchstabenoutline

import geomerative.*;
RShape gruppe;
RPoint[] p;

void setup() {
  size (800,800);
  noLoop();
  RG.init(this);
  gruppe = RG.getText("R",
  "DINOT-Bold.ttf", 800, CENTER);
  RG.setPolygonizer (RG.UNIFORMLENGTH);
  p = gruppe.getPoints();
}

void draw() {
  translate (width/2-50, height/2+275);
  for (int n = 0; n < p.length; n = n + 3) {
    ellipse (p[n].x, p[n].y, 6, 6);
  }
}

Buchstabenfläche

PGraphics bild;
PFont schrift;

void setup() {
  size(800, 800);
  noLoop();
  bild = createGraphics(width, height);
  schrift = createFont("DINOT-Bold.otf",800);
  bild.beginDraw();
  bild.background(255);
  bild.fill(0);
  bild.textFont(schrift);
  bild.textSize(800);
  bild.textAlign(CENTER, CENTER);
  bild.text("R", bild.width/2, bild.height/2);
  bild.endDraw();
}

void draw() {
  for (int x = 0; x < 800; x = x + 15) {
    for (int y = 0; y < 800; y = y + 15) {
      if (bild.get (x, y) == color(0)) {
        stroke(0);
        line (x, y, x + 8, y - 8);
      }
    }
  }
}

Outline mit 1D-Noise

import geomerative.*;
RShape gruppe;
RPoint[] p;

float offset = 0;
float schrittweite = 0.05;

void setup() {
  size (800,800);
  noLoop();
  RG.init(this);
  gruppe = RG.getText("R",
  "DINOT-Bold.ttf", 800, CENTER);
  RG.setPolygonizer (RG.UNIFORMLENGTH);
  p = gruppe.getPoints();
}

void draw() {
  translate (width/2-50, height/2+275);
  for (int n = 0; n < p.length; n = n + 3) {
    float lg = map(noise(offset),0,1,0,200);
    line (p[n].x, p[n].y, p[n].x + lg, p[n].y - lg);
    offset = offset + schrittweite;
  }
}

Fläche mit 2D-Noise

PGraphics bild;
PFont schrift;

float xoff, yoff;
float schrittweite = 0.2;

void setup() {
  size(800, 800);
  noLoop();
  bild = createGraphics(width, height);
  schrift = createFont("DINOT-Bold.otf",800);
  bild.beginDraw();
  bild.background(255);
  bild.fill(0);
  bild.textFont(schrift);
  bild.textSize(800);
  bild.textAlign(CENTER, CENTER);
  bild.text("R", bild.width/2, bild.height/2);
  bild.endDraw();
}

void draw() {
  xoff = 0;
  for (int x = 0; x < 800; x = x + 15) {
    xoff = xoff + schrittweite;
    yoff = 0;
    for (int y = 0; y < 800; y = y + 15) {
      yoff = yoff + schrittweite;
      if (bild.get (x, y) == color(0)) {
        float radius = map(noise(xoff, yoff), 0, 1, -5, 20);
        ellipse (x, y, radius, radius);
      }
    }
  }
}