Generative Gestaltung Entwerfen,Programmieren,Visualisierenmit Processing by Verlag Hermann Schmidt

GENERATIVE GESTALTUNG Entwerfen Programmieren Visualisieren Hartmut Bohnacker Benedikt GroĂ&#x; Julia Laub Claudius Lazzeroni (Hrsg.)

Verlag Hermann Schmidt Mainz

# 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 Graﬁk auf dem Cover besteht aus einer

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

großen Anzahl farbiger Bänder. Jedes Band

ﬁk auf dem Cover generiert wurde, liegt dem

repräsentiert einen Teil einer Buchseite und

Code-Paket bei, das auf www.generative-

benutzt dessen Farben, die zusätzlich nach

gestaltung.de zum Download bereit steht.

Helligkeit sortiert wurden. Dazu wurden die drei Hauptteile des Buches als PNGs expor-

Dieses Programm ist allerdings nicht als

tiert, in Processing eingelesen und wie in

didaktisches Beispiel gedacht und nur für

�Farbpaletten aus Bildern� # Kap.P.1.2.2

erfahrene Anwender verständlich. Es zeigt

ausgewertet.

aber ganz gut, wie aus vielen (relativ einfachen) Einzeltechniken eine komplexe Graﬁk

Auf der Vorderseite des Buches laufen die

entstehen kann. Außerdem soll es als Fund-

Bänder entlang einer Bézierkurve auf die

grube für kleinere Codeteile dienen.

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 Datenstrukturen� # Kap.M.6 gezeigt ausgelesen.

S./// Projek t-Sammlung

P./// Grundlegend eP P.1 Farbe

r inz ip i e n

P.2 Form

P.3 Typo

P.4 Bild

M./// Kom plexe Method en M.1 Zufall u nd Rausche n

M.2 Schwi ngung

sfiguren

M.3 Form ulierte Kรถr

per

M.4 Attr aktoren M.5 Bau mdiagramme M.6 D y n amische

Datenstrukturen

GENERATIVE GESTALTUNG Entwerfen Programmieren Visualisieren Hartmut Bohnacker Benedikt GroĂ&#x; Julia Laub Herausgeber Claudius Lazzeroni Verlag Hermann Schmidt, Mainz

E.1

Editorial Generative Gestaltung gilt seit einigen Jahren als Geheimtipp auf Medienkunstfestivals und Konferenzen. Im Wechselspiel zwischen komplexer Information, grafischer Gestaltung und den Möglichkeiten der Programmierung entstehen neue, faszinierende visuelle Welten, die Korrelationen 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 verborgen: 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 gestaltende Mensch passte sich also an das System an. In der generativen Gestaltung wird aus dem designgeschulten Anwender vorgefertigter digitaler Werkzeuge der Programmierer eines individuellen 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 »visuellen Output« generativer Gestaltung beobachtet, aber erst in den intensiven Gesprächen mit den Autoren wurde uns dieser Paradigmenwechsel 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 entscheidenden 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

008

E.1 Editorial

Programmierer zu einer Erweiterung des eigenen Horizonts ein und teilen 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 generativen Gestaltung erkennen und nutzen und wünschen Ihnen eine faszinierende Reise in eine gestalterisch neue Welt! Herzlich, Karin und Bertram Schmidt-Friderichs

009

E.2

Inhaltsverzeichnis E./// Einführung

P.2 Form

# S.008

# S.200

P.2.0 Hallo Form E.1 Editorial

P.2.1 Raster

# S.008

E.2 Inhaltsverzeichnis

# S.202

# S.206

P.2.1.1 Anordnung im Raster

# S.010

E.3 Bildübersicht # S.012

# S.206

P.2.1.2 Verschiebung im Raster

E.4 Wie lese ich dieses Buch?

E.5 Wie nutze ich die Programme?

P.2.2 Agenten

# S.016

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

# S.018

# S.214

# 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

ProjektS./// Sammlung

# S.210

P.2.1.3 Komplexes Modul im Raster

# S.014

# S.224

P.2.2.4 Wachstumsstruktur aus Agenten

# S.228

P.2.2.5 Verdichtungsstruktur aus Agenten P.2.3 Zeichnen

# S.020

# S.232

# S.236

P.2.3.1 Zeichnen mit animiertem Pinsel

# S.236

In der Projekt-Sammlung werden 37 Arbeiten verschiedener

P.2.3.2 Relation und Abstand beim Zeichnen

Medienkünstler und Designer aus dem Bereich der gene-

P.2.3.3 Zeichnen mit Typo

rativen Gestaltung vorgestellt. Zum einen als Inspirations-

P.2.3.4 Zeichnen mit elastischem Pinsel

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

P.2.3.5 Zeichnen mit dem Stifttablett

Themenfeld.

P.2.3.6 Zeichnen mit komplexen Modulen P.3 Typo

Grundlegende P./// Prinzipien # S.164

P.3.1 Text

# S.258

P.3.1.2 Text als Bauplan

Farbe, Form, Typo und Bild. # S.166

P.0.0 Überblick über Processing P.0.1 Sprachelemente

P.3.1.4 Textdiagramm

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

# S.168

P.4 Bild

# S.178

# S.286

P.4.0 Hallo Bild

# S.288

P.4.1 Bildausschnitte

# S.180

P.1.0 Hallo Farbe

P.1.1.2 Farbspektrum im Kreis

P.4.2 Bildersammlung

# S.184

P.4.3 Pixelwerte

# S.300

# S.302

P.1.2.2 Farbpaletten aus Bildern

# S.190

P.4.3.1 Grafik aus Pixelwerten

P.1.2.3 Farbpaletten aus Regeln

# S.194

P.4.3.2 Typo aus Pixelwerten P.4.3.3 Echtzeit-Pixelwerte

E.2 Inhaltsverzeichnis

# S.296

P.4.2.2 Zeitbasierte Bildersammlung # S.188

# S.294

# S.296

P.4.2.1 Collage aus Bildersammlung

# S.186

# S.188

P.1.2.1 Farbpaletten durch Interpolation

010

# S.290

P.4.1.2 Rückkopplung von Bildausschnitten

# S.184

P.1.1.1 Farbspektrum im Raster P.1.2 Farbpaletten

# S.290

P.4.1.1 Bildausschnitte im Raster

# S.182

P.1.1 Farbspektrum

# S.272

# S.276

# S.170

P.0.2 Schön programmieren P.1 Farbe

# S.260

# S.262

P.3.1.3 Textbild # S.266 P.3.2 Schriftkontur

P.0 Processing-Einführung

# S.252

# S.260

P.3.1.1 Zeitbasiertes Schreiben von Text

generativen Gestaltung in den vier Gestaltungsbereichen

# S.244

# S.248

# S.256

P.3.0 Hallo Typo

Dieser Teil vermittelt Ihnen grundlegende Prinzipien der

# S.240

# S.242

# S.302

# S.308

# S.312

Komplexe M./// Methoden

M.5 Baumdiagramme # S.318

M.5.1 Rekursion

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

M.1.0 Zufall und Rauschen – Übersicht M.1.1 Zufall und Ausgangsbedingung

# S.322

# S.324

# S.325

M.1.5 Verrauschte Bewegung M.1.6 Agenten im Raum M.2 Schwingungsfiguren

M.5.3 Sunburst-Diagramme M.5.4 Sunburst aus Linien M.5.5 Das Sunburst-Tool

# S.330

# S.422

# S.423

M.6.1 Force Directed Layout

# S.346 # S.348

M.6.2 Daten aus dem Internet

A./// Anhang

# S.434

# S.436

M.6.6 Fischaugen-Projektion

M.2.0 Schwingungsfiguren – Übersicht M.2.1 Harmonische Schwingungen

# S.432

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

M.6.5 Semantische Textanalyse

# S.332

# S.415

# S.417

# S.443

M.6.4 Größenverhältnisse visualisieren

# S.342

M.2.2 Lissajous-Figuren

M.5.2 Dateien von der Festplatte einlesen

M.6.3 Daten im Force Directed Layout

M.1.3 Rauschen versus Zufall # S.326 M.1.4 Verrauschte Landschaften

# S.412

# S.414

M.6 Dynamische Datenstrukturen

# S.320

M.1.2 Zufall und Ordnung

# S.410

M.5.0 Baumdiagramme – Übersicht

# S.445

# S.448

# S.454

# S.458

# S.350

Die Reflexion ist der zentrale Teil des Anhangs.

# S.351

M.2.3 Modulierte Lissajous-Figuren

# S.353

M.2.4 Dreidimensionale Lissajous-Figuren

# S.354

Dort fassen wir unsere Gedanken zum veränderten Entwurfsprozess und den neuen Möglichkeiten der

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

generativen Gestaltung zusammen, bringen sie

M.2.6 Ein Zeichenwerkzeug

mit unseren Beispielprogrammen in Verbindung und

# S.364

geben einen Ausblick auf zukünftige Entwicklungen. M.3 Formulierte Körper

# S.368

M.3.0 Formulierte Körper – Übersicht M.3.1 Gitternetze anlegen

# S.370

A.0 Reflexion

# S.460

A.1 Stichwortregister

# S.372

# S.466

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

A.2 Literaturverzeichnis

M.3.3 Die Mesh-Klasse

A.3 Die Autoren

# S.377

M.3.4 Gitternetze dekonstruieren M.3.5 Eigene Formen definieren

M.3.6 Kurzreferenz Mesh-Klasse M.4 Attraktoren

# S.378

# S.388 # S.389

A.4 Wir sagen Danke

# S.471

A.5 Adressverzeichnis A.6 Impressum

# S.468

# S.470

# S.472

# S.473

# S.390

M.4.0 Attraktoren – Übersicht M.4.1 Die Nodes

# S.392

# 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

011

E.3

BildĂźbersicht P./// Grundlegende Prinzipien # S.164

P.1 Farbe

# S.180

# S.183

# S.184

# S.186

# S.189

# S.192

# S.196

P.2 Form

1101

1111 H

1111 D

1111 B

1110 A

0111 B

0100

# S.199

# S.200

# S.203

# S.204

# S.207

# S.209

# S.211

# S.212

# S.214

# S.216

# S.219

# S.223

# S.224

# S.241

# S.243

# S.245

# S.231

13 1101

# S.197

1011 A

1110 C

# S.232 A

# S.235

1111 A

0111 H

0111 A

1110 A

1011 A

1111 A

0101

0111 A

1110 A

1011 A

1110 C

0010 G

0011 H

1101

1100

1111 F

1100

1001

0111 A

1110 G

1001

1111 A

1111 C

1111 A

0111 H

1111 A

1111 B

0111 B

1111 A

1111 H

1111 A

1100

1011 A

1101

1111 F

1101

1111 A

1110 A

1001

1100

0011 A

0111 H

0100

P.3

10 D

1010 C

1111 G

0101

0110 B

0000

1010 G

1101

1111 A

0011 A

0101

1110 A

1010 G

1011 A

1101

1111 A

1101

0111 E

1111 G

0100

1001

1100

0010 A

1001

1101

0111 H

0100

1011 H

0100

1101

0111 D

1110 D

1010 F

1111 F

0101

1111 F

1001

4 0100

8 F

1000

1110 C

1010 A

1011 A

1110 F

0011 H

1110 B

1010 D

1010 H

1011 F

1101

0111 A

1101

0111 A

0101

0111 H

1111 A

1111 E

0111 B

0101

0111 D

1101

1110 B

0001

0111 A

1111 C

0101

0110 G

1011 E

0110 G

1010 C

1011 G

1110 E

H 4

0100

1010 F

8 1000

# S.248 F

8 G

1000

1001

0100

0000

0111 E

1001

1111 F

1111 B

1101

1110 G

1010 D

# S.268

# S.250

0111 H

0110 F

0000

0101

1111 F

0000

1001

H 6

0110 C

1011 C

1100

# S.252

1001

1100

1000

1001

0100

Typo

9 1001

0001

0011 A

1010 A

0010 G

# S.238

3 0011 C

1000

C 0

# S.256

1000

0001

1100

1001

1100

0000

& '

) ! ! ! ! ! ) " # ! " # ! # % ! &! $ ) ! !

! # S.259

(

# S.261

# S.264

# S.270

# 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

P.4 Bild

012

E.3 BildĂźbersicht

M./// Komplexe Methoden # S.318

M.1 Zufall und Rauschen

# S.320

# S.323

# S.329

# S.331

# S.334

# S.335

# S.337

# S.349

# S.355

# S.357

M.2 Schwingungsfiguren

# S.339

# S.340

# S.345

# S.346

M.3 Formulierte Kรถrper

# S.359

# S.360

# S.363

# S.365

# S.367

# S.368

# S.371

# S.379

# S.380

# S.381

# S.383

# S.384

# S.385

# S.386

# S.393

# S.400

# S.401

# S.402

# S.404

# S.405

# S.413

# S.421

# S.424

# S.426

M.4 Attraktoren

# S.390

M.5 Baumdiagramme

# S.406

# S.407

# S.410

M.6 Dynamische Datenstrukturen

# S.428

# S.429

# S.430

# S.431

# S.432

# S.435

# S.446

# S.447

# S.451

# S.452

# S.453

# S.456

# S.457

013

E.4

Wie lese ich dieses Buch? P.2.2.1

KapitelĂźberschrift

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 weitere Versionen des Programms (_02, _03 usw.), diese stellen Varianten des ersten Programms dar und sind oft etwas komplexer.

$!*(,)

.#$

"'/(114$(1$

4$(0$ #$0 /-&/ ++0 $/)*7/1 ($ /)*7/2,&

!$6($'1 0("' (++$/ ,2/ 2% #($ /-&/ ++

2/"'+$00$/

Maus:

(,)!$0"'/$(!2,&

204 )8,,$, 3-+ 2,)1(-,0./(,6(. # 0

3$/0(-, #$0 .(1$*0 ($ /( ,1$, '($/ $/)*7/1 4(/# !4$("'$,

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 Parameter an die Position des Mauszeigers gebunden

$!$, #$, **201/ 1(-,$, 4(/# (, )2/6$, $51 !0"',(11$, #($ **&$+$(,$ 2,)1(-,0

Der Kopfbereich des Codes

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.

Ziehen links: Module zeichnen â&#x20AC;˘ Klick rechts: Module lĂśschen

.#$

Tasten: G: Raster anzeigen ein/aus â&#x20AC;˘ G: Modulwerte anzeigen ein/aus â&#x20AC;˘ 1 â&#x20AC;&#x201C; 8: Tileset auswĂ¤hlen P: PDF speichern â&#x20AC;˘ S: PNG speichern â&#x20AC;˘ C: Farbpalette speichern

if (direction == NORTH NORTH) {

if (y = 0) y = height;

$(,6$*,$/ -#$ !0"',(11$

}

# S.017 ÂťDas Programm anwendenÂŤ.

*$(,$ **201/ 1(-,$, ,$!$, #$+ -#$ 3$/ #$21*("'$, '($/ 2,# # #($ 2,)1(-,04$(0$

y -= distance;

else if (direction == NORTHEAST NORTHEAST) { x += distance; if (x >= width) x = 0; }

Der Codeblock

2/ !$00$/$, 2-/#,2,& 3$/4$(01 $(,$ (,($

int stepSize = 1;

2% #($ /("'1(&$, -#$6$(*$, ("'1(&$ 0

int diameter = 1;

0 &$, 4$/#$, #2/"' $(,$ (,1$/*$&2,& '$/

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 versehen. # S.017 ÂťDas Programm anwendenďż˝ Codemarkierungen heben die wichtigsten Stellen im Code hervor, sodass Sie die ErklĂ¤rungen leichter zuordnen kĂśnnen. Das Syntax-Highlighting verdeutlicht, welche Begriffe Sprachelemente von Processing sind.

for (int i=0; i<circleResolution; i++){ x[i] += random(-stepSize,stepSize)*distorsionFactor + offsetX*100; y[i] += random(-stepSize,stepSize)*distorsionFactor

3-/&$'-!$, , + ,"'$, 1$**$, +200 #$/ -#$ %9/0 2"' 2+!/-"'$, 4$/#$, -!4-'* $/ (+ /- &/ ++%$,01$/ (, $(,$/ $(*$ 01$'1

+ offsetY*100; /$( 2,)1$ 6$(&$, , # 00 '($/ -#$6$(*$,

...

20&$* 00$, 42/#$,

}

456

P.2 Kapitel â&#x20AC;&#x201C; P.2.2 Unterkapitel â&#x20AC;&#x201C; P.2.2.1 KapitelĂźberschrift

Die Zusammensetzung der Programm-Namen

Die drei Punkte bedeuten, dass hier Code ausgelassen wurde.

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

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

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 $

# P_2_1_1_02 .pde

Bei manchen Dateien stehen noch die Begriffe TOOL (komplexe Anwendung mit MenĂź) oder TABLET (komplexe Anwendung fĂźr ein Stifttablett) hinter der Versionsnummer.

014

E.4 Wie lese ich dieses Buch?

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 Programm, mit dem das Bild erzeugt wurde.

/)*7/2,& #$0 (*#$0 2,# $0"'/$(!2,& 4($ $0 (+ /-&/ ++ $/6$2&1 42/#$ .#$

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 # Kap.P.1.1.2 # W.345

Verweis auf eine Seite Verweis auf ein Kapitel 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ÂŤ

015

E.5

Wie nutze ich die Programme? 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 neueren Versionen funktionieren. # www.processing.org

2. Laden Sie das Paket mit den Libraries und Programmen zum Buch herunter. Die Libraries müssen 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 Programm 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 Display-Fenster schließen oder den Stopp-Button drücken. Die Änderungen, die Sie im Display vorgenommen 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 benötigen viel Speicher, vor allem wenn hochaufgelöste Bilder gespeichert werden sollen. Sie sollten deshalb auf jeden Fall in den Einstellungen 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

In vielen Programmen wird dieser Bereich (die Processing-Konsole) genutzt, um Statusinformationen (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.

016

E.5 Wie nutze ich die Programme?

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«

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

Das Programm anwenden

Output aus dem Programm

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 stehen dafür eine Reihe von Interaktionsmöglichkeiten zur Verfügung, mit denen das entstehende Bild modifiziert und abspeichert werden kann.

Je nach Programm können hochaufgelöste Bilder oder Vektordaten gespeichert werden. Diese werden 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 Reihenfolge die Bilder entstanden sind.

Im Teil »Komplexe Methoden« verfügen die finalen 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.

In den Programmen des Kapitels Farbpaletten können 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 erforderlich, 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önnen Sie im Code einfach bestimmte Parameter verändern. Dadurch lassen sich noch mehr Varianten 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 sinnvoller Wertebereich angegeben.

Neue Programme machen Es ist ausdrücklich erwünscht, die bestehenden Programme zu verändern oder aus deren Bausteinen neue zu schaffen. Dabei hilft die generativedesign-Library. Durch diese werden viele nützliche Funktionen und Klassen 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.

017

E.6

Was bietet mir www.generative-gestaltung.de? $

Codedetailseiten Wenn Sie auf der Codeübersichtsseite ein Programm anklicken, dann landen Sie auf einer Codedetailseite, welche Ihnen ein Bild oder Video des Programms zeigt und die dazugehörigen Seiten im Buch, auf denen das Programm erklärt ist. Außerdem können Sie hier den Code dazu einzeln herunterladen, wenn Sie nicht das gesamte Codepaket herunterladen wollen. Download der Programme und der Library Kommentare Über die Möglichkeit, bei jedem Beispiel Kommentare 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.

018

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

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

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 weitergeleitet), zum anderen kann die Linksammlung so immer aktuell gehalten werden, da Links gemeldet 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 entsprechende Buchkapitel, in dem sie vorkommen, versehen.

Gallery Die Gallery bietet Ihnen die Möglichkeit, die Bilder 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.

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.

019

Generative Gestaltung ­ Entwerfen,Programmieren,Visualisierenmit Processing

Generative Gestaltung Entwerfen,Programmieren,Visualisierenmit Processing