Generative Gestaltung gilt seit einigen Jahren als Geheimtipp auf Medienkunst-

festivals und Konferenzen. In einem Wechselspiel zwischen komplexer Information,

grafischer Gestaltung und den Möglichkeiten der Programmierung entstehen neue,

faszinierende visuelle Welten. Daneben verändern die Möglichkeiten der genera-

tiven Gestaltung die Rolle des Gestalters grundlegend: Aus dem designgeschulten

Anwender bereits programmierter digitaler Werkzeuge wird der problem erfassende

Programmierer eines eigenen digitalen Werkzeugkastens. Darin liegen nicht nur

unglaubliche Chancen für den visuellen Output, sondern auch für die Rolle des

Designers gegenüber Auftraggeber und Gesellschaft! Hartmut Bohn acker, Benedikt

Groß, Julia Laub und Claudius Lazzeroni bieten Ihnen ein solides Fundament, auf

das Sie Ihre generative Gestaltungszukunft bauen können! GEN

ERAT

IVE

GES

TALT

UN

G

AlgorithmusAnimation

3DAgenten

Architektur

AttraktorenBaumdiagramme

BildBildausschnitte

Bildersammlung

Corporate Design

DatengrafikEchtzeit-Bilder

Farbe

FormGenetische Algorithmen

Image Filter

InstallationInteraktion

Interpolation

KunstLinienstruktur

MeshesNetzstruktur

Organische FormPaletten

Pixelwerte

ProcessingRapid Prototyping

RasterRekursion

Rhino Scripting

Schriftkontur

SchwingungsfigurenScriptographer

SkulpturSpektrum

Text

TypografieVideo

VisualisierungVVVV

ZeichnenZufall und Rauschen

S./// Projekte-Sammlung

P./// Grundlegende Prinzipien P.1 Farbe

P.2 Form

P.3 Typo

M./// Komplexe Methoden

M.2 Schwingungsfiguren

M.3 Formulierte Körper

M.5 Baumdiagramme

M.4 Attraktoren

M.1 Zufall und Rauschen

P.4 Bild

M.6 Dynamische Datenstrukturen

345

789

GENERATIVEGESTALTUNG

EntwerfenProgrammieren

Verlag HermannSchmidt Mainz

Hartmut BohnackerBenedikt GroßJulia LaubClaudius Lazzeroni (Hrsg.)

Visualisieren

# S.020 # S.022 # S.024 # S.026 # S.028 # S.030 # S.032 # S.034

# S.052 # S.054 # S.056 # S.058 # S.060 # S.062 # S.064 # S.066

# S.084 # S.086 # S.088 # S.090 # S.092 # S.094 # S.096 # S.098

# S.116 # S.118 # S.120 # S.122 # S.124 # S.126 # S.128 # S.130

# S.148 # S.150 # S.152 # S.154 # S.156 # S.158 # S.160 # S.162

# S.180 # S.182 # S.184 # S.186 # S.188 # S.190 # S.192 # S.194

# S.212 # S.214 # S.216 # S.218 # S.220 # S.222 # S.224 # S.226

# S.244 # S.246 # S.248 # S.250 # S.252 # S.254 # S.256 # S.258

# S.276 # S.278 # S.280 # S.282 # S.284 # S.286 # S.288 # S.290

# S.308 # S.310 # S.312 # S.314 # S.316 # S.318 # S.320 # S.322

# S.340 # S.342 # S.344 # S.346 # S.348 # S.350 # S.352 # S.354

# S.372 # S.374 # S.376 # S.378 # S.380 # S.382 # S.384 # S.386

# S.404 # S.406 # S.408 # S.410 # S.412 # S.414 # S.416 # S.418

# S.436 # S.438 # S.440 # S.442 # S.444 # S.446 # S.448 # S.450

# S.020 # S.022 # S.024 # S.026 # S.028 # S.030 # S.032 # S.034

# S.052 # S.054 # S.056 # S.058 # S.060 # S.062 # S.064 # S.066

# S.084 # S.086 # S.088 # S.090 # S.092 # S.094 # S.096 # S.098

# S.116 # S.118 # S.120 # S.122 # S.124 # S.126 # S.128 # S.130

# S.148 # S.150 # S.152 # S.154 # S.156 # S.158 # S.160 # S.162

# S.180 # S.182 # S.184 # S.186 # S.188 # S.190 # S.192 # S.194

# S.212 # S.214 # S.216 # S.218 # S.220 # S.222 # S.224 # S.226

# S.244 # S.246 # S.248 # S.250 # S.252 # S.254 # S.256 # S.258

# S.276 # S.278 # S.280 # S.282 # S.284 # S.286 # S.288 # S.290

# S.308 # S.310 # S.312 # S.314 # S.316 # S.318 # S.320 # S.322

# S.340 # S.342 # S.344 # S.346 # S.348 # S.350 # S.352 # S.354

# S.372 # S.374 # S.376 # S.378 # S.380 # S.382 # S.384 # S.386

# S.404 # S.406 # S.408 # S.410 # S.412 # S.414 # S.416 # S.418

# S.436 # S.438 # S.440 # S.442 # S.444 # S.446 # S.448 # S.450

# S.036 # S.038 # S.040 # S.042 # S.044 # S.046 # S.048 # S.050

# S.068 # S.070 # S.072 # S.074 # S.076 # S.078 # S.080 # S.082

# S.100 # S.102 # S.104 # S.106 # S.108 # S.110 # S.112 # S.114

# S.132 # S.134 # S.136 # S.138 # S.140 # S.142 # S.144 # S.146

# S.164 # S.166 # S.168 # S.170 # S.172 # S.174 # S.176 # S.178

# S.196 # S.198 # S.200 # S.202 # S.204 # S.206 # S.208 # S.210

# S.228 # S.230 # S.232 # S.234 # S.236 # S.238 # S.240 # S.242

# S.260 # S.262 # S.264 # S.266 # S.268 # S.270 # S.272 # S.274

# S.292 # S.294 # S.296 # S.298 # S.300 # S.302 # S.304 # S.306

# S.324 # S.326 # S.328 # S.330 # S.332 # S.334 # S.336 # S.338

# S.356 # S.358 # S.360 # S.362 # S.364 # S.366 # S.368 # S.370

# S.388 # S.390 # S.392 # S.394 # S.396 # S.398 # S.400 # S.402

# S.420 # S.422 # S.424 # S.426 # S.428 # S.430 # S.432 # S.434

# S.452 # S.454 # S.456

Die Grafik auf dem Cover besteht aus einer

großen Anzahl farbiger Bänder. Jedes Band

repräsentiert einen Teil einer Buchseite und

benutzt dessen Farben, die zusätzlich nach

Helligkeit sortiert wurden. Dazu wurden die

drei Hauptteile des Buches als PNGs expor-

tiert, in Processing eingelesen und wie in

�Farbpaletten aus Bildern� # Kap.P.1.2.2

ausgewertet.

Auf der Vorderseite des Buches laufen die

Bänder entlang einer Bézierkurve auf die

Schriftkonturen zu. Wie die Punkte auf einer

Schrift bestimmt werden können, ist in

�Schriftkontur� # Kap.P.3.2 beschrieben.

Auf der Rückseite formieren sich die Bänder

zu einer Liste von Stichwörtern (Tag Cloud)

um. Die zu den Buchseiten gehörigen Tags

wurden in einer XML-Datei hinterlegt und

ähnlich wie in �Dynamische Datenstruk-

turen� # Kap.M.6 gezeigt ausgelesen.

Das Programm # Cover.pde, mit dem die Gra-

fik auf dem Cover generiert wurde, liegt dem

Code-Paket bei, das auf www.generative-

gestaltung.de zum Download bereit steht.

Dieses Programm ist allerdings nicht als

didaktisches Beispiel gedacht und nur für

erfahrene Anwender verständlich. Es zeigt

aber ganz gut, wie aus vielen (relativ ein-

fachen) Einzeltechniken eine komplexe Grafik

entstehen kann. Außerdem soll es als Fund-

grube für kleinere Codeteile dienen.S./// Projekt-Sammlung

P./// Grundlegende Prinzipien P.1 Farbe

P.3 Typo

M./// Komplexe Methoden

M.2 Schwingungsfiguren

M.1 Zufall und Rauschen

M.3 Formulierte Körper

M.4 Attraktoren

M.5 Baumdiagramme

M.6 Dynamische Datenstrukturen

P.4 Bild

P.2 Form

Die Grafik auf dem Cover besteht aus einer

großen Anzahl farbiger Bänder. Jedes Band

repräsentiert einen Teil einer Buchseite und

benutzt dessen Farben, die zusätzlich nach

Helligkeit sortiert wurden. Dazu wurden die

drei Hauptteile des Buches als PNGs expor-

tiert, in Processing eingelesen und wie in

�Farbpaletten aus Bildern� # Kap.P.1.2.2

ausgewertet.

Auf der Vorderseite des Buches laufen die

Bänder entlang einer Bézierkurve auf die

Schriftkonturen zu. Wie die Punkte auf einer

Schrift bestimmt werden können, ist in

�Schriftkontur� # Kap.P.3.2 beschrieben.

Auf der Rückseite formieren sich die Bänder

zu einer Liste von Stichwörtern (Tag Cloud)

um. Die zu den Buchseiten gehörigen Tags

wurden in einer XML-Datei hinterlegt und

ähnlich wie in �Dynamische Datenstruk-

turen� # Kap.M.6 gezeigt ausgelesen.

Das Programm # Cover.pde, mit dem die Gra-

fik auf dem Cover generiert wurde, liegt dem

Code-Paket bei, das auf www.generative-

gestaltung.de zum Download bereit steht.

Dieses Programm ist allerdings nicht als

didaktisches Beispiel gedacht und nur für

erfahrene Anwender verständlich. Es zeigt

aber ganz gut, wie aus vielen (relativ ein-

fachen) Einzeltechniken eine komplexe Grafik

entstehen kann. Außerdem soll es als Fund-

grube für kleinere Codeteile dienen.S./// Projekt-Sammlung

P./// Grundlegende Prinzipien P.1 Farbe

P.3 Typo

M./// Komplexe Methoden

M.2 Schwingungsfiguren

M.1 Zufall und Rauschen

M.3 Formulierte Körper

M.4 Attraktoren

M.5 Baumdiagramme

M.6 Dynamische Datenstrukturen

P.4 Bild

P.2 Form

GENERATIVE GESTALTUNG

Entwerfen Programmieren Visualisieren

Hartmut Bohnacker Benedikt Groß Julia Laub

HerausgeberClaudius Lazzeroni

Verlag Hermann Schmidt, Mainz

GENERATIVE GESTALTUNG

Entwerfen Programmieren Visualisieren

Hartmut Bohnacker Benedikt Groß Julia Laub

HerausgeberClaudius Lazzeroni

Verlag Hermann Schmidt, Mainz

Generative Gestaltung gilt seit einigen Jahren als Geheimtipp auf Medi-

enkunstfestivals und Konferenzen. Im Wechselspiel zwischen kom-

plexer Information, grafischer Gestaltung und den Möglichkeiten der

Programmierung entstehen neue, faszinierende visuelle Welten, die Kor-

relationen und Koinzidenzen sichtbar machen können oder den Zufall

mit gestalten lassen.

Wir erleben einen Paradigmenwechsel im Design, der formal zu neuen

Bildwelten führt. Das Wesentliche dieses Wechsels aber bleibt vielen ver-

borgen: Die Möglichkeiten von Programmiersprachen wie Processing

werden die Rolle des Designers verändern. Bislang haben Gestalter die

Tools genutzt, die Programmierer für sie entwickelt haben. Der gestal-

tende Mensch passte sich also an das System an.

In der generativen Gestaltung wird aus dem designgeschulten Anwen-

der vorgefertigter digitaler Werkzeuge der Programmierer eines indivi-

duellen digitalen Werkzeugkastens. Das erschließt neue visuelle Welten

und es verändert grundlegend den Entwurfsprozess. Der handwerkliche

Aspekt tritt im ersten Schritt in den Hintergrund. An seine Stelle treten

Abstraktion und Information, also das Erfassen der Metaebene.

Generative Gestaltung beginnt also nicht mit formalen Fragen, sondern

mit dem Erkennen von Phänomenen.

Bis wir Hartmut Bohnacker, Benedikt Groß, Julia Laub und Claudius

Lazzeroni begegneten, haben wir begeistert und fasziniert den »visu-

ellen Output« generativer Gestaltung beobachtet, aber erst in den inten-

siven Gesprächen mit den Autoren wurde uns dieser Paradigmenwech-

sel im Design richtig klar. Wir wollten nie ein Buch mit Formeln oder

Codes machen. Never say never – um generative Gestaltung nicht nur zu

bewundern, sondern zu verstehen, sind sie nötig! Selten haben wir selbst

so viel in der Zusammenarbeit an einem Buch gelernt, dafür danken wir

dem Autorenteam ganz herzlich!

Wir wünschen Ihnen den Mut, sich auf die didaktisch hervorragende

Einführung der Autoren einzulassen. Den Vieren ist es gelungen, selbst

komplexen Quellcodes den Schrecken zu nehmen und die entschei-

denden Komponenten des Codes allgemeinverständlich zu beleuchten.

Angelehnt an die klassischen Gestaltungsgrundlagen nutzen sie Farbe,

Form, Typo, Bild etc. als Struktur des Buches und der dazugehörigen

Website www.generative-gestaltung.de. Sie laden neben Gestaltern auch

EditorialE.1

E.1 Editorial008

Programmierer zu einer Erweiterung des eigenen Horizonts ein und tei-

len ihr immenses Wissen.

Die generative Gestaltung kommt in den letzten Jahren immer mehr aus

dem Nischendasein heraus und verdient es, einem breiteren Publikum

zugänglich gemacht zu werden. Hartmut Bohnacker, Benedikt Groß,

Julia Laub und Claudius Lazzeroni legen dafür eine solide Grundlage.

Sie verstehen dieses Buch und die dazugehörige Website als Basis für die

gemeinsame Weiterentwicklung und freuen sich auf geteiltes Wissen.

Wir freuen uns, wenn Sie die Chancen und Möglichkeiten der genera-

tiven Gestaltung erkennen und nutzen und wünschen Ihnen eine faszi-

nierende Reise in eine gestalterisch neue Welt!

Herzlich,

Karin und Bertram Schmidt-Friderichs

009

Generative Gestaltung gilt seit einigen Jahren als Geheimtipp auf Medi-

enkunstfestivals und Konferenzen. Im Wechselspiel zwischen kom-

plexer Information, grafischer Gestaltung und den Möglichkeiten der

Programmierung entstehen neue, faszinierende visuelle Welten, die Kor-

relationen und Koinzidenzen sichtbar machen können oder den Zufall

mit gestalten lassen.

Wir erleben einen Paradigmenwechsel im Design, der formal zu neuen

Bildwelten führt. Das Wesentliche dieses Wechsels aber bleibt vielen ver-

borgen: Die Möglichkeiten von Programmiersprachen wie Processing

werden die Rolle des Designers verändern. Bislang haben Gestalter die

Tools genutzt, die Programmierer für sie entwickelt haben. Der gestal-

tende Mensch passte sich also an das System an.

In der generativen Gestaltung wird aus dem designgeschulten Anwen-

der vorgefertigter digitaler Werkzeuge der Programmierer eines indivi-

duellen digitalen Werkzeugkastens. Das erschließt neue visuelle Welten

und es verändert grundlegend den Entwurfsprozess. Der handwerkliche

Aspekt tritt im ersten Schritt in den Hintergrund. An seine Stelle treten

Abstraktion und Information, also das Erfassen der Metaebene.

Generative Gestaltung beginnt also nicht mit formalen Fragen, sondern

mit dem Erkennen von Phänomenen.

Bis wir Hartmut Bohnacker, Benedikt Groß, Julia Laub und Claudius

Lazzeroni begegneten, haben wir begeistert und fasziniert den »visu-

ellen Output« generativer Gestaltung beobachtet, aber erst in den inten-

siven Gesprächen mit den Autoren wurde uns dieser Paradigmenwech-

sel im Design richtig klar. Wir wollten nie ein Buch mit Formeln oder

Codes machen. Never say never – um generative Gestaltung nicht nur zu

bewundern, sondern zu verstehen, sind sie nötig! Selten haben wir selbst

so viel in der Zusammenarbeit an einem Buch gelernt, dafür danken wir

dem Autorenteam ganz herzlich!

Wir wünschen Ihnen den Mut, sich auf die didaktisch hervorragende

Einführung der Autoren einzulassen. Den Vieren ist es gelungen, selbst

komplexen Quellcodes den Schrecken zu nehmen und die entschei-

denden Komponenten des Codes allgemeinverständlich zu beleuchten.

Angelehnt an die klassischen Gestaltungsgrundlagen nutzen sie Farbe,

Form, Typo, Bild etc. als Struktur des Buches und der dazugehörigen

Website www.generative-gestaltung.de. Sie laden neben Gestaltern auch

EditorialE.1

E.1 Editorial008

Programmierer zu einer Erweiterung des eigenen Horizonts ein und tei-

len ihr immenses Wissen.

Die generative Gestaltung kommt in den letzten Jahren immer mehr aus

dem Nischendasein heraus und verdient es, einem breiteren Publikum

zugänglich gemacht zu werden. Hartmut Bohnacker, Benedikt Groß,

Julia Laub und Claudius Lazzeroni legen dafür eine solide Grundlage.

Sie verstehen dieses Buch und die dazugehörige Website als Basis für die

gemeinsame Weiterentwicklung und freuen sich auf geteiltes Wissen.

Wir freuen uns, wenn Sie die Chancen und Möglichkeiten der genera-

tiven Gestaltung erkennen und nutzen und wünschen Ihnen eine faszi-

nierende Reise in eine gestalterisch neue Welt!

Herzlich,

Karin und Bertram Schmidt-Friderichs

009

InhaltsverzeichnisE.2

E./// Einführung # S.008

E.1 Editorial # S.008

E.2 Inhaltsverzeichnis # S.010

E.3 Bildübersicht # S.012

E.4 Wie lese ich dieses Buch? # S.014

E.5 Wie nutze ich die Programme? # S.016

E.6 Was bietet mir www.generative-gestaltung.de? # S.018

Projekt-S./// Sammlung # S.020

In der Projekt-Sammlung werden 37 Arbeiten verschiedener

Medienkünstler und Designer aus dem Bereich der gene-

rativen Gestaltung vorgestellt. Zum einen als Inspirations-

quelle, zum anderen als repräsentative Übersicht über das

Themenfeld.

GrundlegendeP./// Prinzipien # S.164

Dieser Teil vermittelt Ihnen grundlegende Prinzipien der

generativen Gestaltung in den vier Gestaltungsbereichen

Farbe, Form, Typo und Bild.

P.0 Processing-Einführung # S.166

P.0.0 Überblick über Processing # S.168

P.0.1 Sprachelemente # S.170

P.0.2 Schön programmieren # S.178

P.1 Farbe # S.180

P.1.0 Hallo Farbe # S.182

P.1.1 Farbspektrum # S.184

P.1.1.1 Farbspektrum im Raster # S.184

P.1.1.2 Farbspektrum im Kreis # S.186

P.1.2 Farbpaletten # S.188

P.1.2.1 Farbpaletten durch Interpolation # S.188

P.1.2.2 Farbpaletten aus Bildern # S.190

P.1.2.3 Farbpaletten aus Regeln # S.194

P.2 Form # S.200

P.2.0 Hallo Form # S.202

P.2.1 Raster # S.206

P.2.1.1 Anordnung im Raster # S.206

P.2.1.2 Verschiebung im Raster # S.210

P.2.1.3 Komplexes Modul im Raster # S.214

P.2.2 Agenten # S.218

P.2.2.1 Dummer Agent # S.218

P.2.2.2 Intelligenter Agent # S.220

P.2.2.3 Formen aus Agenten # S.224

P.2.2.4 Wachstumsstruktur aus Agenten # S.228

P.2.2.5 Verdichtungsstruktur aus Agenten # S.232

P.2.3 Zeichnen # S.236

P.2.3.1 Zeichnen mit animiertem Pinsel # S.236

P.2.3.2 Relation und Abstand beim Zeichnen # S.240

P.2.3.3 Zeichnen mit Typo # S.242

P.2.3.4 Zeichnen mit elastischem Pinsel # S.244

P.2.3.5 Zeichnen mit dem Stifttablett # S.248

P.2.3.6 Zeichnen mit komplexen Modulen # S.252

P.3 Typo # S.256

P.3.0 Hallo Typo # S.258

P.3.1 Text # S.260

P.3.1.1 Zeitbasiertes Schreiben von Text # S.260

P.3.1.2 Text als Bauplan # S.262

P.3.1.3 Textbild # S.266

P.3.1.4 Textdiagramm # S.272

P.3.2 Schriftkontur # S.276

P.3.2.1 Auflösen der Schriftkontur # S.276

P.3.2.2 Variieren der Schriftkontur # S.280

P.3.2.3 Schriftkontur aus Agenten # S.284

P.4 Bild # S.286

P.4.0 Hallo Bild # S.288

P.4.1 Bildausschnitte # S.290

P.4.1.1 Bildausschnitte im Raster # S.290

P.4.1.2 Rückkopplung von Bildausschnitten # S.294

P.4.2 Bildersammlung # S.296

P.4.2.1 Collage aus Bildersammlung # S.296

P.4.2.2 Zeitbasierte Bildersammlung # S.300

P.4.3 Pixelwerte # S.302

P.4.3.1 Grafik aus Pixelwerten # S.302

P.4.3.2 Typo aus Pixelwerten # S.308

P.4.3.3 Echtzeit-Pixelwerte # S.312

E.2 Inhaltsverzeichnis010

KomplexeM./// Methoden # S.318

In diesem Teil wird das Repertoire für die generative

Gestaltung erweitert, indem anhand von sechs größer

angelegten Beispielen komplexere Methoden erklärt

werden.

M.1 Zufall und Rauschen # S.320

M.1.0 Zufall und Rauschen – Übersicht # S.322

M.1.1 Zufall und Ausgangsbedingung # S.324

M.1.2 Zufall und Ordnung # S.325

M.1.3 Rauschen versus Zufall # S.326

M.1.4 Verrauschte Landschaften # S.330

M.1.5 Verrauschte Bewegung # S.332

M.1.6 Agenten im Raum # S.342

M.2 Schwingungsfiguren # S.346

M.2.0 Schwingungsfiguren – Übersicht # S.348

M.2.1 Harmonische Schwingungen # S.350

M.2.2 Lissajous-Figuren # S.351

M.2.3 Modulierte Lissajous-Figuren # S.353

M.2.4 Dreidimensionale Lissajous-Figuren # S.354

M.2.5 Darstellung der Lissajous-Figuren # S.356

M.2.6 Ein Zeichenwerkzeug # S.364

M.3 Formulierte Körper # S.368

M.3.0 Formulierte Körper – Übersicht # S.370

M.3.1 Gitternetze anlegen # S.372

M.3.2 Transformation in die dritte Dimension # S.373

M.3.3 Die Mesh-Klasse # S.377

M.3.4 Gitternetze dekonstruieren # S.378

M.3.5 Eigene Formen definieren # S.388

M.3.6 Kurzreferenz Mesh-Klasse # S.389

M.4 Attraktoren # S.390

M.4.0 Attraktoren – Übersicht # S.392

M.4.1 Die Nodes # S.394

M.4.2 Der Attraktor # S.396

M.4.3 Das Attraktoren-Tool # S.400

M.4.4 Attraktoren im Raum # S.404

M.4.5 Kurzreferenz Node-Klasse # S.408

M.4.6 Kurzreferenz Attraktor-Klasse # S.409

M.5 Baumdiagramme # S.410

M.5.0 Baumdiagramme – Übersicht # S.412

M.5.1 Rekursion # S.414

M.5.2 Dateien von der Festplatte einlesen # S.415

M.5.3 Sunburst-Diagramme # S.417

M.5.4 Sunburst aus Linien # S.422

M.5.5 Das Sunburst-Tool # S.423

M.6 Dynamische Datenstrukturen # S.432

M.6.0 Dynamische Datenstrukturen – Übersicht # S.434

M.6.1 Force Directed Layout # S.436

M.6.2 Daten aus dem Internet # S.440

M.6.3 Daten im Force Directed Layout # S.443

M.6.4 Größenverhältnisse visualisieren # S.445

M.6.5 Semantische Textanalyse # S.448

M.6.6 Fischaugen-Projektion # S.454

A./// Anhang # S.458

Die Reflexion ist der zentrale Teil des Anhangs.

Dort fassen wir unsere Gedanken zum veränderten

Entwurfsprozess und den neuen Möglichkeiten der

generativen Gestaltung zusammen, bringen sie

mit unseren Beispielprogrammen in Verbindung und

geben einen Ausblick auf zukünftige Entwicklungen.

A.0 Reflexion # S.460

A.1 Stichwortregister # S.466

A.2 Literaturverzeichnis # S.468

A.3 Die Autoren # S.470

A.4 Wir sagen Danke # S.471

A.5 Adressverzeichnis # S.472

A.6 Impressum # S.473

011

InhaltsverzeichnisE.2

E./// Einführung # S.008

E.1 Editorial # S.008

E.2 Inhaltsverzeichnis # S.010

E.3 Bildübersicht # S.012

E.4 Wie lese ich dieses Buch? # S.014

E.5 Wie nutze ich die Programme? # S.016

E.6 Was bietet mir www.generative-gestaltung.de? # S.018

Projekt-S./// Sammlung # S.020

In der Projekt-Sammlung werden 37 Arbeiten verschiedener

Medienkünstler und Designer aus dem Bereich der gene-

rativen Gestaltung vorgestellt. Zum einen als Inspirations-

quelle, zum anderen als repräsentative Übersicht über das

Themenfeld.

GrundlegendeP./// Prinzipien # S.164

Dieser Teil vermittelt Ihnen grundlegende Prinzipien der

generativen Gestaltung in den vier Gestaltungsbereichen

Farbe, Form, Typo und Bild.

P.0 Processing-Einführung # S.166

P.0.0 Überblick über Processing # S.168

P.0.1 Sprachelemente # S.170

P.0.2 Schön programmieren # S.178

P.1 Farbe # S.180

P.1.0 Hallo Farbe # S.182

P.1.1 Farbspektrum # S.184

P.1.1.1 Farbspektrum im Raster # S.184

P.1.1.2 Farbspektrum im Kreis # S.186

P.1.2 Farbpaletten # S.188

P.1.2.1 Farbpaletten durch Interpolation # S.188

P.1.2.2 Farbpaletten aus Bildern # S.190

P.1.2.3 Farbpaletten aus Regeln # S.194

P.2 Form # S.200

P.2.0 Hallo Form # S.202

P.2.1 Raster # S.206

P.2.1.1 Anordnung im Raster # S.206

P.2.1.2 Verschiebung im Raster # S.210

P.2.1.3 Komplexes Modul im Raster # S.214

P.2.2 Agenten # S.218

P.2.2.1 Dummer Agent # S.218

P.2.2.2 Intelligenter Agent # S.220

P.2.2.3 Formen aus Agenten # S.224

P.2.2.4 Wachstumsstruktur aus Agenten # S.228

P.2.2.5 Verdichtungsstruktur aus Agenten # S.232

P.2.3 Zeichnen # S.236

P.2.3.1 Zeichnen mit animiertem Pinsel # S.236

P.2.3.2 Relation und Abstand beim Zeichnen # S.240

P.2.3.3 Zeichnen mit Typo # S.242

P.2.3.4 Zeichnen mit elastischem Pinsel # S.244

P.2.3.5 Zeichnen mit dem Stifttablett # S.248

P.2.3.6 Zeichnen mit komplexen Modulen # S.252

P.3 Typo # S.256

P.3.0 Hallo Typo # S.258

P.3.1 Text # S.260

P.3.1.1 Zeitbasiertes Schreiben von Text # S.260

P.3.1.2 Text als Bauplan # S.262

P.3.1.3 Textbild # S.266

P.3.1.4 Textdiagramm # S.272

P.3.2 Schriftkontur # S.276

P.3.2.1 Auflösen der Schriftkontur # S.276

P.3.2.2 Variieren der Schriftkontur # S.280

P.3.2.3 Schriftkontur aus Agenten # S.284

P.4 Bild # S.286

P.4.0 Hallo Bild # S.288

P.4.1 Bildausschnitte # S.290

P.4.1.1 Bildausschnitte im Raster # S.290

P.4.1.2 Rückkopplung von Bildausschnitten # S.294

P.4.2 Bildersammlung # S.296

P.4.2.1 Collage aus Bildersammlung # S.296

P.4.2.2 Zeitbasierte Bildersammlung # S.300

P.4.3 Pixelwerte # S.302

P.4.3.1 Grafik aus Pixelwerten # S.302

P.4.3.2 Typo aus Pixelwerten # S.308

P.4.3.3 Echtzeit-Pixelwerte # S.312

E.2 Inhaltsverzeichnis010

KomplexeM./// Methoden # S.318

In diesem Teil wird das Repertoire für die generative

Gestaltung erweitert, indem anhand von sechs größer

angelegten Beispielen komplexere Methoden erklärt

werden.

M.1 Zufall und Rauschen # S.320

M.1.0 Zufall und Rauschen – Übersicht # S.322

M.1.1 Zufall und Ausgangsbedingung # S.324

M.1.2 Zufall und Ordnung # S.325

M.1.3 Rauschen versus Zufall # S.326

M.1.4 Verrauschte Landschaften # S.330

M.1.5 Verrauschte Bewegung # S.332

M.1.6 Agenten im Raum # S.342

M.2 Schwingungsfiguren # S.346

M.2.0 Schwingungsfiguren – Übersicht # S.348

M.2.1 Harmonische Schwingungen # S.350

M.2.2 Lissajous-Figuren # S.351

M.2.3 Modulierte Lissajous-Figuren # S.353

M.2.4 Dreidimensionale Lissajous-Figuren # S.354

M.2.5 Darstellung der Lissajous-Figuren # S.356

M.2.6 Ein Zeichenwerkzeug # S.364

M.3 Formulierte Körper # S.368

M.3.0 Formulierte Körper – Übersicht # S.370

M.3.1 Gitternetze anlegen # S.372

M.3.2 Transformation in die dritte Dimension # S.373

M.3.3 Die Mesh-Klasse # S.377

M.3.4 Gitternetze dekonstruieren # S.378

M.3.5 Eigene Formen definieren # S.388

M.3.6 Kurzreferenz Mesh-Klasse # S.389

M.4 Attraktoren # S.390

M.4.0 Attraktoren – Übersicht # S.392

M.4.1 Die Nodes # S.394

M.4.2 Der Attraktor # S.396

M.4.3 Das Attraktoren-Tool # S.400

M.4.4 Attraktoren im Raum # S.404

M.4.5 Kurzreferenz Node-Klasse # S.408

M.4.6 Kurzreferenz Attraktor-Klasse # S.409

M.5 Baumdiagramme # S.410

M.5.0 Baumdiagramme – Übersicht # S.412

M.5.1 Rekursion # S.414

M.5.2 Dateien von der Festplatte einlesen # S.415

M.5.3 Sunburst-Diagramme # S.417

M.5.4 Sunburst aus Linien # S.422

M.5.5 Das Sunburst-Tool # S.423

M.6 Dynamische Datenstrukturen # S.432

M.6.0 Dynamische Datenstrukturen – Übersicht # S.434

M.6.1 Force Directed Layout # S.436

M.6.2 Daten aus dem Internet # S.440

M.6.3 Daten im Force Directed Layout # S.443

M.6.4 Größenverhältnisse visualisieren # S.445

M.6.5 Semantische Textanalyse # S.448

M.6.6 Fischaugen-Projektion # S.454

A./// Anhang # S.458

Die Reflexion ist der zentrale Teil des Anhangs.

Dort fassen wir unsere Gedanken zum veränderten

Entwurfsprozess und den neuen Möglichkeiten der

generativen Gestaltung zusammen, bringen sie

mit unseren Beispielprogrammen in Verbindung und

geben einen Ausblick auf zukünftige Entwicklungen.

A.0 Reflexion # S.460

A.1 Stichwortregister # S.466

A.2 Literaturverzeichnis # S.468

A.3 Die Autoren # S.470

A.4 Wir sagen Danke # S.471

A.5 Adressverzeichnis # S.472

A.6 Impressum # S.473

011

BildübersichtE.3

# S.248 # S.250 # S.252 # S.256 # S.259 # S.261 # S.264

# S.183 # S.184# S.180 # S.186 # S.189 # S.192

H8

1000

E0

0000

A9

1001

F1 5

1111

F1 2

1100

A1 1

1011

A1 5

1111

A1 3

1101

E1 3

1101

A1 3

1101

C1 5

1111

B1 5

1111

F1 5

1111

A1 4

1110

G1 1

1011

A1 4

1110

A3

0011

A1 5

1111

A7

0111

A7

0111

A1 4

1110

E1 1

1011

A1 5

1111

E5

0101

E7

0111

A1 4

1110

A3

0011

F7

0111

E4

0100

G1 0

1010G0

0000

G8

1000

E3

0011

B1 5

1111

A1 4

1110

H9

1001

D1 5

1111

B1 5

1111

A1 5

1111

C7

0111

A1 5

1111

C1 5

1111

C7

0111

C1 5

1111

A1 5

1111

H1 5

1111

A1 5

1111

A1 2

1100

A9

1001

A1 2

1100

A1 1

1011

A1 4

1110

F2

0010

D3

0011

A1 3

1101

H1 2

1100

D1

0001

C1 5

1111

F5

0101

C6

0110D0

0000

A0

0000

D2

0010

A9

1001

G1 5

1111

D1 3

1101

A7

0111

H4

0100

A1 1

1011

C1 3

1101

A1 5

1111

H1 3

1101

A1 3

1101

B1 5

1111

B1 5

1111

A1 5

1111

H1 5

1111

A1 5

1111

A1 4

1110

C2

0010

A3

0011

A1 5

1111

C1 2

1100

G9

1001

D7

0111

H1 4

1110

H0

0000

G1 0

1010

B8

1000B2

0010

B3

0011

B1 5

1111

D5

0101

G6

0110

H8

1000

B1 0

1010

A3

0011

H5

0101

A1 4

1110

F1 0

1010

A1 1

1011

A1 3

1101

A1 5

1111

A1 3

1101

A1 3

1101

A1 3

1101

A7

0111

G1 5

1111

F4

0100

A9

1001

F1 2

1100

F2

0010

A9

1001

G1 3

1101

B7

0111

B4

0100

G1 1

1011

F4

0100H1 0

1010

H1 1

1011

F1 4

1110

A1 1

1011

D4

0100

A3

0011

A1 3

1101

A7

0111

A1 4

1110

A1 0

1010

G9

1001

A5

0101

A7

0111

A1 4

1110

A1 0

1010

E1 1

1011

G1 4

1110

A3

0011

A1 4

1110

H1 0

1010

H1 0

1010

C0

0000A1 1

1011

F7

0111

B1 5

1111

A1 4

1110

G1 0

1010

B1 0

1010

D9

1001

D1 5

1111

B5

0101

F1 5

1111

A6

0110

H1 1

1011

C1 3

1101

C7

0111

A1 3

1101

B7

0111

D5

0101

H7

0111

A1 5

1111

F1 5

1111

A7

0111

A7

0111

C5

0101

D7

0111

H1 3

1101

B1 4

1110

G1

0001

H7

0111

D1 5

1111

A5

0101

H6

0110

H1 1

1011

C6

0110B1

0001

H1 3

1101

A1 5

1111

A1 3

1101

H1 3

1101

A7

0111

E1 3

1101

E7

0111

G5

0101

F1 5

1111

B4

0100

F8

1000

F9

1001

F1 5

1111

H4

0100

F1 0

1010

A8

1000

A8

1000

H9

1001

A1 5

1111

E1 5

1111

E1 3

1101

B1 4

1110

D1 0

1010

B9

1001

H6

0110

A1 1

1011

C1 2

1100

G1 0

1010

E1 1

1011

G1 4

1110D8

1000

B8

1000

C8

1000

C8

1000

F0

0000

G0

0000

F8

1000

F9

1001

F4

0100

G0

0000

E0

0000

F9

1001

B1 2

1100

G8

1000

D9

1001

D4

0100

C8

1000

C8

1000

C1

0001

C1 2

1100

G9

1001

E1 2

1100

# S.196

# S.211

# S.197

# S.212

# S.199

# S.214

# S.200

# S.216

# S.203

# S.219

# S.204

# S.223

# S.207

# S.224

# S.209

# S.270# S.268 # S.274 # S.276 # S.278 # S.280 # S.282

# S.285 # S.286 # S.289 # S.291 # S.293 # S.295 # S.296

# S.298 # S.301 # S.305 # S.306 # S.310 # S.314 # S.317

# S.231 # S.232 # S.235 # S.241# S.238 # S.243 # S.245

P./// Grundlegende Prinzipien # S.164

Farbe

P.1

Form

P.2

Typo

P.3

Bild

P.4

E.3 Bildübersicht012

# S.393

# S.451

# S.380

# S.429

# S.323

# S.360

# S.407

# S.340

# S.405

# S.457

# S.386

# S.446

# S.337

# S.371

# S.426

# S.357

M./// Komplexe Methoden # S.318

# S.401

# S.452

# S.383

# S.431

# S.331

# S.365

# S.413

# S.346

Schwingungs-fi guren

M.2

# S.456

# S.385

# S.404

# S.435

# S.335

# S.368

# S.424

# S.355

FormulierteKörper

M.3

# S.390

# S.428

# S.320

# S.359

# S.447

# S.379

# S.406

# S.339

Zufall undRauschen

M.1

Attraktoren

M.4

# S.430

# S.329

# S.363

# S.400

# S.452

# S.381

# S.410

# S.345

Baum-diagramme

M.5

# S.421

# S.349

# S.402

# S.453

# S.384

# S.432

# S.334

# S.367

Dynamische Datenstrukturen

M.6

013

BildübersichtE.3

# S.248 # S.250 # S.252 # S.256 # S.259 # S.261 # S.264

# S.183 # S.184# S.180 # S.186 # S.189 # S.192

H8

1000

E0

0000

A9

1001

F1 5

1111

F1 2

1100

A1 1

1011

A1 5

1111

A1 3

1101

E1 3

1101

A1 3

1101

C1 5

1111

B1 5

1111

F1 5

1111

A1 4

1110

G1 1

1011

A1 4

1110

A3

0011

A1 5

1111

A7

0111

A7

0111

A1 4

1110

E1 1

1011

A1 5

1111

E5

0101

E7

0111

A1 4

1110

A3

0011

F7

0111

E4

0100

G1 0

1010G0

0000

G8

1000

E3

0011

B1 5

1111

A1 4

1110

H9

1001

D1 5

1111

B1 5

1111

A1 5

1111

C7

0111

A1 5

1111

C1 5

1111

C7

0111

C1 5

1111

A1 5

1111

H1 5

1111

A1 5

1111

A1 2

1100

A9

1001

A1 2

1100

A1 1

1011

A1 4

1110

F2

0010

D3

0011

A1 3

1101

H1 2

1100

D1

0001

C1 5

1111

F5

0101

C6

0110D0

0000

A0

0000

D2

0010

A9

1001

G1 5

1111

D1 3

1101

A7

0111

H4

0100

A1 1

1011

C1 3

1101

A1 5

1111

H1 3

1101

A1 3

1101

B1 5

1111

B1 5

1111

A1 5

1111

H1 5

1111

A1 5

1111

A1 4

1110

C2

0010

A3

0011

A1 5

1111

C1 2

1100

G9

1001

D7

0111

H1 4

1110

H0

0000

G1 0

1010

B8

1000B2

0010

B3

0011

B1 5

1111

D5

0101

G6

0110

H8

1000

B1 0

1010

A3

0011

H5

0101

A1 4

1110

F1 0

1010

A1 1

1011

A1 3

1101

A1 5

1111

A1 3

1101

A1 3

1101

A1 3

1101

A7

0111

G1 5

1111

F4

0100

A9

1001

F1 2

1100

F2

0010

A9

1001

G1 3

1101

B7

0111

B4

0100

G1 1

1011

F4

0100H1 0

1010

H1 1

1011

F1 4

1110

A1 1

1011

D4

0100

A3

0011

A1 3

1101

A7

0111

A1 4

1110

A1 0

1010

G9

1001

A5

0101

A7

0111

A1 4

1110

A1 0

1010

E1 1

1011

G1 4

1110

A3

0011

A1 4

1110

H1 0

1010

H1 0

1010

C0

0000A1 1

1011

F7

0111

B1 5

1111

A1 4

1110

G1 0

1010

B1 0

1010

D9

1001

D1 5

1111

B5

0101

F1 5

1111

A6

0110

H1 1

1011

C1 3

1101

C7

0111

A1 3

1101

B7

0111

D5

0101

H7

0111

A1 5

1111

F1 5

1111

A7

0111

A7

0111

C5

0101

D7

0111

H1 3

1101

B1 4

1110

G1

0001

H7

0111

D1 5

1111

A5

0101

H6

0110

H1 1

1011

C6

0110B1

0001

H1 3

1101

A1 5

1111

A1 3

1101

H1 3

1101

A7

0111

E1 3

1101

E7

0111

G5

0101

F1 5

1111

B4

0100

F8

1000

F9

1001

F1 5

1111

H4

0100

F1 0

1010

A8

1000

A8

1000

H9

1001

A1 5

1111

E1 5

1111

E1 3

1101

B1 4

1110

D1 0

1010

B9

1001

H6

0110

A1 1

1011

C1 2

1100

G1 0

1010

E1 1

1011

G1 4

1110D8

1000

B8

1000

C8

1000

C8

1000

F0

0000

G0

0000

F8

1000

F9

1001

F4

0100

G0

0000

E0

0000

F9

1001

B1 2

1100

G8

1000

D9

1001

D4

0100

C8

1000

C8

1000

C1

0001

C1 2

1100

G9

1001

E1 2

1100

# S.196

# S.211

# S.197

# S.212

# S.199

# S.214

# S.200

# S.216

# S.203

# S.219

# S.204

# S.223

# S.207

# S.224

# S.209

# S.270# S.268 # S.274 # S.276 # S.278 # S.280 # S.282

# S.285 # S.286 # S.289 # S.291 # S.293 # S.295 # S.296

# S.298 # S.301 # S.305 # S.306 # S.310 # S.314 # S.317

# S.231 # S.232 # S.235 # S.241# S.238 # S.243 # S.245

P./// Grundlegende Prinzipien # S.164

Farbe

P.1

Form

P.2

Typo

P.3

Bild

P.4

E.3 Bildübersicht012

# S.393

# S.451

# S.380

# S.429

# S.323

# S.360

# S.407

# S.340

# S.405

# S.457

# S.386

# S.446

# S.337

# S.371

# S.426

# S.357

M./// Komplexe Methoden # S.318

# S.401

# S.452

# S.383

# S.431

# S.331

# S.365

# S.413

# S.346

Schwingungs-fi guren

M.2

# S.456

# S.385

# S.404

# S.435

# S.335

# S.368

# S.424

# S.355

FormulierteKörper

M.3

# S.390

# S.428

# S.320

# S.359

# S.447

# S.379

# S.406

# S.339

Zufall undRauschen

M.1

Attraktoren

M.4

# S.430

# S.329

# S.363

# S.400

# S.452

# S.381

# S.410

# S.345

Baum-diagramme

M.5

# S.421

# S.349

# S.402

# S.453

# S.384

# S.432

# S.334

# S.367

Dynamische Datenstrukturen

M.6

013

Dieser kurze Einleitungstext beschreibt, worum es in diesem Kapitel geht und was in diesem Kapitel gelernt werden kann. Im Text kann es Verweise auf andere Kapitel oder Weblinks geben.

P.2.2.1 Kapitelüberschrift

if (direction == NORTHNORTH) {

y -= distance;

if (y = 0) y = height;

}

else if (direction == NORTHEASTNORTHEAST) {

x += distance;

if (x >= width) x = 0;

}

for (int i=0; i<circleResolution; i++){

x[i] += random(-stepSize,stepSize)*distorsionFactor

+ offsetX*100;

y[i] += random(-stepSize,stepSize)*distorsionFactor

+ offsetY*100;

......

}

int stepSizestepSize = 1;

int diameter = 1;

Maus: Ziehen links: Module zeichnen • Klick rechts: Module löschen

Tasten: G: Raster anzeigen ein/aus • G: Modulwerte anzeigen ein/aus • 1 – 8: Tileset auswählen

P: PDF speichern • S: PNG speichern • C: Farbpalette speichern

456 P.2 Kapitel – P.2.2 Unterkapitel – P.2.2.1 Kapitelüberschrift456 457

# P_2_1_1_02 .pde

Die Zusammensetzung der Programm-Namen

Der Buchstabe zu Beginn des Dateinamens ver-rät, ob es sich um ein Programm aus dem Teil Grundlegende Prinzipien (P) oder Komplexe Methoden (M) handelt.

Steht für das Kapitel 2.2.1

Manchmal hat ein Kapitel mehr als nur ein Beispiel. Die Versionen sind dann mit einer laufenden Nummer gekennzeichnet.

Endung von Processing-Dateien

$

Bei manchen Dateien stehen noch die Begriffe TOOL (komplexe Anwendung mit Menü) oder TABLET (komplexe Anwendung für ein Stift-tablett) hinter der Versionsnummer.

Wie lese ich dieses Buch?E.4

Der Kopfbereich des Codes

Der Codeverweis führt direkt zum passenden Programm, das diesem Kapitel zugrunde liegt # S.018 �Download der Programme«. Erklärt wird immer nur die Basis-Version, welche auf _01 endet. Im Codeordner finden sich oft noch wei-tere Versionen des Programms (_02, _03 usw.), diese stellen Varianten des ersten Programms dar und sind oft etwas komplexer.

Eine Liste der Interaktionsmöglichkeiten verrät, mit welchen Tasten und welchen Mausaktionen Einfluss auf das Programm genommen werden kann. Fast immer gibt es z. B. die Möglichkeit, das erzeugte Bild per Tastendruck auf die Taste S als PNG zu speichern. Oft sind auch Parame-ter an die Position des Mauszeigers gebunden # S.017 »Das Programm anwenden«.

Der Codeblock

Zum leichteren Verständnis des Codes, den man idealerweise parallel zur Lektüre des Buches am Rechner geöffnet hat, sind einzelne wichtige Teile des Codes abgedruckt und mit Erklärungen ver-sehen. # S.017 »Das Programm anwenden�

Codemarkierungen heben die wichtigsten Stellen im Code hervor, sodass Sie die Erklärungen leich-ter zuordnen können.

Das Syntax-Highlighting verdeutlicht, welche Begriffe Sprachelemente von Processing sind.

Die drei Punkte bedeuten, dass hier Code ausgelassen wurde.

Der Pfeil bedeutet, dass der Codeblock auf der nächsten Seite fortgesetzt wird.

E.4 Wie lese ich dieses Buch?014

Dieser kurze Einleitungstext beschreibt, worum es in diesem Kapitel geht und was in diesem Kapitel gelernt werden kann. Im Text kann es Verweise auf andere Kapitel oder Weblinks geben.

P.2.2.1 Kapitelüberschrift

Maus: Ziehen links: Module zeichnen • Klick rechts: Module löschen

Tasten: G: Raster anzeigen ein/aus • G: Modulwerte anzeigen ein/aus • 1 – 8: Tileset auswählen

P: PDF speichern • S: PNG speichern • C: Farbpalette speichern

456 P.2 Kapitel – P.2.2 Unterkapitel – P.2.2.1 Kapitelüberschrift456 457

Die verschiedenen Arten von Verweisen

# P_1_1_01.pde Verweis auf eine Programm-Datei aus dem Pro-gramme-Paket # S.018 »Download der Programme und der Library«

# S.123 Verweis auf eine Seite# Kap.P.1.1.2 Verweis auf ein Kapitel# W.345 Verweis auf eine Website Auf # www.generative-gestaltung.de kann der

Zahlencode direkt in eine Suchmaske eingegeben werden, ohne eine lange Webadresse abtippen zu müssen # S.019 »Weblinks«

Bilder

In vielen Beispielen, die den Faktor Zeit mit einbeziehen, zeigt eine Sequenz von mehreren kleineren Bildern einen zeitlichen Ablauf.

Die Bildunterschriften beinhalten jeweils eine kurze Erklärung und den Verweis auf das Pro-gramm, mit dem das Bild erzeugt wurde.

015

Dieser kurze Einleitungstext beschreibt, worum es in diesem Kapitel geht und was in diesem Kapitel gelernt werden kann. Im Text kann es Verweise auf andere Kapitel oder Weblinks geben.

P.2.2.1 Kapitelüberschrift

if (direction == NORTHNORTH) {

y -= distance;

if (y = 0) y = height;

}

else if (direction == NORTHEASTNORTHEAST) {

x += distance;

if (x >= width) x = 0;

}

for (int i=0; i<circleResolution; i++){

x[i] += random(-stepSize,stepSize)*distorsionFactor

+ offsetX*100;

y[i] += random(-stepSize,stepSize)*distorsionFactor

+ offsetY*100;

......

}

int stepSizestepSize = 1;

int diameter = 1;

Maus: Ziehen links: Module zeichnen • Klick rechts: Module löschen

Tasten: G: Raster anzeigen ein/aus • G: Modulwerte anzeigen ein/aus • 1 – 8: Tileset auswählen

P: PDF speichern • S: PNG speichern • C: Farbpalette speichern

456 P.2 Kapitel – P.2.2 Unterkapitel – P.2.2.1 Kapitelüberschrift456 457

# P_2_1_1_02 .pde

Die Zusammensetzung der Programm-Namen

Der Buchstabe zu Beginn des Dateinamens ver-rät, ob es sich um ein Programm aus dem Teil Grundlegende Prinzipien (P) oder Komplexe Methoden (M) handelt.

Steht für das Kapitel 2.2.1

Manchmal hat ein Kapitel mehr als nur ein Beispiel. Die Versionen sind dann mit einer laufenden Nummer gekennzeichnet.

Endung von Processing-Dateien

$

Bei manchen Dateien stehen noch die Begriffe TOOL (komplexe Anwendung mit Menü) oder TABLET (komplexe Anwendung für ein Stift-tablett) hinter der Versionsnummer.

Wie lese ich dieses Buch?E.4

Der Kopfbereich des Codes

Der Codeverweis führt direkt zum passenden Programm, das diesem Kapitel zugrunde liegt # S.018 �Download der Programme«. Erklärt wird immer nur die Basis-Version, welche auf _01 endet. Im Codeordner finden sich oft noch wei-tere Versionen des Programms (_02, _03 usw.), diese stellen Varianten des ersten Programms dar und sind oft etwas komplexer.

Eine Liste der Interaktionsmöglichkeiten verrät, mit welchen Tasten und welchen Mausaktionen Einfluss auf das Programm genommen werden kann. Fast immer gibt es z. B. die Möglichkeit, das erzeugte Bild per Tastendruck auf die Taste S als PNG zu speichern. Oft sind auch Parame-ter an die Position des Mauszeigers gebunden # S.017 »Das Programm anwenden«.

Der Codeblock

Zum leichteren Verständnis des Codes, den man idealerweise parallel zur Lektüre des Buches am Rechner geöffnet hat, sind einzelne wichtige Teile des Codes abgedruckt und mit Erklärungen ver-sehen. # S.017 »Das Programm anwenden�

Codemarkierungen heben die wichtigsten Stellen im Code hervor, sodass Sie die Erklärungen leich-ter zuordnen können.

Das Syntax-Highlighting verdeutlicht, welche Begriffe Sprachelemente von Processing sind.

Die drei Punkte bedeuten, dass hier Code ausgelassen wurde.

Der Pfeil bedeutet, dass der Codeblock auf der nächsten Seite fortgesetzt wird.

E.4 Wie lese ich dieses Buch?014

Dieser kurze Einleitungstext beschreibt, worum es in diesem Kapitel geht und was in diesem Kapitel gelernt werden kann. Im Text kann es Verweise auf andere Kapitel oder Weblinks geben.

P.2.2.1 Kapitelüberschrift

Maus: Ziehen links: Module zeichnen • Klick rechts: Module löschen

Tasten: G: Raster anzeigen ein/aus • G: Modulwerte anzeigen ein/aus • 1 – 8: Tileset auswählen

P: PDF speichern • S: PNG speichern • C: Farbpalette speichern

456 P.2 Kapitel – P.2.2 Unterkapitel – P.2.2.1 Kapitelüberschrift456 457

Die verschiedenen Arten von Verweisen

# P_1_1_01.pde Verweis auf eine Programm-Datei aus dem Pro-gramme-Paket # S.018 »Download der Programme und der Library«

# S.123 Verweis auf eine Seite# Kap.P.1.1.2 Verweis auf ein Kapitel# W.345 Verweis auf eine Website Auf # www.generative-gestaltung.de kann der

Zahlencode direkt in eine Suchmaske eingegeben werden, ohne eine lange Webadresse abtippen zu müssen # S.019 »Weblinks«

Bilder

In vielen Beispielen, die den Faktor Zeit mit einbeziehen, zeigt eine Sequenz von mehreren kleineren Bildern einen zeitlichen Ablauf.

Die Bildunterschriften beinhalten jeweils eine kurze Erklärung und den Verweis auf das Pro-gramm, mit dem das Bild erzeugt wurde.

015

Wie nutze ich die Programme?E.5

In vielen Programmen wird dieser Bereich (die Processing-Konsole) genutzt, um Statusinfor-mationen (z. B. zum Fortgang der PDF-Ausgabe) anzuzeigen.

Die Zahl zeigt Ihnen an, in welcher Codezeile sich der Cursor befindet. Sehr wichtig beim Suchen von Fehlern.

Einrichten von Processing. So legen Sie los!

1. Laden Sie die neueste Version von Processing herunter. Die Programme zum Buch wurden mit Version 1.0.5 erstellt, sollten aber auch in neue-ren Versionen funktionieren.# www.processing.org

2. Laden Sie das Paket mit den Libraries und Pro-grammen zum Buch herunter. Die Libraries müs-sen im Processing- Sketchbook-Ordner liegen, üblicherweise ist das der Ordner Dokumente/Processing. Diesen Ordner legt Processing beim ersten Start an.# www.generative-gestaltung.de

3. Über »File > Open...« können Sie nun eines der Programme öffnen. Processing-Programme (auch Sketch genannt) haben die Dateiendung ».pde«. Zu einem Programm (hier »M_3_4_03_TOOL«) können mehrere pde-Files gehören. Es genügt, wenn eines davon geöffnet wird, die anderen Programmteile werden automatisch mitgeöffnet und erscheinen im Editor als Reiter. Manchmal befindet sich ein Ordner mit Namen »data« im Programm-Ordner. Dort befinden sich die Dateien (Schriften, Bilder etc.), die das Programm zusätzlich benötigt. Eine png-Datei zeigt Ihnen einfach eine Vorschau davon, was das Programm macht.

4. Das Programm starten Sie nun mit »Sketch > Run« oder dem Run-Button. Ein neues Fenster (das Display-Fenster) öffnet sich, in dem das Pro-gramm läuft. Die Interaktionen, die im Buch und im Kopf der pde-Datei beschrieben sind, stehen nun zur Verfügung.

5. Das Programm beenden Sie, wenn Sie das Dis-play-Fenster schließen oder den Stopp-Button drücken. Die Änderungen, die Sie im Display vor-genommen haben, gehen damit verloren. Beim nächsten Start beginnt das Programm wieder mit den gleichen Anfangseinstellungen. Was Sie im Programmcode ändern und abspeichern, bleibt natürlich erhalten.

6. Achtung: Manche unserer Programme be nötigen viel Speicher, vor allem wenn hoch-aufgelöste Bilder gespeichert werden sollen. Sie sollten deshalb auf jeden Fall in den Ein-stellungen von Processing »Increase maximum available memory« aktivieren und auf 512 MB oder mehr einstellen. Unter Umständen kann das Speichern von Bildern etwas länger dauern.

7. Weitere Informationen finden Sie hier:# Kap.P.0.0 Überblick über Processing

Das passende Programm zu jedem Kapitel finden Sie leicht über die Dateinamen. Die Programme sind nach den Kapiteln benannt.# S.014 »Die Zusammensetzung der

Programm-Namen«

E.5 Wie nutze ich die Programme?016

Das Programm anwenden

Grundsätzlich muss man nicht programmieren können oder lernen, um etwas von diesem Buch zu haben. Denn jedes Programm kann einfach nur angewendet werden. Im Grundlagenteil ste-hen dafür eine Reihe von Interaktionsmöglich-keiten zur Verfügung, mit denen das entstehende Bild modifiziert und abspeichert werden kann.

Im Teil »Komplexe Methoden« verfügen die fina-len Programme über ein Parameter-Menü mit Reglern und Buttons. Mit diesem Menü können Sie sehr variantenreiche Bilder erzeugen und diese in hoher Qualität speichern, ohne sich mit dem Code beschäftigen zu müssen.

Output aus dem Programm

Je nach Programm können hochaufgelöste Bilder oder Vektordaten gespeichert werden. Diese wer-den in denselben Ordner gespeichert, in dem auch die pde-Datei liegt. Die gespeicherten Dateien bekommen einen eindeutigen Namen, der sich aus Datum und Uhrzeit zusammensetzt. Dadurch können Sie leicht nachvollziehen, in welcher Rei-henfolge die Bilder entstanden sind.

In den Programmen des Kapitels Farbpaletten kön nen zusätzlich noch Farbpaletten im Format ASE für Adobe-Anwendungen gespeichert werden.

Das Speichern von Vektordaten (editierbares PDF) erfolgt meistens einfach durch Drücken der Taste P. In einigen Programmen ist es aber erforder-lich, das PDF gewissermaßen aufzunehmen (das Recording wird mit R gestartet und mit E beendet). Hierbei werden alle nach dem Start des Recordings erzeugten Elemente live in ein PDF geschrieben, welches beim Ende des Recordings finalisiert wird.

Das Programm verändern

Als kleinen Einstieg in die Programmierung kön-nen Sie im Code einfach bestimmte Parameter verändern. Dadurch lassen sich noch mehr Varian-ten erzeugen als die, die schon durch Maus- und Tastaturinteraktion möglich sind. Die Zeilen, in denen es sich lohnt, Parameter zu verändern, sind mit //// gekennzeichnet und dahinter ein sinn-voller Wertebereich angegeben.

Neue Programme machen

Es ist ausdrücklich erwünscht, die bestehenden Programme zu verändern oder aus deren Baustei-nen neue zu schaffen.

Dabei hilft die generativedesign-Library. Durch diese werden viele nützliche Funktionen und Klas-sen bereitgestellt.

Die Dokumentation der Library finden Sie auf # www.generative-gestaltung.de, zusätzlich gibt es Kurzreferenzen für die Klassen am Ende der Kapitel, in denen sie verwendet werden.

Die Programme zu diesem Buch haben wir unter die Apache-Lizenz gestellt. Im Wesentlichen bedeutet das, dass Sie die Programme frei in jedem Umfeld verwen-den, modifizieren und verteilen dürfen.

017

Wie nutze ich die Programme?E.5

In vielen Programmen wird dieser Bereich (die Processing-Konsole) genutzt, um Statusinfor-mationen (z. B. zum Fortgang der PDF-Ausgabe) anzuzeigen.

Die Zahl zeigt Ihnen an, in welcher Codezeile sich der Cursor befindet. Sehr wichtig beim Suchen von Fehlern.

Einrichten von Processing. So legen Sie los!

1. Laden Sie die neueste Version von Processing herunter. Die Programme zum Buch wurden mit Version 1.0.5 erstellt, sollten aber auch in neue-ren Versionen funktionieren.# www.processing.org

2. Laden Sie das Paket mit den Libraries und Pro-grammen zum Buch herunter. Die Libraries müs-sen im Processing- Sketchbook-Ordner liegen, üblicherweise ist das der Ordner Dokumente/Processing. Diesen Ordner legt Processing beim ersten Start an.# www.generative-gestaltung.de

3. Über »File > Open...« können Sie nun eines der Programme öffnen. Processing-Programme (auch Sketch genannt) haben die Dateiendung ».pde«. Zu einem Programm (hier »M_3_4_03_TOOL«) können mehrere pde-Files gehören. Es genügt, wenn eines davon geöffnet wird, die anderen Programmteile werden automatisch mitgeöffnet und erscheinen im Editor als Reiter. Manchmal befindet sich ein Ordner mit Namen »data« im Programm-Ordner. Dort befinden sich die Dateien (Schriften, Bilder etc.), die das Programm zusätzlich benötigt. Eine png-Datei zeigt Ihnen einfach eine Vorschau davon, was das Programm macht.

4. Das Programm starten Sie nun mit »Sketch > Run« oder dem Run-Button. Ein neues Fenster (das Display-Fenster) öffnet sich, in dem das Pro-gramm läuft. Die Interaktionen, die im Buch und im Kopf der pde-Datei beschrieben sind, stehen nun zur Verfügung.

5. Das Programm beenden Sie, wenn Sie das Dis-play-Fenster schließen oder den Stopp-Button drücken. Die Änderungen, die Sie im Display vor-genommen haben, gehen damit verloren. Beim nächsten Start beginnt das Programm wieder mit den gleichen Anfangseinstellungen. Was Sie im Programmcode ändern und abspeichern, bleibt natürlich erhalten.

6. Achtung: Manche unserer Programme be nötigen viel Speicher, vor allem wenn hoch-aufgelöste Bilder gespeichert werden sollen. Sie sollten deshalb auf jeden Fall in den Ein-stellungen von Processing »Increase maximum available memory« aktivieren und auf 512 MB oder mehr einstellen. Unter Umständen kann das Speichern von Bildern etwas länger dauern.

7. Weitere Informationen finden Sie hier:# Kap.P.0.0 Überblick über Processing

Das passende Programm zu jedem Kapitel finden Sie leicht über die Dateinamen. Die Programme sind nach den Kapiteln benannt.# S.014 »Die Zusammensetzung der

Programm-Namen«

E.5 Wie nutze ich die Programme?016

Das Programm anwenden

Grundsätzlich muss man nicht programmieren können oder lernen, um etwas von diesem Buch zu haben. Denn jedes Programm kann einfach nur angewendet werden. Im Grundlagenteil ste-hen dafür eine Reihe von Interaktionsmöglich-keiten zur Verfügung, mit denen das entstehende Bild modifiziert und abspeichert werden kann.

Im Teil »Komplexe Methoden« verfügen die fina-len Programme über ein Parameter-Menü mit Reglern und Buttons. Mit diesem Menü können Sie sehr variantenreiche Bilder erzeugen und diese in hoher Qualität speichern, ohne sich mit dem Code beschäftigen zu müssen.

Output aus dem Programm

Je nach Programm können hochaufgelöste Bilder oder Vektordaten gespeichert werden. Diese wer-den in denselben Ordner gespeichert, in dem auch die pde-Datei liegt. Die gespeicherten Dateien bekommen einen eindeutigen Namen, der sich aus Datum und Uhrzeit zusammensetzt. Dadurch können Sie leicht nachvollziehen, in welcher Rei-henfolge die Bilder entstanden sind.

In den Programmen des Kapitels Farbpaletten kön nen zusätzlich noch Farbpaletten im Format ASE für Adobe-Anwendungen gespeichert werden.

Das Speichern von Vektordaten (editierbares PDF) erfolgt meistens einfach durch Drücken der Taste P. In einigen Programmen ist es aber erforder-lich, das PDF gewissermaßen aufzunehmen (das Recording wird mit R gestartet und mit E beendet). Hierbei werden alle nach dem Start des Recordings erzeugten Elemente live in ein PDF geschrieben, welches beim Ende des Recordings finalisiert wird.

Das Programm verändern

Als kleinen Einstieg in die Programmierung kön-nen Sie im Code einfach bestimmte Parameter verändern. Dadurch lassen sich noch mehr Varian-ten erzeugen als die, die schon durch Maus- und Tastaturinteraktion möglich sind. Die Zeilen, in denen es sich lohnt, Parameter zu verändern, sind mit //// gekennzeichnet und dahinter ein sinn-voller Wertebereich angegeben.

Neue Programme machen

Es ist ausdrücklich erwünscht, die bestehenden Programme zu verändern oder aus deren Baustei-nen neue zu schaffen.

Dabei hilft die generativedesign-Library. Durch diese werden viele nützliche Funktionen und Klas-sen bereitgestellt.

Die Dokumentation der Library finden Sie auf # www.generative-gestaltung.de, zusätzlich gibt es Kurzreferenzen für die Klassen am Ende der Kapitel, in denen sie verwendet werden.

Die Programme zu diesem Buch haben wir unter die Apache-Lizenz gestellt. Im Wesentlichen bedeutet das, dass Sie die Programme frei in jedem Umfeld verwen-den, modifizieren und verteilen dürfen.

017

Download der Programme und der Library

Die generativedesign-Library und alle Programme aus dem Buch stehen zusammengefasst in einem Daten-Paket zum Download zur Verfügung.

Codedetailseiten

Wenn Sie auf der Codeübersichtsseite ein Pro-gramm anklicken, dann landen Sie auf einer Codedetailseite, welche Ihnen ein Bild oder Video des Programms zeigt und die dazugehörigen Sei-ten im Buch, auf denen das Programm erklärt ist. Außerdem können Sie hier den Code dazu ein-zeln herunterladen, wenn Sie nicht das gesamte Codepaket herunterladen wollen.

Kommentare

Über die Möglichkeit, bei jedem Beispiel Kom-mentare zu hinterlassen, werden Sie mit den anderen Lesern dieses Buches vernetzt und haben die Möglichkeit, sich mit den anderen Anwendern auszutauschen, Tipps zu erhalten oder zu geben und Ihre Weiterentwicklungen vorzustellen.

Was bietet mir www.generative-gestaltung.de?E.6

$

E.6 Was bietet mir www.generative-gestaltung.de?018

News

In den News erfahren Sie sofort auf einen Blick, was es Neues gibt: von aktuellen Updates und Bugfixes in den Codes bis hin zu interessanten Terminen zum Thema generative Gestaltung.

Weblinks

Die Linkschnellsuche dient zum einen Ihrem Komfort (Sie geben den Zahlencode des gewünschten Links in die Suchmaske ein und werden sofort zur richtigen Website weiterge-leitet), zum anderen kann die Linksammlung so immer aktuell gehalten werden, da Links gemel-det werden können, die so nicht mehr existieren.

Unter dem Menüpunkt »Links« sind alle im Buch vorkommenden Links nach Kapiteln sortiert aufgelistet. Sie sind jeweils mit einer kurzen Beschreibung und einem Verweis auf das ent-sprechende Buchkapitel, in dem sie vorkommen, versehen.

Gallery

Die Gallery bietet Ihnen die Möglichkeit, die Bil-der hochzuladen, die Sie mit den Programmen oder mit Ihren eigenen Weiterentwicklungen der Programme erstellt haben. Oder Sie können sich dort auch einfach von den Bildern anderer User inspirieren lassen.

019

Download der Programme und der Library

Die generativedesign-Library und alle Programme aus dem Buch stehen zusammengefasst in einem Daten-Paket zum Download zur Verfügung.

Codedetailseiten

Wenn Sie auf der Codeübersichtsseite ein Pro-gramm anklicken, dann landen Sie auf einer Codedetailseite, welche Ihnen ein Bild oder Video des Programms zeigt und die dazugehörigen Sei-ten im Buch, auf denen das Programm erklärt ist. Außerdem können Sie hier den Code dazu ein-zeln herunterladen, wenn Sie nicht das gesamte Codepaket herunterladen wollen.

Kommentare

Über die Möglichkeit, bei jedem Beispiel Kom-mentare zu hinterlassen, werden Sie mit den anderen Lesern dieses Buches vernetzt und haben die Möglichkeit, sich mit den anderen Anwendern auszutauschen, Tipps zu erhalten oder zu geben und Ihre Weiterentwicklungen vorzustellen.

Was bietet mir www.generative-gestaltung.de?E.6

$

E.6 Was bietet mir www.generative-gestaltung.de?018

News

In den News erfahren Sie sofort auf einen Blick, was es Neues gibt: von aktuellen Updates und Bugfixes in den Codes bis hin zu interessanten Terminen zum Thema generative Gestaltung.

Weblinks

Die Linkschnellsuche dient zum einen Ihrem Komfort (Sie geben den Zahlencode des gewünschten Links in die Suchmaske ein und werden sofort zur richtigen Website weiterge-leitet), zum anderen kann die Linksammlung so immer aktuell gehalten werden, da Links gemel-det werden können, die so nicht mehr existieren.

Unter dem Menüpunkt »Links« sind alle im Buch vorkommenden Links nach Kapiteln sortiert aufgelistet. Sie sind jeweils mit einer kurzen Beschreibung und einem Verweis auf das ent-sprechende Buchkapitel, in dem sie vorkommen, versehen.

Gallery

Die Gallery bietet Ihnen die Möglichkeit, die Bil-der hochzuladen, die Sie mit den Programmen oder mit Ihren eigenen Weiterentwicklungen der Programme erstellt haben. Oder Sie können sich dort auch einfach von den Bildern anderer User inspirieren lassen.

019