DES 400 Creative Coding Art/Science Collaboration Example ...
Kick off Creative Coding
Transcript of Kick off Creative Coding
![Page 1: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/1.jpg)
![Page 2: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/2.jpg)
![Page 3: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/3.jpg)
the intention
![Page 4: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/4.jpg)
the system
the intention
![Page 5: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/5.jpg)
the system
the outcome
the intention
![Page 6: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/6.jpg)
the system();
the outcome
the intention
![Page 7: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/7.jpg)
“Infinity” by John Maeda’s (1993)
![Page 8: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/8.jpg)
“Infinity” by John Maeda’s (1993) 10,000 interconnected loops, generated by algorithm.
![Page 9: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/9.jpg)
John Maeda, Design By Numbers, P. 175
» But drawing a stroke with a pen is no different from drawing a stroke with a mouse. The real challenge is to discover the intrinsinc properties of the new medium and to find out how the stroke you "draw" via computation is one you could never draw, or even imagine «
![Page 10: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/10.jpg)
![Page 11: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/11.jpg)
![Page 12: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/12.jpg)
![Page 14: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/14.jpg)
The Preservation of Favored Traces by Ben Fry (2009)
http://benfry.com/traces/
![Page 15: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/15.jpg)
Poetry On The Road 2003 Boris Müller 2003
![Page 16: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/16.jpg)
Poetry On The Road 2003 Boris Müller 2003
http://www.esono.com/boris/projects/poetry03/visualpoetry03/visualpoetry.html
![Page 17: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/17.jpg)
Generated Entropy Martin W Maier 2009
![Page 18: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/18.jpg)
Generated Entropy Martin W Maier 2009
![Page 19: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/19.jpg)
Generated Entropy Martin W Maier 2009
![Page 20: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/20.jpg)
COP15 okdeluxe 2009
![Page 21: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/21.jpg)
COP15 okdeluxe 2009
![Page 23: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/23.jpg)
Computational Couture Mary Huang
![Page 24: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/24.jpg)
Computational Couture Mary Huang
http://www.continuumfashion.com/Ddress/
![Page 25: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/25.jpg)
My little piece of Privacy Niklas Roy 2010
![Page 26: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/26.jpg)
The V Motion Project 2012
![Page 27: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/27.jpg)
#Task1
Beschreibt ein Processing Projekt in einem 5 Minütigen Vortrag. Titel, Autor(ren), Kurzbeschreibung, Abbildung(en), Quelle1. Warum habt ihr das Projekt gewählt? (Ästhetische Gründe, interessiert euch das Thema…)
2. Was passiert im Hintergrund (Techniken), wie würdet ihr es umsetzen
www.processing.org http://www.creativeapplications.net
![Page 28: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/28.jpg)
SMS Airplanes Christian Gross 2011
![Page 29: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/29.jpg)
SMS Airplanes Christian Gross 2011
![Page 30: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/30.jpg)
Algorithm
![Page 31: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/31.jpg)
Algorithm
A language understood by both sides (sender and recipient)
Specific, simple instructions. Split up a problem into smaller ones.
![Page 32: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/32.jpg)
Übung
Zeichne zwei 10x10cm Rechtecke auf ein leeres Blatt. Zeichne ein Bild darauf, sodass niemand es sehen kann. Finde einen Partner. Wenn Ihr beide fertig seid, dann erkläre dem anderen deine Zeichnung und erzeugt so eine Kopie.
![Page 34: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/34.jpg)
Processing the programm
![Page 35: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/35.jpg)
size(width, height);
size(100, 100);
size(100, 300);
![Page 36: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/36.jpg)
Coordinate system and positions
point(0, 0);
point(120, 0);
point(0, 150);
point(340, 370);
![Page 37: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/37.jpg)
line(x1, y1, x2, y2);
line(50, 20, 100, 100);
line(30, 10, 30, 80); line(50, 10, 50, 80); line(10, 10, 80, 95);
![Page 38: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/38.jpg)
rect(x, y, width, height);
rect(50, 20, 20, 20);
rect(0, 0, 60, 60); rect(10, 10, 40, 70);
![Page 39: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/39.jpg)
ellipse(x, y, width, height);
ellipse(50, 50, 30, 30);
ellipse(50, 50, 60, 50); ellipse(50, 50, 20, 30);
![Page 40: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/40.jpg)
ellipse(x, y, width, height);
ellipse(50, 50, 30, 30);
ellipse(50, 50, 60, 50); ellipse(50, 50, 20, 30);
![Page 41: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/41.jpg)
Other drawing functions
triangle(x1, y1, x2, y2, x3, y3);
quad(x1, y1, x2, y2, x3, y3, x4, y4);
curve(x1, y1, x2, y2, x3, y3, x4, y4);
arc(x, y, width, height, start, stop);
...
![Page 42: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/42.jpg)
Color
![Page 43: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/43.jpg)
background(color);
background(100, 0, 200);
background(100);
![Page 44: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/44.jpg)
fill(red, green, blue);
ellipse(50, 50, 60, 50);
fill(100, 0, 200); ellipse(50, 50, 20, 30);
![Page 45: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/45.jpg)
stroke(red, green, blue);
smooth();
stroke(255, 100, 0); ellipse(50, 50, 60, 50);
noStroke(); fill(100, 0, 200); ellipse(50, 50, 20, 30);
![Page 46: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/46.jpg)
Transparency
smooth();
stroke(255, 100, 0); ellipse(50, 50, 60, 50);
noStroke(); fill(100, 0, 200, 30); ellipse(50, 50, 20, 30);
![Page 47: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/47.jpg)
Transparency
smooth();
stroke(255, 100, 0); ellipse(50, 50, 60, 50);
noStroke(); fill(100, 0, 200, 30); ellipse(50, 50, 20, 30);
![Page 48: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/48.jpg)
Other color functions
noStroke();
noFill();
strokeWeight(weight);
![Page 49: Kick off Creative Coding](https://reader031.fdocuments.us/reader031/viewer/2022032208/588084c51a28ab35718b5653/html5/thumbnails/49.jpg)
all Exercises in 500x500px
E1: Schreibe dein erstes Processing sketch. Zeichne eine Komposition aus sich kreuzenden Linien und einem Rechteck auf ein Blattpapier, danach kopiere dies mit Processing.
E2: Zeichne ein Gesicht Zeichne eine Anordnung verschiedener Kreise auf einfarbigem Grund.
Verwende nur Graustufen sowie die Befehle: »size«, »background«, »fill«, »noFill«, »stroke«, »noStroke«, »strokeWeight«, »ellipseMode« und »ellipse«.
E3: Erzeuge eine Kopie Du hast alle Werkzeuge die dir Processing bietet.