creative coding 1 - 3 conditions
DESCRIPTION
TRANSCRIPT
![Page 1: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/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 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/2.jpg)
A man paints with his brain, not with his hands. “ Michelangelo
![Page 3: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/3.jpg)
Processing Basics
![Page 4: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/4.jpg)
Example: RectResizeWithMouse
Processing Basics
![Page 5: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/5.jpg)
Processing Reference
![Page 6: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/6.jpg)
A more in-‐depth look …
![Page 7: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/7.jpg)
Variables
![Page 8: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/8.jpg)
Variables
![Page 9: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/9.jpg)
Variables
![Page 10: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/10.jpg)
Variables
![Page 11: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/11.jpg)
Variables
![Page 12: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/12.jpg)
Variables
![Page 13: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/13.jpg)
Variables
![Page 14: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/14.jpg)
void setup() {
size(200, 200);
}
void draw() {
ellipse(mouseX, mouseY, 20, 20);
}
Variables
![Page 15: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/15.jpg)
int x = 10;
void setup() {
size(200, 200);
}
void draw() {
line(x, 0, x, 100);
x = x + 2;
}
Con%nuous variable update
![Page 16: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/16.jpg)
Con%nuous variable update
![Page 17: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/17.jpg)
Con%nuous variable update
![Page 18: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/18.jpg)
Con%nuous variable update
![Page 19: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/19.jpg)
Con%nuous variable update
![Page 20: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/20.jpg)
Example: VarLoopChange
Con%nuous variable update
![Page 21: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/21.jpg)
void setup() {
size(200, 200);
}
void draw() {
fill(mouseX, mouseY, 0);
ellipse(mouseX, mouseY, 20, 20);
}
Example: Mul;Use
Mul%ple usage of variables
![Page 22: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/22.jpg)
Reading discussion
![Page 23: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/23.jpg)
Condi%onals
![Page 24: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/24.jpg)
if (test) {
statements
}
Images from: Casey Reas, Ben Fry, Processing, MIT Press, 2007
Condi%onals
![Page 25: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/25.jpg)
if (x < 150) {
line(20, 20, 180, 180);
}
Condi%onals
![Page 26: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/26.jpg)
if (test) {
statements 1
}
else {
statements 2
}
Condi%onals
![Page 27: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/27.jpg)
if (x < 150) {
line(20, 20, 180, 180);
}
else {
ellipse(50, 50, 30, 30);
}
Example: If1
Condi%onals
![Page 28: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/28.jpg)
Condi;onals control the program flow.
Each condi;on can be either true or false.
It checks if a condi;on is true.
If condi;on is true, the inner statements are executed.
Condi%onals
![Page 29: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/29.jpg)
int a = 10;
int b = 20;
if (a > 10) {
line(10, 10, 100, 10);
}
if (b >= 20) {
line(10, 20, 100, 20);
}
Condi%onals
![Page 30: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/30.jpg)
int a = 10;
int b = 20;
if (a > 10) {
line(10, 10, 100, 10);
}
if (b > 20) {
line(10, 20, 100, 20);
}
Condi%onals
![Page 31: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/31.jpg)
int a = 10;
int b = 20;
if (a >= 10) {
line(10, 10, 100, 10);
b = b + 1;
}
if (b > 20) {
line(10, 20, 100, 20);
}
Condi%onals
![Page 32: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/32.jpg)
> greater than
< less than
>= greater than or equal to
<= less than or equal to
== equal to
!= not equal to
Comparison operators
![Page 33: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/33.jpg)
Example: PaPern1
Simple paTern crea%on: An example
![Page 34: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/34.jpg)
E6: Download and modify sketch to create different paPerns.
hTp://%llnagel.com/iuav/PaTernTemplate.zip
Varia%on: Make it interac;ve so that the results depends on mouse movements.
Varia%on: Use random() to randomize the graphic.
Exercises
![Page 35: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/35.jpg)
if (mousePressed) {
point(100, 200);
}
Condi%onals & Interac%on
![Page 36: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/36.jpg)
if (mousePressed) {
x = x + 1;
}
ellipse(x, y, 10, 10);
Condi%onals & Interac%on
![Page 37: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/37.jpg)
boolean upper = mouseY < height/2;
if (upper) {
fill(255, 0, 0);
}
else {
fill(0, 255, 0);
}
ellipse(mouseX, mouseY, 10, 10);
Example: IfElseShowcase
Boolean variables
![Page 38: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/38.jpg)
if (mouseX > 50) {
fill(255, 0, 0);
}
rect(50, 0, 100, height);
Example: If2
Combined condi%ons
![Page 39: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/39.jpg)
if (mouseX > 50 && mouseX < 150) {
fill(255, 0, 0);
}
rect(50, 0, 100, height);
Combined condi%ons
![Page 40: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/40.jpg)
if (mouseX > 50 && mouseX < 150) {
fill(255, 0, 0);
}
else {
fill(255);
}
rect(50, 0, 100, height);
Combined condi%ons
![Page 41: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/41.jpg)
&& and
|| or
! not
Logical operators
![Page 42: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/42.jpg)
Exercises: Saving sketches
![Page 43: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/43.jpg)
E8: Create a simple drawing program. A visual element should be drawn at the mouse posi;on if the user has pressed a mouse buPon.
Varia%on: Use mouseButton to draw different shapes dependent on which mouse buPon the user has pressed.
E9: Draw an ellipse which increases its size as long as the mouseBuPon is pressed.
Varia%on: Make other visual variables dependent on the size (strokeWeight, colour, transparency…)
Exercises
![Page 44: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/44.jpg)
E10: Create a buPon with two states: When the mouse is over and when it is out, again.
Varia%on: Implement mouse click, too.
Varia%on: Use this buPon to ac;vate a behaviour.
Exercises
![Page 45: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/45.jpg)
A1: Create three buPons. Each of it should trigger some ac;on.
-‐ As group of 2 students
-‐ Make sketches (on paper) to discuss about your idea
-‐ Thursday: brief presenta;on
Assignment
![Page 46: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/46.jpg)
boolean active = false;
if (mousePressed) {
active = true;
}
if (active) {
ellipse(x, y, 10, 10);
}
![Page 47: Creative Coding 1 - 3 Conditions](https://reader034.vdocument.in/reader034/viewer/2022042613/54c7a4754a7959c0408b4633/html5/thumbnails/47.jpg)
Thank you.
Copyright Till Nagel, FH Potsdam, 10/2010