Creative Coding with Processing
-
Upload
christian-gwiozda -
Category
Education
-
view
974 -
download
3
Transcript of Creative Coding with Processing
![Page 1: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/1.jpg)
Creative Codingin Processing
FH Trier, FB Gestaltung, WS2013/2014
Christian Gwiozda
![Page 2: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/2.jpg)
Warum Programmierung?
Warum Processing?
![Page 3: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/3.jpg)
Unabhängigkeit von anderen Programmen... (wenn nötig)
Keine Limitierung...
Computer als Universalwerkzeug
Man kann schneller viele Variationen einer Idee testen
Verschiedene Medien: Bild, Ton, Animation, Print, Physical...
Modularität
Es macht manchmal Spass ;)
Warum Code?
![Page 4: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/4.jpg)
Processing NoiseExample->Math->Noise2D
Photoshop Clouds EffektWarum Code?
![Page 5: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/5.jpg)
Processing:Direkte Variationsmöglichkeit
Photoshop Clouds Effekt:Garkeine Settings ?!
![Page 6: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/6.jpg)
Warum Code?„Abstrakte Bausteine“
![Page 7: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/7.jpg)
Was ist Processing?
Programmiersprache -> Eine Variante von Java
Entwickelt 2001 am MIT in der Aesthetics & Computation Group
Zielgruppe sind Designer und Künstler
OpenSource!
Für fast alles gibt es schon fertigen Code in Libraries
![Page 8: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/8.jpg)
Processing Mission Statement:
„Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. Similarly, the project is designed to turn engineers and computer scientists to less gainful employment as artists and designers.“
![Page 9: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/9.jpg)
Anleitung: 1. Zeichne 10 Linien.
2. Die erste Line startet in der Mitte.
3. Sie geht ein “Kästchen” nach oben.
4. Jede weitere Linie beginnt am Ende der letzten Line.
5. Jede neue Linie ist ein Kästchen länger als die vorherige.
6. Jede neue Linie dreht sich um 90° im Uhrzeigersinn.
7. Zwei Farben müssen sich immer abwechseln.
![Page 10: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/10.jpg)
Code = Präzise Auflistung von Befehlen die der Computer ausführen soll.
00100010101100100100101010
draw(“bild.jpg”, 10,10)
![Page 11: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/11.jpg)
background(255, 255, 255);size(1000, 1000);smooth();strokeWeight(12);int step = 10;float abstand = 120;float plus = abstand/2;
translate(width/2, height/2);for (int i = 1; i < step+1; i++) {
if (i%2==0) { stroke(33, 232, 230); } else { stroke(118, 10, 108); }
line(0, 0, 0, -abstand); translate(0, -abstand);
rotate((TWO_PI/4)); abstand += plus;}
Die gleiche Anleitung in Processing “Sprache”
sketch_1_1
![Page 12: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/12.jpg)
Processing Syntax
befehl(_,_,_);
z.B.rect(20,100,40,20);ellipse(200,200,10,10);fill(120,120,0);loadFont(helvetica, 16);......
Funktion Argumente
![Page 13: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/13.jpg)
Problem 1:
![Page 14: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/14.jpg)
Problem 2
![Page 15: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/15.jpg)
Processing Application
![Page 16: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/16.jpg)
www.processing.org -> Download
![Page 17: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/17.jpg)
Processing Textfenster
Programm FensterPlay / Stop Buttons
![Page 18: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/18.jpg)
Sketchbook Folder
->
Sketch Folder
->
sketch_datum.pde
![Page 19: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/19.jpg)
Beispiele und Tutorials
![Page 20: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/20.jpg)
Hilfe...
![Page 21: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/21.jpg)
Koordinaten undPixel
![Page 22: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/22.jpg)
![Page 23: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/23.jpg)
![Page 24: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/24.jpg)
![Page 25: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/25.jpg)
size(400,400);
size(800,400);
size(Breite, Höhe) <- in Pixeln
![Page 26: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/26.jpg)
Grundformen
![Page 27: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/27.jpg)
size(800,800);ellipse(400,400,250,250);
ellipse(Position X, Position Y, Breite, Höhe);
Position X400
Position Y400
Breite 250
Höhe 250
![Page 28: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/28.jpg)
size(800,800);rect(200,600,300,100);
rect(Position X, Position Y, Breite, Höhe);
Position X 200
Position Y600
![Page 29: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/29.jpg)
size(800,800);rectMode(CENTER);rect(200,600,300,100);
rectMode(modus); CENTER, CORNER ...
Position X 200
Position Y600
![Page 30: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/30.jpg)
size(800,800);line(10,10,600,600);
line(Start X, Start Y, Ende X, Ende Y);
![Page 31: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/31.jpg)
size(800,800);triangle(150,600,750,600,400,20);
triangle(Punkt1 X, Punkt1 Y, Punkt2 X, Punkt2 Y, Punkt3 X, Punkt3 Y);
![Page 32: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/32.jpg)
size(800, 800);beginShape();vertex(755, 32);vertex(400, 120);vertex(212, 700);vertex(500, 500);vertex(655, 645);endShape(CLOSE);
beginShape(); vertex(Position X, Position Y); endShape(CLOSE);
![Page 33: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/33.jpg)
Weitere Grundformen
arc();bezier();curve();point();......
<- Examples
![Page 34: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/34.jpg)
Farben
![Page 35: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/35.jpg)
RGB (alle Werte 0-255)
Red, Green, Blue
255,0,0
0,255,0
0,0,255
255,255,255
0,0,0 65,250,224
255,0,153
140,113,152
![Page 36: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/36.jpg)
HSB, Hue, Saturation, Brightness
Hue -> Farbkreis 0-360°
Saturation und Brightness -> 0-100 %
0,100,100
0,50,50
191,20,93
egal,egal,0
egal,0,100
colorMode(HSB, 360, 100, 100);
![Page 37: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/37.jpg)
size(400, 1000);colorMode(HSB, 360, 100, 100);
background(0, 0, 0);
noFill();stroke(20, 200, 200);ellipse(200, 300, 150, 150);
fill(20, 60, 60);noStroke();ellipse(200, 400, 100, 100);
fill(30, 100, 90);ellipse(200, 500, 150, 150);
fill(0, 0, 100);ellipse(200, 600, 100, 100);
noFill();stroke(120, 20, 100);ellipse(200, 750, 230, 230);ellipse(200, 750, 200, 200);
background(Farbe); fill(Farbe); stroke(Farbe); fill(); noFill();
stroke(Farbe)
fill(Farbe)
sketch_1_2
![Page 38: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/38.jpg)
size(400, 1000);colorMode(HSB, 360, 100, 100);
background(0, 0, 0);
noFill();stroke(20, 200, 200, 150);ellipse(200, 300, 150, 150);
fill(20, 60, 60, 150);noStroke();ellipse(200, 400, 100, 100);
fill(30, 100, 90, 150);ellipse(200, 500, 150, 150);
fill(0, 0, 100, 150);ellipse(200, 600, 100, 100);
noFill();stroke(120, 20, 100, 150);ellipse(200, 750, 230, 230);ellipse(200, 750, 200, 200);
Transparenz -> 4. Wert in einer Farbe (Standart 0-255)
sketch_1_3
![Page 39: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/39.jpg)
Der Flow,void() & setup()
![Page 40: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/40.jpg)
size(800,800);colorMode(HSB, 360, 100, 100);
background(0,0,100);
noStroke();rectMode(CENTER);
fill(55, 255, 120);rect(400,400, 200, 200);
Dieser Code läuft, von oben nach unten, genau einmal durch!
Animationen und Interaktion in diesem Code nicht möglich.
sketch_1_4
![Page 41: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/41.jpg)
Processing Syntax
code(){ ... }Abschnitt Inhalt
code(){ size(800,800); colorMode(HSB, 360, 100, 100); background(0,0,100); noStroke(); rectMode(CENTER); fill(55, 255, 120); rect(400,400, 200, 200);}
Abschnitte sind meistens eingerückt.
Mit cmd/strg + T kann man im Editor den Code automatisch formatieren.
![Page 42: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/42.jpg)
Code in Processing hat zwei grundlegende Abschnitte:
void setup() {.........}
void draw() {.........}
Dieser Block wird einemal!!! von oben nach unten durchlaufen.z.b. size() oder colorMode() machen Sinn in void setup()
void draw() läuft durch und fängt wieder oben an.
![Page 43: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/43.jpg)
void setup() { size(800, 800); colorMode(HSB, 360, 100, 100);
background(0, 0, 100);}
void draw() { noStroke(); rectMode(CENTER);
fill(55, 255, 120); rect(400, 400, 200, 200);}
Der gleiche Code aufgeteil in setup() und draw().
Das Programm läuft jetzt in Echtzeit.
Aber weil die Werte in draw() nicht varieren, sieht es immer gleich aus.
sketch_1_5
![Page 44: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/44.jpg)
mouseX und mouseY sind dynamische Variablen die immer die aktuelle Mausposition speichern.
mouseX ist 6
mouseY ist 2
![Page 45: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/45.jpg)
void setup() { size(800, 800); colorMode(HSB, 360, 100, 100);
background(0, 0, 100);}
void draw() { noStroke(); rectMode(CENTER);
fill(55, 255, 120); rect(mouseX, mouseY, 200, 200);}
Weil die Werte für mouseX und mouseY sich immer ändern, und void draw() sich wiederholt, läuft das Programm jetzt dynamisch.
Variante: background() in void draw() verschieben...
sketch_1_6
![Page 46: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/46.jpg)
void setup() { size(800, 800); background(0, 0, 100);}
void draw() { }
void keyPressed() { background(0, 100, 100);}
void mousePressed() { background(200, 50, 50);}
Andere void Blöcke.... keyPressed() und mousePressed()
sketch_1_7
![Page 47: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/47.jpg)
Processing Syntax
// comment
void setup() {//ich bin ein Kommentar //und werde ignoriert.........
}
/*...*/
![Page 48: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/48.jpg)
Variablenint, float
![Page 49: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/49.jpg)
Variablen sind Behälter die einen bestimmten Werte, z.b. Zahlen, enthalten.Sie haben einen Namen und verlinken an eine Position im Arbeitsspeicher, wo dieser Wert abgelegt ist.
mouseX , mouseY -> Variablen für die Position der Maus
width und height -> Variablen mit der Breite und Höhe des Fensters
int12, 276-2311
float0.30.32212.377-0.5
![Page 50: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/50.jpg)
Processing Syntax
typ name;
float green;
void setup() {green = 20.3;background(0,green,0);}
name = wert; int oder float irgendein Name, z.b. blub
//es geht auch so...float green = 20.5;
void setup() {background(0,green,0);}
10 für int, 1.0 für float
![Page 51: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/51.jpg)
Processing Syntax
+ - * / ++ --
![Page 52: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/52.jpg)
![Page 53: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/53.jpg)
![Page 54: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/54.jpg)
![Page 55: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/55.jpg)
Anweisungen / Funktionen
befehl(_,_,_);Funktion Argumente
![Page 56: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/56.jpg)
Anweisungen / Funktionen
Grundformen:rect(x, y, Breite, Höhe);ellipse(x, y, Breite, Höhe);point(x, y);line(x1, y1, x2, y2);triangle(x1, y1, x2, y2, x3, y3);
Zeichnen:size(Breite, Höhe);colorMode(...);fill(R, G, B);noFill();stroke(R, G, B);noStroke();background(R, G, B);
![Page 57: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/57.jpg)
Code Block
code(){ ... }Abschnitt Inhalt
![Page 58: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/58.jpg)
Code Block
void setup() {...}
void draw() {...}
void mousePressed() {...}
void keyPressed() {...}
![Page 59: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/59.jpg)
Code in Processing hat zwei grundlegende Abschnitte:
void setup() {.........}
void draw() {.........}
Dieser Block wird einemal!!! von oben nach unten durchlaufen.z.b. size() oder colorMode() machen Sinn in void setup()
void draw() läuft durch und fängt wieder oben an.
![Page 60: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/60.jpg)
Kommentare
// comment
void setup() {//ich bin ein Kommentar //und werde ignoriert.........
}
/*...*/
![Page 61: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/61.jpg)
Variablen
typ name;
name = wert; int oder float irgendein Name, z.b. blub
10 für int, 1.0 für float
![Page 62: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/62.jpg)
Variablen
int: Ganze Zahlen
int positionX;int breite;int tempo;
positionX = 10;breite = 200;tempo = -40;
float: Komma Zahlen
float positionX;float breite;float tempo;
positionX = 10.13;breite = 200.99;tempo = -40.5;
Allgemeine Variablen:mouseX;mouseY;width;height;zb int position = mouseX;
![Page 63: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/63.jpg)
mouseX und mouseY sind dynamische Variablen die immer die aktuelle Mausposition speichern.
mouseX ist 6
mouseY ist 2
![Page 64: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/64.jpg)
Variablen Operationen
+,-,*,/,++,--,
+=,-=,*=,/= int tempo;tempo = 10;
tempo = 10 + 10; //20 tempo = 10 - 5; //5 tempo = 10 * 3; //30tempo = 10 / 2; //5tempo++; //11 tempo = tempo + 1;tempo--; //9 tempo = tempo - 1;tempo *= 2 //20 tempo = tempo * 2;tempo /= 2 //5 tempo = tempo/2;
![Page 65: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/65.jpg)
Logik
![Page 66: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/66.jpg)
Logik
if (...) {...}
![Page 67: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/67.jpg)
Boolean
if (boolean) {...}
![Page 68: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/68.jpg)
Boolean
boolean sind true oder false, 1 oder 0.
boolean test;test = true;
if (test == true) {...}
if (test == false) {...}
![Page 69: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/69.jpg)
Boolean
boolean sind true oder false, 1 oder 0.
boolean test;test = false;
if (test == true) {...}
if (test == false) {...}
![Page 70: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/70.jpg)
Boolean Operatoren
<,>,<=,>=,==,!=
int tempo;tempo = 10;
(tempo < 22) -> TRUE(tempo > 20) -> FALSE(tempo <=10) -> TRUE(tempo >= 1) -> TRUE(tempo == 10)-> TRUE(tempo == 8) -> FALSE(tempo != 1) -> TRUE
![Page 71: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/71.jpg)
Logikoperatoren
und &&
oder ||
![Page 72: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/72.jpg)
Logikoperatoren
//beide Bedingungen müssen erfüllt sein
if ( (boolean1) && (boolean2) ) {...}
//eine Bedingung muss erfüllt sein
if ( (boolean1) || (boolean2) ){...}
![Page 73: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/73.jpg)
if - else Varianten
if () { ...} else { ...}
if () { ...} else if () { ...}
if () { ...} else if () { ...} else { ...}
![Page 74: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/74.jpg)
Images
hello.jpg
Data Foldercmd/strg + k
![Page 75: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/75.jpg)
Print Line
println(...);Zeigt in der Konsole den Inhalt einer Variable an
![Page 76: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/76.jpg)
Random
random(max);
random(min, max);
Generiert eine Zufällige Zahl (float)
![Page 77: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/77.jpg)
Arrays
![Page 78: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/78.jpg)
Array
int b1 = 1;
int b2 = 21;
int b3 = 13;
int b4 = -9;
int b5 = 100;
...
Eine Liste von Variablen.Z.b. für die Größe oder Position von verschiedenen Elementen
![Page 79: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/79.jpg)
Array
int b1 = 1;int b2 = 21;int b3 = 13;int b4 = -9;int b5 = 100;
int[] liste = {1, 21, 13, -9, 100};
![Page 80: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/80.jpg)
Array
typ[] name; int, float,... irgendein Name, z.b. blub
![Page 81: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/81.jpg)
Array
int[] liste;
int tempo;
Array, Liste von Variablen
Einzelne Variable
![Page 82: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/82.jpg)
Array
typ[] name = {x, x, x, x, x};
int[] liste = {12, 32, 12, 0, 1};
typ[] name = new int[x];
int[] liste = new int[5];
Alle 5 int’s wäre so erstmal 0
![Page 83: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/83.jpg)
Array
int[] liste = {12, 32, 12, 0, 1};
liste[0]; // 12liste[1]; // 32liste[2]; // 12liste[3]; // 0liste[4]; // 1
5 Positionen und fängt immer bei 0 an!
![Page 84: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/84.jpg)
Array
int[] liste = {12, 32, 12, 0, 1};
Inhalt
Adresse
![Page 85: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/85.jpg)
Array und Loops
float[] liste = new float[10];
for (int i = 0; i < liste.length; i++) {liste[i] = random(100);}
for (int i = 0; i < 10; i++) {println(liste[i]);}
![Page 86: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/86.jpg)
Frieder Nake
![Page 87: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/87.jpg)
1938, Stuttgart
Mathematiker
1963 erste Computerzeichnungen
![Page 88: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/88.jpg)
Zuse Z64 Graphomat 2
![Page 89: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/89.jpg)
Computer from 1960’s
![Page 90: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/90.jpg)
![Page 91: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/91.jpg)
13/9/65 Nr. 3 Zufälliger Polygonzug
![Page 92: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/92.jpg)
13/9/65 Nr. 7 Zufälliger Polygonzug
![Page 93: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/93.jpg)
13/9/65 Nr. 2 (“Klee”)
![Page 94: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/94.jpg)
Geradenscharen Nr. 3 (12/07/1965)
![Page 95: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/95.jpg)
Rechteckschraffuren Nr. 3 (30/03/1965)
![Page 96: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/96.jpg)
Matrizenmultiplikation, Serie 40, 1968
![Page 97: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/97.jpg)
Walk-Through Raster, 1972
![Page 98: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/98.jpg)
Georg Nees
![Page 99: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/99.jpg)
1926, Nürnberg
Mathematiker
Mathematiker, Philosoph
1968 Dissertation über Generative Computergraphik
![Page 100: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/100.jpg)
23-Ecke, 1964
![Page 101: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/101.jpg)
8-ecke
![Page 102: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/102.jpg)
![Page 103: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/103.jpg)
Kreisbogengewirre, vor 1969
untitled
![Page 104: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/104.jpg)
Vera Molnar
![Page 105: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/105.jpg)
1924, Budapest
1942, Kunststudium Budapest
arbeitet seit 1968 nur amComputer
Dialog Between Emotion and Method, 1986
![Page 106: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/106.jpg)
1% Unordnung, 1976
![Page 107: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/107.jpg)
Squares, 1974
![Page 108: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/108.jpg)
144 Trapézes, 1974
![Page 109: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/109.jpg)
144 Trapézes, 1974
![Page 110: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/110.jpg)
25 Squares, 1990
![Page 111: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/111.jpg)
Square Structures, 1986, screenshot
![Page 112: Creative Coding with Processing](https://reader034.fdocuments.net/reader034/viewer/2022042520/58a8da351a28ab5a368b5ef9/html5/thumbnails/112.jpg)
http://freeartbureau.org/fab_activity/the-computer-from-hell/
http://dada.compart-bremen.de/
http://digitalartmuseum.org/index.htm