Layout Online.indd - Creative-Code

1
1
Konzeption, Gestaltung, Satz: Florian Paschke
Schriften: FF Mark PRO
// CREATIVE CODE
//
florian paschke
Alle Rechte vorbehalten.
Dieses Buch oder Teile des Buches dürfen nicht vervielfältigt,
in Datenbanken gespeichert oder in irgendeiner Form übertragen werden ohne die
schriftliche Genehmigung des Autors.
Entstanden an der Bauhaus-Universität Weimar
im Rahmen der Bachelorarbeit
„Experimentelle generative Gestaltung“
Betreuer:
Prof. Markus Weisbeck
Ricarda Löser
Studiengang:
Viuselle Kommunikation
© 2014 Florian Paschke
2
2
// INHALT
// INTENSION & RELEVANZ 6
// THEMENFINDUNG 8
// DIE FORM DER PRÄSENTATION
// GESTALTUNG DES LAYOUTS
// WAS IST GENERATIVE GESTALTUNG ?
10
12
14
// ENTWICKLUNG GENERATIVER GESTALTUNG
16
// WAS IST PROCESSING ?
20
// PROZESS UND HERANGEHENSWEISE
22
// GLOSSAR 24
// PROJEKTSAMMLUNG 32
// ZEIT 34
// ON_THE_LINE 36
// CENTURY_CIRCLE 38
// BAUHAUS 40
// AUDIOVISUALISIERUNGEN 42
// MIC_TO_SCREEN 44
// SPEAKER_GENERATOR 46
// RORSCHACH 48
// CODE AND NATURE 50
// AST 52
// GROW 54
// ENDLOS56
// RE_KUR_SIV 58
// FAZIT60
// QUELLEN62
// BILDVERZEICHNIS63
3
3
// INTENSION UN D RELEVANZ
4
Diese Arbeit, welche meine wahr-
und versucht einen neuen Weg, in den
Ich habe dieses Thema auch gewählt,
Generative Gestaltung umfasst na-
scheinlich
universitären
man die Erfahrungen der „Sackgas-
da ich der Ansicht bin, dass generati-
türlich
Rahmen sein wird, möchte ich noch
se“ wiederum einfließen lassen kann,
ve Gestaltung ein sehr großes Poten-
Hilfsprogramme, ich möchte mich
einmal nutzen um experimentell und
sodass am Ende nichts umsonst war.
tial in sich birgt und in den kommen-
hierbei insebsondere der Program-
forschend zu arbeiten.
Dieses Projekt verfolgt keinen be-
den Jahren immer mehr an Relevanz
miersprache und Umgebung von Pro-
Wie der Titel des Projekts es bereits
stimmten Zweck und zielt auch auf
gewinnen wird, insbesondere in der
cessing widmen. Auch „vvvv“ oder
vermuten lässt geht es um das kre-
kein bestimmtes Anwendungsgebiet.
Kreativ-Szene sowie im Bereich der
„NodeBox“, wären sehr interessante
ative Arbeiten mit Code, also Pro-
Ich möchte hiermit vielmehr mei-
Medienkunst. Hinzu kommt das es
Umgebungen gewesen. Jedoch wollte
grammierung. Beinhalten soll dieses
ne Fähigkeiten und Wissensgrenzen
eine neue unkonventionelle Metho-
ich bei all dem Unberechenbaren auf
Projekt verschiedene Themen, welche
um ein neues Thema erweitern und
de darstellt, den Entwurfsprozess
etwas zurückgreifen, was auch in ei-
sowohl abstrakt als auch der Natur
erwarte vom Ergebnis dieser Arbeit
grundlegend zu verändern. Anders als
nen Rahmen der Bearbeitungszeit der
entlehnt sind. Im Speziellen sind da-
kein Falsch oder Richtig oder „die eine
man es von der Adobe Creative Suite,
Bachelorarbeit passt und bei dem der
mit unter anderem Rekursionen, Algo-
Arbeit“, sondern vielmehr einen ganz-
Cinema 4D etc. kennt geht es nicht
Weg aus der „Sackgasse“ raus nicht
rithmen, Trigonometrie und Fraktale
heitlichen Lernprozess, der aus vielen
mehr darum, mit einem vorgefertig-
so weit ist. Processing ist inzwischen
gemeint. Das Spannende beim For-
kleinen Bausteinen besteht. Oftmals
ten Werkzeug eine Linie zu zeichnen.
in der englischen Literatur gut doku-
schen ist, dass man am Anfang nie
sind solche Experimente die Grundla-
Sondern das Werkzeug selbst zu er-
mentiert, sodass man sich bei Fragen
genau weiß, wohin einen die Reise
ge für darauf folgende Arbeiten, wo-
zeugen und auf seine eigenen Bedürf-
oder Problemen gut selbst behelfen
führt. Ist man in einer „Sackgasse“
bei dann die erlernten Prozesse zum
nisse abzustimmen.
kann.
gelandet, geht man 2 Schritte zurück
Tragen kommen.
letzte
im
verschiedene
Formen
und
4
Mein Interesse für Processing und ge-
teilweise stark voneinander, daher
nerative Gestaltung hat ein bereits
habe ich mich dazu entschlossen,
schon 2 Jahre zurückliegendes Pro-
diese in 3 Kategorien einzuteilen. Die
jekt zum Thema „Zeit“ geweckt. Da-
erste Kategorie befasst sich mit dem
mals habe ich mich jedoch nur ober-
Thema Zeit, d. h. im Speziellen um
flächlich damit beschäftigt. Danach
verschiedene
folgte leider keine Möglichkeit mehr,
von Zeit. Die zweite Kategorie be-
darauf zurück zu kommen, bis es um
inhaltet die Weiterverarbeitung von
die Themenwahl für diese Bachelor-
Musik bzw. Tönen mit Hilfe eines pro-
arbeit ging. Da ich mich diesem The-
grammierten Equalizers zu Grafiken.
ma gerne noch mal widmen wollte,
Die dritte Kategorie befasst sich mit
bot es sich an, dieses hierfür zu nut-
Formen und Prozessen die aus der
zen. Insbesondere ein Buch mit dem
Natur entlehnt sind. Hervorzuheben
Titel „FORM + CODE – IN DESIGN,
ist dabei das Buch „Nature of Code“
ART AND ARCHITECTURE“ von Reas,
von Daniel Shiffman welches mir sehr
McWilliams und Lust diente mir dabei
geholfen hat, gewisse Prozesse zu
als Inspiration.
verstehen und nachzuvollziehen.
#1 Andy Lomas: Aggregation 4. 2005
#4 Alexander Calder: Arc of Petals. 1941
Quelle: Reas, Casey & McWilliams, Chandler: FORM + CODE - In Design, Art and Architecture
// THEMENFINDUNG
Darstellungsformen
#2 Aristid Lindenmayer: L-Systems. 1968
#5 Jonathan McCabe: MSRSTP
(Multi-ScaleRadially Symmetric Turing Patterns). 2009
Die Programme unterscheiden sich
#3 Ben F. Laposky: Electronic Abstraction 6. 1952
5
5
// DIE FORM DER
// PRÄSENTATION
Als Form der Präsentation wurde
Der Aufbau sieht wie folgt aus: Die
die Aneinanderreihung der einzelnen
Website besitzt nur eine Seite. Auf
Programme auf einer Internetseite
dieser sind alle Programme abrufbar.
gewählt, da Processing letztendlich
Der Nutzer hat somit die möglichkeit
aus dem Kontext der Programmier-
sich diese in Form eines Videos anzu-
sprache JAVA entstand und somit
gucken, bei einer Live Demo sie selber
wieder in seine ursprüngliche Umge-
auszuprobieren oder aber für OSX
bung zurückgeführt wird. Ein weite-
oder Windows herunterzuladen. Mit-
rer wichtiger Aspekt ist, dass nur so
tels eines kleinen Navigationsmenüs
die Benutzererfahrung gewährleistet
ist es möglich die Kategorien direkt
werden kann, was bei einer Video-
anzuwählen. Darüber hinaus verwen-
präsentation oder der Darstellung in
det diese Seite das Parallax Scrolling,
gedruckter Form nicht möglich wäre.
bei dem der Benutzer das Gefühl hat
Die Konsequenz daraus ist logischer-
sich Parallel mit dem Bild mitzubewe-
weise, das dieses Projekt somit auch
gen. Ansonsten ist die Seite sehr ein-
zugänlich für die Öffentlichkeit ist. Es
fach gehalten um den Fokus auf die
bedarf also keiner großen Publikation.
Programme zu richten.
www.creative-code.biz
6
6
// GESTALTUNG
// DES LAYOUTS
Die Gestaltung dieser Dokumentati-
Die hierfür verwendete Schrift FF
on ist absichtlicher Weise in Schwarz
Mark Pro wurde im Jahr 2013 veröf-
und Weiß gehalten, da die Ergebnis-
fentlicht und ist eine geometrische
se der Experimente ausschließlich in
serifenlose
Schwarz und Weiß ausgegeben wur-
unter der Leitung von Erik Spieker-
den. Darüber hinaus war diese Duali-
mann und orientiert sich an erfolgrei-
tät sehr passend aufgrund der Tatsa-
chen historischen Schriften, wie der
che, dass schwarz und weiß mit dem
Lucida, Futura oder Kabel. Dabei ist
Binärcode 1 und 0 gleichgesetzt wer-
sie jedoch aufgrund ihrer größeren
den kann und somit eine Verbindung
Mittellänge, breiteren Versalien und
zwischen Realität und Virtualität ge-
den offeneren Formen zeitgemäßer
schaffen wird.
und durch die erhöhte Lesbarkeit bes-
Überschriften
werden
durch
Sie
entstand
Quelle: http://www.fontblog.de/premiere-ff-mark-geometrische-sans-fuer-unsere-zeit
Die
Schrift.
ser einsetzbar, sowohl für Überschrif-
zwei Schrägstriche eingeleitet, diese
ten, wie auch im Fließtext.1
„Slashs“ werden beim Programmie-
Diese Schrift wurde gewählt, da sie
ren verwendet, um hinter einer Code-
sich mit ihren geometrischen Formen
zeile im Editor ein Kommentar zu hin-
an der Idee des Bauhauses orientiert
terlassen. Das heißt alles was hinter
und ähnlich wie die entstandenen
zwei Schrägstrichen steht, wird vom
Grafiken einen gewissen Minimalis-
Compiler ignoriert und nicht als Code
mus und Einfachheit ausstrahlt.
angesehen, sondern als eine Form der
Dokumentation.
Schriftfamilie FF Mark Pro
1
7
Vgl. http://www.fontblog.de/premiere-ff-mark-geometrische-sans-fuer-unsere-zeit
7
// WAS IST GENERATIVE GESTALTUNG ?
Als generative Gestaltung wird eine
Das generative Gestaltung immer
Entwurfsmethode in unterschiedli-
mehr Bedeutung zugemessen wird,
chen Bereichen der Gestaltung be-
liegt insbesondere an den neuen Ent-
zeichnet. Das Hauptmerkmal ist da-
wicklungsumgebungen, wie z. B. Pro-
bei, dass der Output – was ein Bild,
cessing, VVVV, NodeBox usw. und
Sound, Animation etc. sein kann –
Scriptingmöglichkeiten
durch einen Algorithmus erzeugt wird.
weise die in Adobe InDesign optional
Sie umfasst insbesondere Aufga-
integrierbare Erweiterung Scripto-
benstellungen
Bereichen
grapher), welche auch Gestaltern mit
Design und Architektur. Im Bereich
geringer Programmiererfahrung die
des Kommunikationsdesigns geht es
Möglichkeit bieten, ihre Ideen auf die-
überwiegend um die Erstellung von
se Weise umzusetzen.
Informationsgrafiken,
den
Copyright Hartmut Bohnacker, Julia Laub, Benedikt Groß, Claudius Lazzeroni (2009)
Buch „Generative Gestaltung“, www.generative-gestaltung.de
aus
(beispiels-
Diagrammen
oder flexiblen Erscheinungsbildern. In
der Architektur dient die generative
Gestaltung hauptsächlich der Simulation und Formfindung architektonischer Strukturen.2
Das Prinzip generativer Gestaltung
2
8
Vgl. http://de.wikipedia.org/wiki/Generative_Gestaltung
8
// ENTWICKLUNG GENE RATIVER GESTALTUNG
Anfang der 1960er Jahre begannen
gannen fast zeitgleich in den Jahren
Was jedoch Nake und Nees hervor-
die ersten Wissenschaftler mittels
1963/ 1964 sich mit den ästhetischen
hebt, ist ihr wesentlich konzeptio-
Computer Grafiken zu erzeugen, wel-
Möglichkeiten des Computers ausei-
nellerer Ansatz, da sie über die Pro-
che per Plotterzeichnungen umge-
nander zu setzen. Wohlgemerkt völlig
grammierung von Algorithmen ihre
setzt wurden. Max Bense, Professor
unabhängig voneinander.
Grafiken generierten. In den USA und
für Philosophie und Wissenschafts-
Ebenfalls 1965 stellte Michael Noll
Japan hingegen wurden eingescann-
theorie an der TH Stuttgart war der
in der Howard Wise Gallery in New
te Bilder weiterverarbeitet, was in
Begründer der Informationsästhetik
York seine Werke unter dem Thema
der weiteren Entwicklung als „Picture
und publizierte mehrere Bücher zum
„Computer Generated Pictures“ aus.
Processing“ bekannt wurde. Diese
Thema Kunst und Computer.
Noll war Forscher in den Bell Labs in
beiden grundlegend unterschiedlichen
Eben dieser Max Bense war es, der
Murray Hill, New Jersey. Er entwarf
Ansätze ziehen sich vom Anfang der
die beiden deutschen Pioniere der
die ersten Kunstwerke am Computer,
Entwicklung der Digitalen Kunst bis
„Digitalen Kunst“ Frieder Nake und
welche auf Zufalls-Prozessen basier-
zur Gegenwart hin.7
Georg Nees dazu inspirierte 1965 eine
ten.
Im August 1965 fand in Zagreb ein in-
Ausstellung mit dem Titel „Generati-
Auch in Japan begannen zur selben
ternationales Symposium statt (Com-
ve Computergrafik“ zu realisieren, in
Zeit die ersten Versuche mithilfe des
puters and Visual Research). Dieses
der sie am Computer generierte Plot-
Computers Kunst zu generieren. Ins-
Symposium stellte die Fortsetzung
terzeichnung auf Papier ausstellten.
besondere Masao Komura ist hierbei
einer Ausstellung und Künstlerbewe-
Beide waren Mathematiker und be-
zu erwähnen.6
gung „Tendencije – New Tendencies“
3
4
9
Vgl. Lieser, S. 14
Vgl. ebd., S.17
5
Vgl. ebd., S.17
6
Vgl. ebd., S. 25
3
4
5
7
Vgl. Lieser, S. 14
Frieder Nake: Rechteckschraffuren. 1965
dar. Es wurde computergenerierte
Kunst mit Zeichnungen und Design in
Verbindung gebracht, wobei alle Arbeiten ähnliche konzeptionelle Ansätze aufwiesen. Der Stellenwert dieser
Bewegung wurde erst in der heutigen
Zeit erkannt.
9
Mit dem Durchbruch des World Wide
Web’s 1994 war es nun möglich eine
internationale Community zu schaffen die auf kurzem Wege miteinander
kommunizieren und ihre Gedanken
austauschen konnte. Doch trotz der
verbesserten grafischen Möglichkeiten der Computer waren die Ergebnisse oftmals ästhetisch noch nicht
Masao Komura, Makato Ohtake: Running Cola is Africa. 1967 - 68
sehr ansprechend. Erst mit der Jahr-
Durch diese ersten Computergrafi-
tausendwende und der Entwicklung
ken und -zeichnungen war ein neuer
leistungsstarker Rechner und Rende-
Grundstein in der Entwicklung der
rengines sowie dem entstehen experi-
zeitgenössischen Kunst gelegt, wel-
menteller Programme, wie Processing
cher das ästhetische Verständnis in
oder vvvv, etablierte sich die Genera-
Alltag und Kultur veränderte, ähnlich
tive Gestaltung sowohl bei Künstlern,
wie es bereits die Fotografie bewerk-
als auch bei Designern.11
stelligt hatte.
Durch die raschen technischen Weiterentwicklungen in den 80er und
90er Jahren, beispielsweise durch
den C64 oder den Macintosh ging
der Trend weg von den frühen Plotterzeichnungen. Das „Picture Processing“ wurde durch die inzwischen
vorhandenen grafischen Oberflächen
immer populärer.9 10
10
8
Vgl. Lieser, S. 22
9
Vgl. ebd., S. 30
10
Vgl. ebd., S. 32
11
Vgl. ebd., S. 34
Masao Komura, Makato Ohtake: Return to Square. 1967 - 68
Georg Nees: K27 Gewebe, Störung zentriert. 1965 - 68
10
// WAS IST
// PROCESSING?
Das Processing-Projekt wurde 2001
Programme, welche in Processing er-
das einbinden zusätzlicher Bibliothe-
von Ben Fry und Casey Reas am Mas-
stellt werden, tragen die Bezeichnung
ken (libraries) ergänzt bzw. erweitert
sachusetts Institute of Technology in
Sketch, da es im ursprünglichen Sinn
werden.15
Boston ins Leben gerufen.12
als Umgebung zur schnellen Erstel-
Diese Klassenbibliotheken zielen vor
Es ist eine objektorientierte und spezi-
lung digitaler programmierter Skiz-
allem auf Einsatzgebiete, wie Video,
ell für die Bereiche Simulation, Grafik
zen gedacht war. Daher heißt der
Grafik, Grafikformate, Sound, Ani-
und Animation entwickelte Program-
zentrale Ordner, in dem die eigenen
mation, Typographie, 3D, Simulati-
miersprache. Darüber hinaus besitzt
Programme gespeichert werden auch
on, Datenzugriff und -transfer sowie
sie eine eigene integrierte Entwick-
in der Regel „Sketchbook“.
Netzwerkprotokolle.16
lungsumgebung (Compiler).
Es ermöglicht dem Benutzer Interak-
Ein weiteres wichtiges Merkmal ist
Processing ist ein Open Source Pro-
tionen und visuelle Elemente zu pro-
das Processing nach dem Cross-Platt-
jekt, welches kostenfrei herunter-
grammieren. Dabei bedient es sowohl
form-Prinzip ausgelegt ist, d. h. der
geladen werden kann und ständig
Programmieranfänger sowie Fortge-
Quellcode kann auf allen Betriebs-
weiterentwickelt wird. Es basiert auf
schrittene. Besonders für Anfänger
systemen für die eine Java-Plattform
der Syntax einer stark vereinfach-
ist es attraktiv, da es nach einer kur-
existiert ausgeführt und in Webseiten
ten Version der Programmiersprache
zen Einführung bereits möglich ist,
eingebunden werden.17
Java und richtet sich in erster Linie an
ansprechenden Output zu generie-
2005 wurde Processing mit dem Prix
Gestalter, Künstler, Forscher und Pro-
ren. Durch seinen offenen Quellcode
Ars Electronica in der Kategorie Net
grammierer.
ist es modifizierbar und kann durch
Vision/Net Excellence ausgezeichnet.
13
11
14
12
Vgl. Bohnacker, Groß, Laub, S. 168
15
13
Vgl. Casey, Reas, S. 1
16
Vgl. ebd.
14
Vgl. Bohnacker, Groß, Laub, S. 168
17
Vgl. Bohnacker, Groß, Laub, S. 168
Processing-Icon
Entwicklungsumgebung von Processing
Vgl. http://de.wikipedia.org/wiki/Processing
11
// PROZESS UND HERAN GEHENSWEISE
12
Im ersten Schritt ging es darum, einen
besonders große Hilfestellung. Das
den Programmen, die dem Benutzer
Durch das Ausprobieren begriff ich die
Überblick über den Themenkomplex zu
war einerseits „Generative Gestal-
bei „Generative Gestaltung“ an die
Struktur der Programme, sodass ich
bekommen. Das heißt zum einen, ver-
tung – Entwerfen, Programmieren,
Hand gegeben werden.
als nächstes versuchte Code-Frag-
schiedene Literatur zu recherchieren,
Visualisieren“ von Hartmut Bohna-
Die Experimente sahen anfangs so
ment zu replizieren oder in andere
um die Sprache zu erlernen und zum
cker, Benedikt Groß und Julia Laub,
aus, dass ich die Werte der Varia-
Programm einzufügen.
anderen Programme anderer Künst-
da dort sehr viele Beispiel-Program-
blen variierte, um zu sehen, welche
Das Kopieren von „Codeschnipseln“
ler/ Programmierer anzuschauen, um
me vorgeführt und exerziert werden,
Auswirkungen diese Veränderungen
und das Schreiben eigener Program-
ein Gefühl und eine Vorstellung dafür
sodass man gut nachvollziehen kann,
auf den Output haben. Im nächsten
me ging dann ineinander über, sodass
zu bekommen, was machbar ist und
welche
letztend-
Schritt fügte ich weitere Variablen
die Grenze dazwischen verschwamm.
in welche Richtung die Experimente
lich für den jeweiligen Effekt aus-
hinzu oder entfernte diese. Das hatte
Natürlich entstanden nicht auf an-
gehen könnten.
schlaggebend
anderen
zur Folge, dass aus mehrdimensiona-
hieb zufriedenstellende Ergebnisse.
Danach folgte das Durcharbeiten
„generative art - a practical guide
len Programmen 2-dimensionale wur-
Ähnlich wie bei einer Bildbearbeitung,
verschiedenster
Diese
using processing“ von Matt Person,
den und umgekehrt.
betrachtet man sich dass vorläufige
stammten zum einen von der offizi-
da dieses Buch eine hervorragende
An diesem Punkt merkte ich, dass es
Ergebniss und bessert dann noch ein-
ellen Processing Internetseite (www.
Einführung in die Sprache gibt und
für mich erst mal ausreichen sollte,
mal nach. In diesem Fall dann mittels
processing.org), von „YouTube“ und
man nicht gleich mit überflüssigen In-
mit einer geringen Anzahl an Varia-
der veränderung von Parametern und
zu einem sehr großen Teil aus den re-
formationen überflutet wird.
blen zu Arbeiten, um den Überblick
Abstraktionsgrade.
cherchierten Büchern.
Bevor ich selber anfing Programme
nicht zu verlieren und ein brauchbares
solang bis man mit dem „Werkzeug“
Dabei waren mir zwei Bücher eine
zu schreiben, experimentierte ich mit
Ergebnis zu erhalten.
zufrieden ist.
Tutorials.
Programmzeilen
sind.
Zum
Dies
geschieht
12
// GLOSSAR
In diesem Fall wäre die grundlegende Fläche 500 Pixel breit und 1000 Pixel hoch,
die Hintergrundfarbe wäre weiß und jegliche Strichstärken hätten eine Dicke von 5
Pixel.18
TRANSFORMATIONEN:
SETUP AND DRAW:
Über den translate-, rotate- und scale-Befehl ist es möglich, das Koordinaten- Sys-
In Processing ist es möglich Animationen und Interaktionen zu erstellen. Elementar
tem zu verschieben, zu rotieren und zu skalieren. Dadurch ist es zum Beispiel möglich
dafür ist die Funktion draw(). Diese führt einen Code solange aus, bis er durch den
die Grundfläche bei sich selbst replizierenden Objekten, die durch ihre Replikation
Benutzer abgebrochen wird. Eine einfache draw()-Funktion sieht wie folgt aus:
größer werden, nicht verändern zu müssen, da man das Koordinatensystem einfach
void draw() {
kleiner skaliert und sich somit dem wachsenden Objekt anpasst.19
println(frameCount);
}
KLASSEN UND OBJEKTE:
Hierbei wird in der Console von Processing die stetig steigende Nummer des aktuellen Frames wiedergegeben und erst das Schließen des Programms bewirkt den Stop
dieser Ausgabe.
Mithilfe der setup()-Funktion ist es möglich einen Codeabschnitt genau einmal abarbeiten zu lassen. Häufig wird diese Funktion am Anfang eines Programms genutzt,
um die Größe der Fläche, deren Farbe o.ä. festzulegen. Eine solche Funktion wäre
folgendermaßen aufgebaut:
Klassen. Diese werden häufig in komplexen Programmen verwendet, um einen „sauberen“ Code zu gewährleisten. Klassen dienen dazu, bestimmte Probleme und Aufgaben zu lösen und wirken dabei als eine Art Archiv, in dem verschiedene Attribute
und Methoden gespeichert werden. Als Objekte werden dabei die Instanzen einer
jeden Klasse bezeichnet.20
Man kann das Prinzip sehr gut am folgenden Beispiel erklären:
Pedro ist ein Hund, er hat braunes Fell, wiegt 9 Kilo und ist 80 cm lang. Bernhard ist
ebenfalls ein Hund, hat aber weißes Fell, wiegt 40 Kilo und ist 120 cm lang. Somit
void setup() {
gehören sowohl Bernhard, wie auch Pedro der Klasse „Hund“ an, da man sie auf-
size (500, 1000);
grund der selben Eigenschaften kategorisieren kann: Farbe, Gewicht, Länge. Pedro
background (255);
ist dabei eine eigene Instanz und Bernhard ebenfalls.
strokeWeight (5);
}
13
In der objektorientierten Programmierung verwendet man oftmals sogenannte
18
Vgl. Bohnacker, Groß, Laub, S. 170
19
Vgl. ebd., S. 172
20
Vgl. http://de.wikipedia.org/wiki/Objektorientierte_Programmierung#Klassen
13
DATENTYPEN & VARIABLEN:
OPERATOREN UND MATHEMATIK:
Jedes Programm besitzt bestimmte Attribute, da ist es dem Menschen sehr ähn-
Ohne Operatoren wäre es nicht möglich komplexe Algorithmen aufzustellen bzw. zu
lich. Diese Attribute werden in sogenannten Variablen und Datentypen gespeichert.
lösen. Die wichtigsten hier zur Verfügung stehenden sind: +, -, *, / und %.
Ähnlich wie in den meisten anderen Programmiersprachen, existieren in Processing
Des Weiteren existieren eine Reihe von mathematischen Funktionen die bestimmte
folgende Datentypen:
Berechnungen erleichtern. Drei der bekanntesten sind:
char -
einzelne Zeichen
round -
rundet einen Zahlenwert auf oder ab
int (Integer) -
Ganzzahlen
random -
gerneriert einen Zufallswert
float -
Gleitkommazahlen,
sin/ cos/ tan -
berechnet den Sinus, Cosinus oder Tangens des jeweils boolean
-
wahr (true)/ falsch (false)
angegebenen Winkels 22
colors
-
Farben
String
-
Zeichenketten
MAUS UND TASTATUR:
Die Deklaration und Wertzuweisung geschieht grundsätzlich und unabhängig vom
Processing besitzt die Möglichkeit die Informationen von Eingabegeräten, wie z. B.
jeweiligen Datentyp nach folgendem Prinzip:
der Maus oder der Tastatur, abzufragen. Dazu gibt es festgelegte Variablen, über
die der aktuelle Status abgefragt werden kann:
Datentyp name = Wert;
mouseX/ mouseY -
An einem konkreten Beispiel sieht dies wie folgt aus:
zur Verfügung
mousePressed float a = 1,23;
Für jeden Datentyp wird eine bestimmte Menge an Speicher bereitgestellt. So wird
stellen immer die aktuelle X & Y Position der Maus -
wenn die Maustaste gedrückt ist, ist der Wert dieser Variable true
keyPressed -
zeigt an, ob eine Taste momentan gedrückt wird
key -
zeigt die zuletzt gedrückte Taste an 23
für den Datentyp boolean zum Beispiel nur 1 bit reserviert, für char bereits 16 bit und
für float bzw. int 32 bits. Für den Programmierer ist das insofern von Interesse, da
14
es gerade bei aufwendigen Programmen unabdingbar ist, für die jeweilige Variable
BEDINGUNGEN:
den möglichst kleinsten Speicherbedarf zu verwenden, um die Rechenprozesse nicht
In bestimmten Fällen kann es vorkommen, dass ein Codeblock nur dann ausgeführt
unnötig zu erschweren.21
werden soll, wenn eine bestimmte Bedingung erfüllt ist. In solchen Fällen wird 21
22
Vgl. Pearson, S. 32
23
Vgl. Bohnacker, Groß, Laub, S. 175
Vgl. Casey, Reas, S. 38.
14
häufig eine Anweisung eingesetzt. In Processing existieren 3 verschiedene Formen
An einem konkreten Beispiel mit einer Variablen i sehe der Code wie folgt aus:
von Bedingungen: if, if else und switch.
Ein kurzes Beispiel für eine if else Bedingung:
for (int i = 20; i < 150; i += 10) {
if (a == 1) {
fill (100, 0, 0);
rect (30, 20, 50, 55);
line ( i, 20, i, 180);
}
Diese 3 Zeilen erzeugen 13 senkrechte zueinander parallele Linien. i wird durch die
}
Schleife solange um 10 erhöht, bis es gleich oder größer wäre, als der Wert 150. Da-
else {
bei nimmt i den wert x1 und x2 der Linie in Anspruch. x1 und x2 sind dabei die X-Ko-
fill (0, 100, 0);
rect (30, 20, 50, 55);
ordinaten im Koordinatensystem und bilden den Start- und Endpunkt der Linie.25
}
FUNKTIONEN:
Beide Codezeilen die unter der if Bedingung stehen, werden nur dann ausgeführt,
Oftmals kommt es vor, dass Teile eines Programms mehrfach Verwendung finden.
wenn die Variable a den Wert 1 hat, andernfalls werden die beiden Codezeilen un-
In diesem Fall ist es Sinnvoll, den Programmteil in einer Funktion abzukapseln. Dazu
terhalb der else Bedingung ausgeführt. Im Falle das a = 1 ist, würde ein rotes Viereck
folgendes Beispiel:
gezeichnet, andernfalls ein grünes.24
void setup() {
translate (40, 15);
SCHLEIFEN:
line (20, 5, 20, 100);
Schleifen sind eine weitere wichtige Grundlage in der Programmierung. Sie dienen
line (40, 5, 40, 100);
dem wiederholten ausführen von Anweisungen. Währenddessen ist es möglich, die-
line (60, 5, 60, 100);
se Anweisungen zu modifizieren. Eine Schleife läuft solange, bis sie durch eine Ab-
line (80, 5, 80, 100);
bruchsbedingung gestoppt wird.
translate (20, 50);
Es existieren in Processing drei Arten von Schleifen: while, do… while und for.
line (20, 5, 20, 100);
Die for-Schleife hat folgenden Syntax:
line (40, 5, 40, 100);
line (60, 5, 60, 100);
line (80, 5, 80, 100);
for (Anfangsbedingung, Abbruchsbedingung, Erneuerung der Anfangsbedingung)
}
24
15
Vgl. Bohnacker, Groß, Laub, S. 175
25
Vgl. Pearson, S. 39
15
Dieses Programm zeichnet 4 Parallel nebeneinander liegende Linien und verschiebt
durch den translate Befehl das Koordinatensystem. Möchte man nun an dem Aussehen der Linien etwas verändern, müsste man den Code an 2 verschiedenen Stellen
ändern. Daher ist es sinnvoller diese Zeilen in einer Funktion zusammenzufassen:
void setup() {
translate (40, 15);
vierLinien();
translate (20, 50);
vierLinien();
}
void vierLinien() {
line (20, 5, 20, 100);
line (40, 5, 40, 100);
line (60, 5, 60, 100);
line (80, 5, 80, 100);
}
Nun kann die Funktion vierLinien an jeder beliebigen Stelle des Programms aufgerufen werden und sollte ein Änderungswunsch vorliegen, kann dieser ohne großen
Aufwand innerhalb der Funktion getätigt werden.26
26
16
Vgl. Bohnacker, Groß, Laub, S. 176
16
// PROJEKTSAMMLUNG
Die Projektsammlung beinhaltet 10 Programme und dient als repräsentative Übersicht. Zu jedem Programm existieren zwischen 4 und 9 Screenshots und ein kurzer
Einführungstext, welcher Auskunft über die Funktionen geben soll. Außerdem wird
bezug auf die ausschlaggebenden Zeilen des Programmcodes genommen und dessen Bedeutung erläutert. Die Programme sind gegliedert in 3 Themenfelder. Zu Beginn jedes Themenfelds steht eine kurze Erläuterung, auf der jeweils rechten Seite
sind Bilder zu sehen welche mir als Inspiration gedient haben. Beim Ersten handelt
es sich um das Thema Zeit. Das Zweite beschäftigt sich mit der Visualisierung akustischen Inputs. Das Dritte und letzte befasst sich mit natürlichen Vorgängen.
17
17
// ZEIT
„Die Zeit beschreibt die Abfolge von Ereignissen, hat also im Gegensatz zu anderen
physikalischen Größen eine eindeutige, unumkehrbare Richtung.“ 27
minimal by Roderick
ZIIIRO Titan
minimal by Roderick
ZIIIRO Eclipse
Das Thema Zeit und Uhren übt schon über einen längeren Zeitraum eine gewisse
Anziehungskraft auf mich aus. Insbesondere, da der aktuelle Trend dahin geht, die
klassische Armbanduhr wieder Salonfähig zu machen und sie mit Smartphones zu
verknüpfen (wie z. B. die SmartWatch). Außerdem ist es ein interessantes Medium
für neue Gestaltungsmöglichkeiten. Dabei ging es mir in erster Linie darum, weg von
den ursprünglichen Zahlen und Zeigern zu kommen.
Dutch design studio, GRO - kaleidoscope – time in colour
Sleek Watch Design by Denis Guidone
Reduzierung spielte für mich dabei eine sehr große Rolle, da mein ästhetisches Verständnis sehr durch Minimalismus geprägt wurde.
27
18
Vgl. http://de.wikipedia.org/wiki/Zeit
18
// ON_THE_LINE
Diese Uhr ist in der Lage, Millisekunden, Sekunden, Minuten und Stunden in Echtzeit
anzuzeigen. Diese werden in Form von Linien dargestellt, welche mit fortschreitender Zeit über den Bildschirm wandern. Die Strichstärke und Helligkeit gibt dabei
Auskunft über die Gewichtung der Zeit. Der dunkelste dünnste Strich stellt Millisekunden dar, der dickste hellste die Stunden.
20:56 Uhr
15:02 Uhr
20:56 Uhr
14:36 Uhr
Code:
float sec = map(second(), 0, 60, 0, width );
// sec als Variable des Datentyps float
wird hier der Sekundenwert überschrieben sowie die dazugehörigen
Start und Stop Punkte.28
line(height, sec, sec, sec);
// Die Linie berechnet sich dann aus
der Gesamthöhe der Skizze sowie den
3 sec werten.29
Syntax: line ( x1, y1, x2, y2 )
19
28
Vgl. http://processing.org/reference/float.html
28
Vgl. http://processing.org/reference/line_.html
19
// CENTURY_CIRCLE
Die hier dargestellte Uhr ähnelt in ihrer Form einer herkömmlichen am ehesten.
Sie besteht aus 6 Kreisen, jeder dieser Kreise stellt eine eigene Zeiteinheit zur Verfügung. Die Zeiteinheiten steigen in ihrer Wertigkeit von außen nach innen. Das heißt,
der äußerste Kreis stellt die Sekunden dar, der nächst kleinere die Minuten, dann die
Stunden. Danach schwenkt sie um auf den Tag, anhand dessen man den Fortschritt
des Monats erkennen kann. Als nächstes auf den Monat und zuletzt auf das Jahr.
Die jeweiligen Kreise sind von den Kontrasten her so abgesetzt, dass sie gut erkenn14:29 Uhr am 3. Juni 2014
bar sind.
Code:
arc ( width/2, height/2 ,width*4/5-5,widt-
// Ähnlich, wie bei der vorhergehenden
h*4/5-5,-PI/2.0, sec);
Uhr, wurde wieder eine Variable mit
der Bezeichnung sec erstellt. Dieses
Mal wird jedoch keine Linie, sondern
ein Bogen gezeichnet, um die runde
Form zu erhalten.30
14:30 Uhr am 3. Juni 2014
12:20 Uhr am 9. Juni 2014
Syntax: arc ( a, b, c, d, start, stop)
30
20
Vgl. http://processing.org/reference/arc_.html
20
// BAUHAUS
Die Bauhaus Uhr ist in dieser Kategorie das experimentellste Modell, da sie die Zeit
mittels geometrischer Formen darstellt und sich an den Grundformen des Bauhaus
orientiert.
Auch sie zeigt Millisekunden, Sekunden, Minuten und Stunden an. Die Darstellung
der Millisekunden stellt dabei eine abstrahierte Form einer Wanduhr mit Pendel dar,
sodass ein Gefühl entsteht, als ob das Pendel direkt und unaufhörlich auf einen zukommt. Dies soll den erschlagenden Charakter der Zeit visualisieren, wie sie unerbittlich fortschreitet, ohne dabei Rücksicht auf Verluste zu nehmen.
22:00 Uhr
14:48 Uhr
22:00 Uhr
14:48 Uhr
Die nächst größere Instanz – die Sekunde – wird durch ein immer wieder wachsendes Dreieck dargestellt. Die Minuten durch einen Kreis und den Stunden ist die Form
des Vierecks zugewiesen, da diese einem manchmal wie ein Klotz am Bein lasten.
Insbesondere bei dieser Variation entstehen mit bzw. durch die fortschreitende Zeit
immer wieder neue, interessante Formkombinationen.
Code:
triangle (width/2, 10, width/2-second()*5,
// Anders, als bei den anderen beiden
second()*10, width/2+second()*5, se-
Uhren, wird hier keine extra Variable
cond()*10);
für die unterschiedlichen Zeitgrößen
festgelegt, sondern direkt die Zeiten in
die Form eingebunden.31
Syntax: triangle ( x1, y1, x2, y2, x3, y3)
31
21
Vgl. http://processing.org/reference/triangle_.html
21
// AUDIOVISUALISIERUNG
„Audiovisualisierung ist die Berechnung von Grafiken, die aufgrund von Musikdaten
generiert werden.“ 32
Mit den Audiovisualisierungen habe ich mich einem weiteren Thema gewidmet, welches
Bioacoustic Phenomena by Paul Prudence
Rynth[n3] Paul Prudence
Parhelia by Paul Prudence
Rynth[n3] Paul Prudence
Parhelia by Paul Prudence
Rynth[n3] Paul Prudence
mich schon sehr lange in seinen Bann zieht. Der Gedanke, aus einem Musikstück ein Bild
zu generieren, welches bestimmte Charakteristiken widerspiegelt und somit ein zusammenhängendes Kunstwerk schafft, fasziniert mich dabei so sehr, dass ich es mit dieser Versuchsreihe selbst probieren wollte. Des Weiteren sind Musik/ Geräusche/ Laute
schon immer ein wichtiger Bestandteil des menschlichen Daseins gewesen und tragen im
Wesentlichen zur Kommunikation untereinander bei. So lässt sich darüber auch eine Art
Schulterschluss mit der Visuellen Kommunikation schließen.
Alle nun folgenden Programme nutzen
Danach sollte man im void setup() Be-
den MicIn Eingang (Mikrophon). Um
reich festlegen, welcher Input genutzt
diesen sich zu Nutze machen zu können,
wird und in welcher Qualität dies ge-
muss man die minim library importie-
schehen soll:
ren, dies ermöglichen die folgenden Zeilen, welche am Anfang der Programme
minim = new Minim (this);
eingefügt werden:
input = minim.getLineIn (Minim.STEREO,
512);
import ddf.minim.*;
Minim minim;
Als letztes werden die Daten dann mit-
AudioInput input;
tels dieses Befehls einer Variablen (dim)
des Datentyps float übergeben:
float dim = input.mix.level () 33
22
32
Vgl. http://de.wikipedia.org/wiki/Audiovisualisierung
33
Vgl. http://code.compartmental.net/tools/minim/
22
// MIC_TO_SCREEN
Dieses Programm war eines der vielseitigsten von allen, änderte oder ergänzte
man nur drei Zeilen vom Code kamen als Resultat völlig unterschiedliche Formen
heraus. Dabei ging es Hauptsächlich um die Lautstärke der Musik. Je lauter ein Ton
angeschlagen wurde, umso dunkler wurde der gezeichnete Strich und umso weiter
#1
#2
#3
#4
#5
#6
#7
#8
#9
entfernt war er vom Zentrum. Je leiser, umso heller. Anzumerken ist auch, dass die
Form sich nur entwickelte, wenn fortwährend ein Ton oder ein Musikstück gespielt
wurde. Sobald Stille einkehrte, verharrte auch die Form auf ihrer aktuellen Position.
Code:
rect (width/2, height/2, dim*100*noise
// Hier wird mit Hilfe der Variablen
(dim), dim*100*noise(dim));
dim, welche den AudioInput verarbeitet die Höhe und Breite des Vierecks
verändert. Um ein klareres Ergebnis
zu erhalten, wurde diese mit dem
Wert 100 multipliziert und eine noise
Funktion hinzugefügt. Die noise
funktion basiert auf dem PerlinNoise. Diese wurde zur Bildsynthese von
natürlichen Phänomenen, wie Wolken,
Wasser und Landschaften verwendet.
Sie erzeugt natürliche und harmonische Zahlenfolgen.
Syntax: rect ( a, b, c, d) 34
34
23
Vgl. http://processing.org/reference/rect_.html
23
// SPEAKER_GENERATOR
Nach dem eben vorgestellten Programm mit seinen recht scharfen Konturen, begann ich mich an weicheren Übergängen auszuprobieren. Das Programm erhielt
seinen Namen, da die Ergebnisse oftmals aussahen, wie die Membran von Lautsprechern. Das Grundprinzip funktioniert hier ähnlich, wie beim vorherigen Experiment. Die Lautstärke wird dabei als ausschlaggebendes Element benutzt, um unterschiedliche Varianzen zu erzeugen. Dieses Programm generiert zwar nur runde
Formen, jedoch bleibt es bei absoluter Stille nicht auf einer Stelle stehen, sondern
zeichnet weiter auf. Hinzu kommt, dass es sich diesmal nicht von innen heraus ge-
#1
#2
#3
#4
neriert, sondern von außen nach innen. Somit ist irgendwann der Punkt erreicht, an
dem es nicht mehr weiter geht bzw. nicht mehr sichtbar ist.
Code:
vertex(m+rr*cc,m+rr*ss,dim+rr*cc,
// Durch die Funktion vertex() werden
dim+rr*ss);
Vektoren erzeugt. Diese werden durch
die in Klammern stehenden Variablen
genauer definiert. In diesem Fall stehen die Variablen cc für einen Kosinuswert, ss für einen Sinuswert und rr für
Syntax: vertex ( x, y, u, v)
einen Radius. dim ist hier wieder die
x = X-Koordinate
Übersetzung des Mikrophoneingangs
y = Y-Koordinate
und bewirkt durch diesen Input eine
u = horizontale Koordinate für Tex-
ständige Variation und Veränderung
35
24
ture-Mapping
der Kreisgröße.35
v = vertikale Koordinate für Tex- ture-Mapping
Vgl. http://processing.org/reference/vertex_.html
24
// RORSCHACH
Bei Rorschach handelt es sich um eine Vorstufe des Speaker_Generators, daher sind
beide Arbeiten zusammenhängend zu betrachten. Ich habe dabei lange überlegt,
ob ich ein Programm streiche und ein anderes dafür rein nehme, doch empfand ich
den Output beider Experimente zu spannend und ästhetisch, als dass ich mich für
eines hätte entscheiden können. Auch Rorschach ist mittels der vertex() Funktion
entstanden. Jedoch ist die Formel zur Berechnung der Form wesentlich kürzer und
das, obwohl der Output wesentlich komplexer scheint.
#1
#2
#3
#4
Code:
(float i=dim;i<=TWO_PI;i+=k)
// Hierbei wurden die beiden Koor-
vertex(m+rr*cc,m+rr*ss);
dinaten u und v weggelassen. Dafür
wurde in dem oben stehenden Code
die Information zur Soundübertragung (dim) in die Formel zur Formberechnung übergeben. Daraus entsteht
Syntax: vertex ( x, y, u, v)
eine ständig fortwährende Metamor-
x = X-Koordinate
phose. Die Formen entstehen auch in
y = Y-Koordinate
totaler Stille, jedoch wird durch den
u = horizontale Koordinate für Tex-
Einfluss von Geräuschen der Entste-
36
25
ture-Mapping
v = vertikale Koordinate für Tex- hungsprozess gestört und es kommt
zu Abnormitäten in den Symmetrien.36
ture-Mapping
Vgl. http://processing.org/reference/vertex_.html
25
// CODE AND NATURE
„Natur bezeichnet in der westlichen Philosophie in der Regel das, was nicht vom Menschen geschaffen wurde. “
Auf dieses Thema bin ich über das Buch „THE NATURE OF CODE - SIMULATING NATURAL SYSTEM WITH PROCESSING“ von Daniel Shiffman aufmerksam geworden. Dabei
geht es, wie es der Titel schon verrät, um die Simulation von in der Natur vorkommender
Prozesse.
Da Fraktale in dieser Kategorie eine große Rolle spielen, soll hier kurz darauf eingegangen
werden, um bestimmte Begrifflichkeiten und Zusammenhänge zu erklären. Der Begriff
Fraktal wurde vom Mathematiker Benoît Mandelbrot 1975 geprägt und bezeichnet sowohl natürliche, wie auch künstliche Gebilde oder geometrische Muster. Im Allgemeinen
Baum
Wald
Eiskristall
Farn
besitzen diese Gebilde einen hohen Grad von Skaleninvarianz bzw. Selbstähnlichkeit.
Dies ist dann der Fall, wenn ein Objekt aus vermehrt kleineren Vervielfältigungen seiner
selbst besteht.
Fraktale sind häufig in der Natur zu finden. Allerdings ist die Stufenzahl der selbstähnlichen Strukturen begrenzt. Diese beträgt dann in der Regel lediglich drei bis fünf. Ein
typisches Beispiel aus der Biologie sind die fraktalen Strukturen von Romanesco-Gemüse
oder Farnen.
Aufgrund der Tatsache, dass sich sämtliche Funktionen von Transformationen grundsätzlich auf das gesamte Koordinatensystem beziehen, existiert in Processing die Möglichkeit, verschiedene Korrdinatensysteme voneinander abzugrenzen. Dadurch wird es
möglich, einzelne Transformationen eigenständig gegenüber dem jeweils anderen anzuwenden. Hierbei spielen 2 Funktionen eine entscheidende Rolle das ist zum einen pushMatrix() und zum anderen popMatrix().
26
pushMatrix() - Diese Funktion generiert
popMatrix() - Hiermit wird die mit pus-
eine neue Ebene in der Zeichenfläche
hMatrix() erzeugte Ebene mit demHin-
mit allen aktuellen Attributen vom Hin-
tergrund verknüpft. Nachdem popMat-
tergrund. Dazu gehören z.B. Position
rix() aufgerufen wurde zählen dieselben
und Rotation.
Bedingungen der Zeichenfläche, wie vor
37
37
Vgl. http://processing.org/reference/pushMatrix_.html
38
Vgl. http://processing.org/reference/popMatrix_.html
dem Aufruf von pushMatrix().38
26
// AST
Im Mittelpunkt bei Ast steht ein rekursiver Stängel, welcher im ersten Moment wie
ein Farn aussieht. Durch jeden Mausklick vervielfältigt er sich jedoch an sich selbst.
Aus jedem Blatt wird ein neuer Stängel. Dies funktioniert unendlich oft, jedoch wird
es für das menschliche Auge irgendwann nicht mehr Sichtbar und es kommt einem
vor, als ob aus dem vollbehangenen Farn ein kahler Ast geworden ist. Was jedoch
ein Trugbild ist. Wir können nur mit unseren Gegebenheiten nicht mehr in diese Dimension vordringen.
Stufe 1
Stufe 2
Stufe 3
Stufe 7
Code:
Blattansatz = map(log(norm(i, 0, bl)+0.1)/
// Berechnung der höhe des Blattansatzes
log(10.1), -1.10, 0.04, 0, hi);
Blattdicke = map(log(norm(i, 0, bl)+0.1)/
// Berechnung der Breite eines Blattes
log(10.1), -1.20, 0.04, 0, wi);
stengelstrke = map(hi-multi, 0, hi, 0.1,
// Berechnung für die dicke des Stengels
0.01*hi); //Berechnung für die dicke des
Stengels
rect(-stengelstrke/2, 0, stengelstrke/2,
// Berechnung der Stengelform
Blattansatz-multi);
Syntax: map(value, start1, stop1, start2, stop2) 39
39
27
Vgl. http://processing.org/reference/map_.html
27
// GROW
Grow ist eine Animation, welche sehr ornamentale Muster hervorbringt. Es spielt
dabei fortwährend eine Schleife ab, bei der es erst aus sich heraus wächst, um
dann wieder in sich „zusammenzufallen“. Die Strukturen sind durch das editieren
bestimmter Variablen sehr variantenreich.
Code:
#2
#3
#4
#5
#6
#7
#8
#9
// Dieser Teil des Codes ist die Grundstruk-
pushMatrix();
tur der Hauptfunktion des Programms. Hier
rotate(+stufen);
wird ein Ast ähnliches Konstrukt gebildet,
line(0, 0, 0, -anzahl);
durch dessen Verdopplung und Rotation
translate(0, -anzahl);
es aus sich heraus wächst. Verantwortlich
zweig(anzahl);
dafür ist u. a. wieder push- und popMatrix
popMatrix();
Syntax: pushMatrix()
#1
() Funktion.
40
popMatrix() 41
40
41
28
Vgl. http://processing.org/reference/pushMatrix_.html
Vgl. http://processing.org/reference/popMatrix_.html
28
// ENDLOS
Die passende Redewendung, welche dieses Programm am besten beschreibt lautet
wahrscheinlich: „Man sieht den Wald vor lauter Bäumen nicht“. Vor dem Auge des
Benutzers wächst unaufhörlich ein Wald zusammen, bestehend aus unterschiedlich
großen Bäumen. Dabei verblassen die hintenstehenden immer mehr, um somit eine
Tiefe im Bild zu erzeugen.
#1
#2
#3
#4
Code:
pushMatrix();
// Ähnlich dem obigen Code geschieht
{
auch hier wieder das ausschlaggebende in
translate(0,-height/3);
diesen Programm Zeilen. Dabei geht es um
rotate(random(-PI/4.5,PI/4.5));
die generierung der Bäume. Wurde beim
scale(random(0.35,0.65));
oberen Beispiel diese Zeilen 2 mal abgeru-
ast(stamm+int(random(1,3)));
fen, geschieht es hier bereits 5 mal. Je öfter
}
diese Zeile ausgeführt wird umso mehr
popMatrix();
Verästelungen in den Baumkronen gibt es.
Allerdings werden die Berechnungen auch
dementsprechend langwieriger.
Dadurch das in diesem Programm keine
abbruch Bedingung gestellt wird, werden
die Bäume in einer Endlosschleife generiert.
Syntax: pushMatrix()
42
popMatrix() 43
29
42
Vgl. http://processing.org/reference/pushMatrix_.html
43
Vgl. http://processing.org/reference/popMatrix_.html
29
// RE_KUR_SIV
Durch das bewegen des Mauszeigers innerhalb der Zeichenfläche, ermöglicht dieses
Programm dem Benutzer selber Einfluss auf die Form zu nehmen. Die Form an sich
besteht aus acht rekursiven Elementen, die sich zum Teil überlagen und 360° um den
Mittelpunkt drehen.
#1
#2
#3
#4
#5
#6
#7
#8
#9
Code:
rotx += (radians(180./height*-
// Übergabe der Information der X-Achse
mouseX)-rotx)/verz;
des Mauszeigers.
roty += (radians(180./height*mouseY)-ro-
// Übergabe der Information der Y-Achse
ty)/verz;
des Mauszeigers. Die Funktion Radians
wandelt dabei eine bestimmt Gradzahl in
einen Radianten um. Der Radiant bestimmt
die Größe eines ebenen Winkels.
Syntax: radians(degrees)
44
44
30
Vgl. http://processing.org/reference/radians_.html
30
// FAZIT
Allgemein lässt sich feststellen das
nis erzielte, hatte man schon wieder
Insbesondere die vielen, recht ma-
Output, welcher vielseitig einsetzbar
generative Gestaltung in weiten Tei-
vergessen, wie es vorher aufgebaut
thematischen, Berechnungen stellten
ist. Sei es als Animation, als statische
len der „Kreativszene“ angekommen
war. Ich hatte oftmals das Gefühl,
eine gewisse Hürde dar, gerade wenn
Grafik oder aber möglicherweise auch
ist. Dank des Internets finden sich vie-
dass der Kniff in der Programmierung
man sich damit das letzte Mal wäh-
als Projektion.
le Foren und Communitys in denen ein
mit Processing darin liegt, Chaos ins
rend des Abiturs beschäftigt hat. Der
Des Weiteren empfand ich es als eine
reger Gedanken- und Informations-
System zu bringen oder besser ge-
große Vorteil ist jedoch, dass es viele
wichtige Lektion einen Einblick in die
austausch stattfindet. Es entstehen
sagt, Chaos mit System zu erschaf-
Berechnungen gegeben sind und man
Welt der Programmierung zu erhal-
sowohl Kunstwerke, Architektur- und
fen. Meine Metapher der Sackgasse
sich somit weniger mit dem Aufstellen
ten, da die wenigsten Grafiker auch
3D-Modelle, Schriften, Medieninstal-
aus der Einführung hat sich dahin
beschäftigen muss, sondern viel mehr
in der Lage sind Programme oder
lationen, Animationen wie auch Infor-
gehend verändert, dass es viel mehr
mit dem Verändern dieser.
beispielsweise Internetseiten selber
mations- und Kommunikationsgrafi-
wie ein Dschungel ist und man sich
Allerdings hat sich noch etwas verän-
zu schreiben. Bei diesem Projekt war
ken.
von einer Liane zur nächsten hangelt,
dert: Bin ich anfangs noch davon aus-
man Grafiker und Programmierer in
Wenn ich auf meine Experimente zu-
immer tiefer in den Wald hinein verirrt
gegangen nicht „das eine Ergebnis“
Personalunion und hatte direkten Ein-
rückblicke, muss ich feststellen, dass
und es zunehmend schwieriger wird,
am Ende zu haben, muss ich feststel-
fluss auf seine eigenen Werkzeuge.
es äußerst schwierig war, diese zu do-
einen Ausweg zu finden.
len, dass trotz des vielen Stückwerks
Ich denke das diese Form der Ge-
kumentieren. Man ist währenddessen
Es war relativ kompliziert, hinterher
ein ganzes Ergebnis entstanden ist.
staltung in den kommenden Jahren,
in einem „flow“ und sobald man et-
noch einmal nachzuvollziehen, wie ich
Für mich ist eine Art Toolbox der Inspi-
ähnlich wie Foto, Video und digitale
was veränderte, ohne dies schriftlich
ich auf bestimmte Ergebnisse gekom-
ration entstanden. Jedes einzelne die-
Bilbearbeitung es in der Vergangen-
festzuhalten und ein anderes Ergeb-
men bin.
ser Programme liefert einen anderen
heit vorgemacht haben, ein fester Bestandteil werden wird.
31
31
// QUELLEN
// BILDVERZEICHNIS
Bohnacker, Hartmut; Groß, Benedikt; Laub, Julia; Lazzeroni, Claudius (Hrsg.):
S. 11: #1, #2, #3, #4 #5 Quelle: Reas, Casey & McWilliams, Chandler: FORM + CODE - In De-
GENERATIVE GESTALTUNG - Entwerfen Programmieren Visualisieren, Mainz:
sign, Art and Architecture;
Verlag Herrmann Schmidt 2010.
S. 15: Quelle: http://www.fontblog.de/premiere-ff-mark-geometrische-sans-fuer-unsere-zeit;
S. 17: Quelle: Hartmut Bohnacker, Julia Laub, Benedikt Groß, Claudius Lazzeroni (2009) Buch
Lieser, Wolf: DIGITAL ART -NEUE WEGE IN DER KUNST, Potsdam: Tandem Verlag GmbH
„Generative Gestaltung“, www.generative-gestaltung.de;
2010.
S. 19: Quelle: Lieser, Wolf: DIGITAL ART -NEUE WEGE IN DER KUNST, Potsdam: Tandem
Verlag GmbH 2010;
Pearson, Matt: generative art - a practical guide using processing, New York:
S. 20: Quelle: Lieser, Wolf: DIGITAL ART -NEUE WEGE IN DER KUNST, Potsdam: Tandem
Manning Publications Co. 2011.
Verlag GmbH 2010;
S. 21: Quelle: Lieser, Wolf: DIGITAL ART -NEUE WEGE IN DER KUNST, Potsdam: Tandem
Reas, Casey & Fry, Ben: Processing - A Programming Handbook for Designers and Artists,
Verlag GmbH 2010;
Massachusetts: The MIT Press 2007.
S. 37: minimal by Roderick, Quelle: http://www.dejoost.com/minimal-analog-watch-design/;
Dutch design studio, GRO - kaleidoscope – time in colour, Quelle:
Shiffman, Daniel: THE NATURE OF CODE - SIMULATING NATURAL SYSTEM WITH PROCES-
http://www.designsojourn.com/once-upon-a-time-experimental-watch-designs/;
SING, Leipzig: Amazon 2012.
Sleek Watch Design by Denis Guidone, Quelle: http://butilikethat.com/sleek-watch-design-created-by-italian/;
www.processing.org/reference - letzter Zugriff: 9. Juni 2014, 19:46 Uhr.
Ziiiro Eclipse, Quelle: http://www.ziiiro.com/images/products/Eclipse_black.png;
Ziiiro Titan, Quelle: http://www.ziiiro.com/images/products/Titan_black_front.png;
http://de.wikipedia.org/wiki/Fraktal - letzter Zugriff: 9. Juni 2014, 19:46 Uhr.
S. 45: Bioacoustic Phenomena, Parhelia, Rynth[n3], Quelle: http://www.paulprudence.com/
S. 53: Baum, Quelle: http://www.foto-repro-thugutt.de/wp-content/uploads/2008/08/
http://de.wikipedia.org/wiki/Natur - letzter Zugriff: 9. Juni 2014, 19:46 Uhr.
baum-nr1-1000p.jpg
Wald, Quelle: http://www.redhotschilly.de/assets/images/wald_LANGBOGENFREUNDE.jpg
http://de.wikipedia.org/wiki/Zeit - letzter Zugriff: 9. Juni 2014, 19:47 Uhr.
Eiskristall, Quelle: http://punkt4.files.wordpress.com/2012/01/eiskristall.jpg
Farn, Quelle: http://foto.mein-schoener-garten.de/userimages/41775/or/1340636/Farn.jpg
http://www.fontblog.de/premiere-ff-mark-geometrische-sans-fuer-unsere-zeit - letzter
Zugriff: 9. Juni 2014, 19:47 Uhr.
32
32