Processingでよく使うけど周りが知ってる人が少ない命令や、ゲームやコンテンツ制作でどう使っているのかを発表した

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;
}