generative gestaltung entwerfen,programmieren,visualisierenmit processing
Post on 26-Mar-2016
272 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related