1. The document discusses various processing functions for drawing shapes and images including rect(), ellipse(), translate(), rotate(), scale(), and image(). 2. It provides examples of how to use these functions individually or together to manipulate shapes and images on a canvas. 3. Key functions covered include using translate() and rotate() to move and rotate shapes, scale() to resize shapes and images, and imageMode() to control how images are positioned on the canvas.

1. 1

2. ZAWA WORKS
2
FMS 2
Processing 6
@zawaworks
@Zawa_works

3. 3
for , while
size()
background() , ll(), stroke(), strokeWeight()
rect(), ellipse(), arc()
mousePressed(), keyPressed()
random()
int, oat, string, boolean
if

4. 4

5. 5

6. surface.setLocation(x, y)
6
int count = 0;
void setup() {
size(500, 500);
}
void draw() {
//60フレーム後に実行画面の位置を変更
if (count%60 == 0) {
int x = (int)random(displayWidth - width);
int y = (int)random(displayHeight - height);
surface.setLocation(x, y);
}
count++;
}
60

7. surface.setLocation(x, y)
7
size(640, 480);
int screenX = (displayWidth - width)/2;
int screenY = (displayHeight - height)/2;
surface.setLocation(screenX, screenY);

8. fullScreen()
8
fullScreen();
background(0);
ellipse(width/2, height/2, 200, 200);
size(640, 480);
background(0);
ellipse(width/2, height/2, 200, 200);
fullScreen()

9. 9

10. map(a, b, c, d, e)
10
a b-c d-e

11. map(a, b, c, d, e)
11
int progress = 0;
int progressMax = 300;
void setup() {
size(500, 100);
noStroke();
}
void draw() {
background(255);
fill(0, 255, 0 );
//進行状況を0~widthの範囲に変換
float w = map(progress, 0, progressMax, 0, width);
rect(0, 0, w, height);
progress++;
}
a b-c d-e

12. map(a, b, c, d, e)
HP
HP
12
int hpMax = 300;
int hp = hpMax;
int damage = 30;
void setup() {
size(500, 100);
noStroke();
}
void draw() {
background(255);
float w = map(hp, 0, hpMax, 0, width);
fill(0, 255, 0 );
rect(0, 0, w, height);
}
void mousePressed(){
hp -= damage;
}
a b-c d-e

13. map(a, b, c, d, e)
13
int progress = 0;
int progressMax = 300;
void setup() {
size(500, 500);
noStroke();
}
void draw() {
background(255);
fill(0, 255, 0 );
//進行状況を0~widthの範囲に変換
float rad = map(progress, 0, progressMax, -HALF_PI, 3*PI/2 );
arc(width/2, height/2, 400, 400, -HALF_PI, rad);
progress++;
}

14. map(a, b, c, d, e)
14
int count = 0;
int x0, y0, x1, y1;
void setup() {
size(500, 500);
x0 = (int)random(width);
y0 = (int)random(height);
x1 = (int)random(width);
y1 = (int)random(height);
}
void draw() {
background(228);
fill(255, 0, 0);
ellipse(x0, y0, 10, 10);
ellipse(x1, y1, 10, 10);
float x = map(count, 0, 100, x0, x1);
float y = map(count, 0, 100, y0, y1);
fill(255);
ellipse(x, y, 50, 50);
count++;
if (count >= 100)count = 0;
}

15. 15

16. translate(x, y)
16
size(640, 360);
background(0);
fill(255);
ellipse(0, 0, 100, 100);
size(640, 360);
background(0);
translate(width, height);//追加
fill(255);
ellipse(0, 0, 100, 100);
translate()

17. translate(x, y)
17
translate(x, y)
(x, y)
( , )

18. translate(x, y)
18
void setup() {
size(500, 500);
noCursor();
}
void draw() {
background(0);
//複数の図形がマウスに追従する
translate(mouseX, mouseY);
fill(255);
ellipse(-100, 100, 100, 100);
fill(255, 0, 0);
rect(50, -100, 100, 100);
}
push();//追加
translate(mouseX, mouseY);
fill(255);
ellipse(-100, 100, 100, 100);
pop();//追加
push() pop() ellipse()

19. rotate(rad)
19
int count = 0;
void setup() {
size(500, 500);
}
void draw() {
background(0);
rotate(radians(count));
fill(255, 0, 0);
rect(100, 50, 100, 100);
count += 2;
}
1

20. rotate(rad)
20
rotate(rad)
rad

21. rotate(rad)
21
int count = 0;
void setup() {
size(500, 500);
}
void draw() {
background(0);
translate(width/2, height/2);//追加
rotate(radians(count));
fill(255, 0, 0);
rect(100, 50, 100, 100);
count += 2;
}
1

22. rotate(rad)
22
int count = 0;
void setup() {
size(500, 500);
}
void draw() {
background(0);
translate(width/2, height/2);
rotate(radians(count));
translate(-50, -50);//-rectの幅/2, -rectの高さ/2
fill(255, 0, 0);
rect(0, 0, 100, 100);
count += 2;
}

23. scale(s)
scale()
23
size(500, 500);
rect(50, 50, 100, 100);
scale( )
scale( . ) scale( , )
size(500, 500);
scale(3);
rect(50, 50, 100, 100);
size(500, 500);
scale(0.4);
rect(50, 50, 100, 100);
size(500, 500);
scale(2, 3);
rect(50, 50, 100, 100);

24. scale(s)
24
scale(s)
s

25. scale(s)
scale( , )
25
scale(- , )
scale( , - ) scale(- , - )
size(500, 500);
push();
translate(width/2, height/2);
scale(-1, 1);//ここを書き換える
rect(50, 50, 100, 100);
pop();
stroke(255, 0, 0);
line(width/2, 0, width/2, height);
line(0, height/2 , width, height/2);

26. scale(s)
26
boolean isLeft = false;
void setup() {
size(500, 500);
}
void draw() {
background(0);
translate(width/2, height/2);
if (isLeft)scale(-1, 1);
fill(255, 0, 0);
rect(0, 0, 100, 100);
}
void keyPressed() {
if (keyCode == LEFT)isLeft = true;
if (keyCode == RIGHT)isLeft = false;
}

27. scale(s)
27

28. 28

29. rectMode(mode)
rect()
29
void setup() {
size(500, 500);
rectMode(CENTER);
}
void draw() {
stroke(0);
rect(width/2, height/2, 100, 100);
stroke(255, 0, 0);
line(width/2, 0, width/2, height);
line(0, height/2, width, height/2);
}
rectMode(CENTER)

30. rectMode(mode)
30
int count = 0;
void setup() {
size(500, 500);
rectMode(CENTER);
}
void draw() {
background(0);
translate(width/2, height/2);
rotate(radians(count));
fill(255, 0, 0);
rect(0, 0, 100, 100);
count += 2;
}

31. (x , y )
(x , y )
rectMode()
31
CORNER
rect(x, y, width, height)
(x, y)
CENTER
rect(x, y, width, height)
(x, y)
CORNERS
rect(x , y , x , y )
(x , y ) (x , y )
RADIUS
rect(x, y, w_h, h_h)
(x, y)
(x, y)
w
h
(x, y)
w_h
h_h
(x, y)
w
h

32. ellipseMode()
32
CORNER
ellipse(x, y, width, height)
(x, y)
CENTER
ellipse(x, y, width, height)
(x, y)
CORNERS
ellipse(x , y , x , y )
(x , y ) (x , y )
RADIUS
ellipse(x, y, w_h, h_h)
(x, y)
(x, y)
w
h
(x , y )
(x , y )
(x, y)
w
h
(x, y)
w_h
h_h

33. (x, y)
w
h
imageMode()
33
PImage img;
void setup() {
size(500, 500);
img = loadImage(“images/bear.jpg”);
imageMode(CENTER);//ここを書き換える
}
void draw() {
image(img, width/2, height/2);
stroke(255, 0, 0);
line(width/2, 0, width/2, height);
line(0, height/2, width, height/2);
}
CORNER
image(img, x, y, width, height)
(x, y)
CORNERS
image(img, x , y , x , y )
(x , y ), (x , y )
CENTER
image(img, x, y, width, height)
(x, y)
(x, y)
w
h
(x , y )
(x , y )

34. imageMode()
rotate()
34
PImage img;
int x, y;
float rad;
void setup() {
size(500, 500);
img = loadImage("images/topview_man.png");
x = width/2;
y = height/2;
rad = 0;
imageMode(CENTER);
}
void draw() {
background(255);
translate(x, y);
rotate(rad);
image(img, 0, 0, 100, 100);
if (keyPressed&&keyCode == UP) {
rad = PI;
y -= 10;
}
if (keyPressed&&keyCode == DOWN) {
rad = 0;
y += 10;
}
if (keyPressed&&keyCode == LEFT) {
rad = HALF_PI;
x -= 10;
}
if (keyPressed&&keyCode == RIGHT) {
rad = -HALF_PI;
x += 10;
}
}

35. imageMode(mode)
rotate()
35
rotate( ) rotate(HALF_PI) rotate(PI) rotate(-HALF_PI)

36. imageMode()
scale()
36
PImage img;
float s = 0;
float ds = 0.02;
void setup() {
size(500, 500);
img = loadImage("images/heart_eyes.png");
imageMode(CENTER);
}
void draw() {
background(255);
translate(width/2, height/2);
scale(s);
image(img, 0, 0);
s += ds;
if(s > 1 || s < 0)ds = -ds;
}