Basics of Programming in Processing, Part 1. This set of slides was prepared for the course Fundamental of New Media in NCTU Architecture.

1. Processing: Basics
June-Hao Hou

2. Basic Structure
setup()
draw()

3. Basic Structure
setup()
draw()
events?
event handlers
declarations
True
False
eventdetection

4. Basic Structure
setup()
draw()
events?
event handlers
True
False
declarationsLibraries Classes
eventdetection

5. Coordinates
stroke(0, 128, 128);
noFill();
rect(0, 0, 10, 10);
+x
+y
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

6. Basic Shapes
point(20, 30);
(20, 30)
(3, 5)
(30, 50)
line(3, 5, 30, 50);
rect(0, 0, 10, 10);
(0, 0)
10
10
ellipse(20, 30, 40, 60);
(20, 30)
40
60

7. Modes of Shape
rectMode(CORNER);
rect(0, 0, 10, 10);
(0, 0)
10
10
(0, 0)
(10, 10)
rectMode(CORNERS);
rect(0, 0, 10, 10);
rectMode(CENTER);
rect(0, 0, 10, 10);
(0, 0)
10
10
rectMode(RADIUS);
rect(0, 0, 10, 10);
(0, 0)
10
10
預設值

8. Variable Scope
int x;
void setup() {
int w = 200;
x = 0;
size(w, w);
}
void draw() {
int y;
x = x + 1;
y = x * 2;
rect(0, 0, x, y);
}
int x
int w
int y
draw()
setup()

9. Variable Scope
class Cube {
float cx;
float cy;
float size;
Cube(float x, float y, float s) {
cx = x;
cy = y;
size = s;
}
float volume() {
float v;
v = size * size * size;
return v;
}
}
float cx
float cy
float size
float x
float y
float s
float v
Cube
Cube()
volume()

10. For Loop
expressions
condition
True
False
init-statement
next-statement
•init-statement
初始敘述
•condition
繼續執⾏行的條件
•next-statement
下次執⾏行前敘述
•expressions
迴圈主體
for (init; cond; next)
{
expressions
{

11. For Loop
for (int i = 0; i < 5; i++) {
print(i);
}
01234
for (int i = 0; i <= 5; i++) {
print(i);
}
012345
for (int i = 1; i < 5; i++) {
print(i);
}
1234
for (int i = 0; i < 10; i = i + 2) {
print(i);
}
02468

12. For Loop
for (int i = 0; i < 5; i++) {
print(_______);
}
43210
for (int i = ____; ____; i--) {
print(i);
}
43210
for (int i = -5; i < 5; i++) {
print(_______);
}
0123456789
for (int i = 0; i < 10; i++) {
print(i / 2);
}
Exercise

13. For Loop
for (int i = 0; i < 5; i++) {
print(4 - i);
}
43210
for (int i = 4; i >= 0; i--) {
print(i);
}
43210
for (int i = -5; i < 5; i++) {
print(i + 5);
}
0123456789
for (int i = 0; i < 10; i++) {
print(i / 2);
}
0011223344
Answ
er

14. For Loop
for (int i = 0; i < 100; i = i + 10) {
if (i % 5 == 0) i = i - 5;
println(i);
}
for (int i = 0; true; i++) {
// Do something...
}
<< 執⾏行次數？
Exercise

15. For Loop
for (int i = 0; i < 100; i = i + 10) {
if (i % 5 == 0) i = i - 5;
println(i);
}
-5
0
5
10
15
...
90 (執⾏行20次)
for (int i = 0; true; i++) {
// Do something...
}
(永不停⽌止)
Answ
er

16. For Loop
for (int i = 0; i < 5; i++) {
print("X");
}
println();
XXXXX
for (int j = 0; j < 5; j++) {
for (int i = 0; i < 5; i++) {
print("X");
}
println();
}
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX

17. For Loop
for (int j = 0; j < 5; j++) {
for (int i = j; i < 5; i++) {
print("X");
}
println();
}
for (int j = 0; j < 5; j++) {
for (int i = 0; i < 5; i++) {
if (______) {
print("X");
} else {
print(" ");
}
}
println();
}
X X X
X X X
X X X
X X X
X X X
Exercise

18. For Loop
for (int j = 0; j < 5; j++) {
for (int i = j; i < 5; i++) {
print("X");
}
println();
}
XXXXX
XXXX
XXX
XX
X
for (int j = 0; j < 5; j++) {
for (int i = 0; i < 5; i++) {
if (i % 2 == 0) {
print("X");
} else {
print(" ");
}
}
println();
}
X X X
X X X
X X X
X X X
X X X
Answ
er

19. For Loop
X X X
X X X
X X X
i=0 i=1 i=2 i=3 i=4
j=0
j=1
j=2
j=3
j=4
(i % 2) == 0 && (j % 2) == 0

20. For Loop
X X X
X X
X X
X X
X X X
i=0 i=1 i=2 i=3 i=4
j=0
j=1
j=2
j=3
j=4
((i == 0 || i == 4) || (j == 0 || j == 4))
&& (i != j) && (i + j != 4)

21. For Loop
XXXXX
X X
X X
X X
XXXXX
X X
X X
X
X X
X X
XXXXX
XXX
X
XXX
XXXXX
X X X
X X
X X X
X X
X X X
XXXX
X XXX
XX XX
XXX X
XXXX
XXXX
XXX X
XX XX
X XXX
XXXX
X X
XX XX
XXXXX
XX XX
X X
XXX
X X X
XX XX
X X X
XXX
X
X X
X X
X X
X
Exercise

22. For Loop
XXXXX
X X
X X
X X
XXXXX
X X
X X
X
X X
X X
XXXXX
XXX
X
XXX
XXXXX
((i == 0) || (i == 4)) || ((j == 0) || (j == 4))
(i == j) || (i + j == 4)
((i >= j) && (i <= 4 - j)) || ((i <= j) && (i >= 4 - j))
((i == 0) || (i == 4)) || ((j == 0) || (j == 4))
(i == j) || (i + j == 4)
((i >= j) && (i <= 4 - j)) || ((i <= j) && (i >= 4 - j))
((i == 0) || (i == 4)) || ((j == 0) || (j == 4))
(i == j) || (i + j == 4)
((i >= j) && (i <= 4 - j)) || ((i <= j) && (i >= 4 - j))
Answ
er
1 2 3
1
2
3
參考答案，並⾮非唯⼀一解法

23. For Loop
X X X
X X
X X X
X X
X X X
XXXX
X XXX
XX XX
XXX X
XXXX
XXXX
XXX X
XX XX
X XXX
XXXX
(i + j) % 2 == 0
!(i == j)
!(i + j == 4)
(i + j) % 2 == 0
!(i == j)
!(i + j == 4)
(i + j) % 2 == 0
!(i == j)
!(i + j == 4)
Answ
er
1 2 3
1
2
3
參考答案，並⾮非唯⼀一解法

24. For Loop
X X
XX XX
XXXXX
XX XX
X X
XXX
X X X
XX XX
X X X
XXX
X
X X
X X
X X
X
((i >= j) && (i >= 4 - j)) || ((i <= j) && (i <= 4 - j))
!((i == j) || (i + j == 4))
(i + j == 2) || (i + j == 6) || (j - i == 2) || (i - j ==
2)
((i >= j) && (i >= 4 - j)) || ((i <= j) && (i <= 4 - j))
!((i == j) || (i + j == 4))
(i + j == 2) || (i + j == 6) || (j - i == 2) || (i - j ==
2)
((i >= j) && (i >= 4 - j)) || ((i <= j) && (i <= 4 - j))
!((i == j) || (i + j == 4))
(i + j == 2) || (i + j == 6) || (j - i == 2) || (i - j ==
2)
Answ
er
1 2 3
1
2
3
參考答案，並⾮非唯⼀一解法

25. For Loop
XXXXX
XXXX
XXX
XX
X
X
XX
XXX
XXXX
XXXXX
XXXXX
XXXX
XXX
XX
X
X
XX
XXX
XXXX
XXXXX
i >= j
i <= j
i <= 4 - j
i >= 4 - j
i >= j
i <= j
i <= 4 - j
i >= 4 - j
i >= j
i <= j
i <= 4 - j
i >= 4 - j
i >= j
i <= j
i <= 4 - j
i >= 4 - j
Exam
ples
1 2 3
1
2
3
4
4
補
充
範
例

26. For Loop
int i = 0;
for (int i = 0; i < 5; i++) {
print(i);
}
print(i);
int i;
for (i = 0; i < 5; i++) {
print(i);
}
print(i);
Exercise

27. For Loop
int i = 0;
for (int i = 0; i < 5; i++) {
print(i);
}
print(i);
012340
int i = 0;
for (i = 0; i < 5; i++) {
print(i);
}
print(i);
012345
Answ
er

28. While Loop
int k = 0;
while (k < 5) {
print(k);
k++;
}
01234
for (int k = 0; k < 5; k++) {
print(k);
}
同義寫法
01234

29. While Loop
int k = 0;
do {
print(k);
k++;
} while (k < 5);
01234

30. Calculation
a = ceil(9.2); 10
a = floor(9.2); 9
a = round(9.2); 9
x = constrain(x, 0, 10);
c = lerp(0, 10, 0.5); c = 5
n = norm(5, 0, 10); n = 0.5
m = map(val, low1, high1, low2, high2);
d = dist(x1, y1, x2, y2);

31. Coding Style
float vx,vy, x,y;
void setup() {
size(200,200 );
vx=random(4);
vy= random(4);
x=random( 100)+50;
y=random(100)+50;
smooth(); }
void draw(){
background(102);
float diameter=30;
float radius=diameter/2.0;
x=x+ vx;
y=y+vy;
if((x<radius)||(x >(width-radius))) {
vx*=-1; }
if((y < radius)||(y > (height -radius))) {
vy*= -1;}
ellipse(x, y, diameter, diameter);
}
float vx, vy, x, y;
void setup() {
size(200, 200);
vx = random(4);
vy = random(4);
x = random(100) + 50;
y = random(100) + 50;
smooth();
}
void draw() {
background(102);
float diameter = 30;
float radius = diameter / 2.0;
x = x + vx;
y = y + vy;
if ((x < radius) || (x > (width - radius))) {
vx *= -1;
}
if ((y < radius) || (y > (height - radius))) {
vy *= -1;
}
ellipse(x, y, diameter, diameter);
}
You are a designer. Try to make your code pretty.
X
After using
Space and
Ctrl-T
(Cmd-T on
the Mac).

32. OpenProcessing.org
http://www.openprocessing.org/user/907
Student
works
Examples