creative coding 1 - 1 introduction
DESCRIPTION
Introduction in the Processing workshop at the IUAV University of Venice, October 2010TRANSCRIPT
![Page 1: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/1.jpg)
Crea%ve Coding Interac%on Design Lab 1, IUAV, WS 10/11
Till Nagel, FH Potsdam, 10/2010
![Page 2: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/2.jpg)
Lovebytes MaG Pyke, Karsten Schmidt, 2007
![Page 3: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/3.jpg)
We feel fine Jonathan Harris, Sepandar Kamvar, 2005
![Page 4: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/4.jpg)
Translator II, Grower Sabrina Raaf, 2004
![Page 5: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/5.jpg)
Color by Numbers Loove Brooms, Milo Lavén, Erik Krikortz, 2006
![Page 6: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/6.jpg)
Color by Numbers Loove Brooms, Milo Lavén, Erik Krikortz, 2006
![Page 7: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/7.jpg)
1 + 2 + 3 + 4 + 5 = ?
![Page 8: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/8.jpg)
1 + 2 + 3 + 4 + 5 = ?
1 + 2 =
3
![Page 9: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/9.jpg)
1 + 2 + 3 + 4 + 5 = ?
1 + 2
3 + 3 =
6
![Page 10: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/10.jpg)
1 + 2 + 3 + 4 + 5 = ?
1 + 2
3 + 3
6 + 4 =
10
![Page 11: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/11.jpg)
1 + 2 + 3 + 4 + 5 = ?
1 + 2
3 + 3
6 + 4
10 + 5 = 15
![Page 12: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/12.jpg)
Algorithm
![Page 13: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/13.jpg)
From: The Times, 23. November 2005
Algorithm
![Page 14: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/14.jpg)
How to describe these paGerns?
![Page 15: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/15.jpg)
A set of steps or rules.
A language understood by both sides (sender and recipient).
Can be wriEen in various forms: natural language such as English or Italian, diagrams, computer programs, etc
Specific, simple instrucJons. Split up a problem into smaller ones.
Algorithm
![Page 16: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/16.jpg)
Create two 10 × 10 cm squares. Draw an image in the leO one in a way nobody else can see what you are drawing.
Excercise
![Page 17: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/17.jpg)
Create two 10 × 10 cm squares. Draw an image in the leO one in a way nobody else can see what you are drawing.
Find a partner. When both of you are finished, one should explain his drawing to the other one, so he can create a copy of it. This should be done solely by describing the image.
Excercise
![Page 18: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/18.jpg)
Let’s start coding …
![Page 19: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/19.jpg)
Toolbar
Text editor
Messages
Console
Processing
![Page 20: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/20.jpg)
![Page 21: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/21.jpg)
doThis();
doThat();
makeBeautifulGraphics();
Statements
![Page 22: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/22.jpg)
size(100, 100);
size(300, 100);
size(width, height);
![Page 23: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/23.jpg)
background(0);
background(127);
background(255);
background(value);
![Page 24: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/24.jpg)
Coordinate system and posi%ons
![Page 25: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/25.jpg)
![Page 26: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/26.jpg)
![Page 27: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/27.jpg)
![Page 28: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/28.jpg)
line(50, 20, 100, 100);
line(30, 10, 30, 180); line(50, 10, 50, 180); line(90, 120, 180, 95);
line(x1, y1, x2, y2);
![Page 29: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/29.jpg)
rect(50, 20, 100, 100);
rect(10, 10, 50, 50);
rect(80, 70, 60, 110);
rect(x, y, width, height);
![Page 30: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/30.jpg)
ellipse(90, 90, 100, 100);
ellipse(90, 90, 160, 160);
ellipse(110, 120, 70, 30);
ellipse(x, y, width, height);
![Page 31: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/31.jpg)
ellipse(70, 70, 110, 110); rect(80, 80, 100, 100);
rect(80, 80, 100, 100); ellipse(70, 70, 110, 110);
Order of statements
![Page 32: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/32.jpg)
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);
…
Some other drawing statements
![Page 33: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/33.jpg)
fill(0); rect(80, 80, 100, 100);
fill(255); rect(80, 80, 100, 100); fill(0); ellipse(70, 70, 110, 110);
Colours: fill(value);
![Page 34: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/34.jpg)
stroke(0); rect(50, 20, 100, 100);
stroke(255); rect(50, 20, 100, 100);
stroke(255); fill(0); rect(50, 20, 100, 100);
Colours: stroke(value);
![Page 35: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/35.jpg)
fill(255); rect(80, 80, 100, 100); fill(0, 100); ellipse(70, 70, 110, 110);
fill(255); rect(80, 80, 100, 100); fill(0, 10); ellipse(70, 70, 110, 110);
Transparency
![Page 36: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/36.jpg)
noStroke();
noFill();
strokeWeight(weight);
…
Other colour statements
![Page 37: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/37.jpg)
![Page 38: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/38.jpg)
E1: Write your first Processing sketch. Download and install Processing from hEp://processing.org/download Sketch a composiJon out of two intersecJng lines and one rectangle on paper, then re-‐create it in Processing.
E2: Draw a face. Use only the following funcJons: size(), background(), stroke(), noStroke(), fill(), noFill(), ellipse()
E3: Read the tutorial and reference about colours. Create a coloured 2D filling paEern with simple shapes.
Excercises
![Page 39: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/39.jpg)
H1: Find some paEern in the real world. Take the original or make a photo and bring it in, tomorrow.
H2: Read the interview with Jared Tarbell (Processing book, p. 157 or handout). Try to understand the algorithms and think about how to implement those in Processing.
Homework
![Page 40: Creative Coding 1 - 1 Introduction](https://reader031.vdocument.in/reader031/viewer/2022013111/54c7a4784a7959e7478b461e/html5/thumbnails/40.jpg)
Thank you.
Copyright Till Nagel, FH Potsdam, 10/2010