Processing Community Day Tokyo https://pcd-tokyo.github.io/ 上記イベントのワークショップ資料です。

1. 2時間で！
Processingでプログラミング入門
@reona396

2. 自己紹介
● reona396 / レオナ
● インタラクション&フロントエンドエンジニア
● Processing歴8年くらい
● 「[普及版]ジェネラティブ・アート」編集協力
名前(※旧姓の本名)載せていただいてます。良い本なのでオススメです！

3. みなさんのことが知りたいです！！！
● プログラミング初めてor初心者という方！
● 逆に、プログラミングでご飯食べてますという方！
● Processingが初めての方！
● このワークショップに参加した理由は？
○ Processingってなんだろうと思って
○ デジタルアートに興味があって
○ プログラミング教育に興味があって
○ 数学や三角関数というキーワードが気になって
○ なんとなく
○ 他のワークショップに行きたかったが売り切れてたので仕方なく…

4. 2時間しかないので急ぎ足進行ですが
ご質問があればどうぞお気軽に！
あとからTwitterとかで質問していただいても大丈夫です！！

5. 本ワークショップの目標
Processingでお花を描きます！

6. 本ワークショップでお伝えしたいこと
● プログラミングの楽しさ
● Processingの面白さ
● プログラミングの基礎
● 三角関数の便利さ

7. プログラミングの基礎
● 順次:プログラムは順番通りに動く
● 反復:プログラムは繰り返しが得意
● 分岐:条件によってプログラムから異なる結果を得る
Processingを動かしながら実際に体験していきましょう！

8. まずはProcessingを起動！
おめでとうございます！！最初の一歩を踏み出しましたね！

9. Processingの画面構成
実行ボタン / 停止ボタン
プログラム(コード)を書くところ
エラーメッセージが出るところ
(エラーは怖くないです！)

10. キャンバスをつくる
void setup() {
size(400, 400);
}

11. キャンバスをつくる

12. キャンバスをつくる
void setup() {
size(400, 400);
}
ひとかたまり

13. キャンバスをつくる
void setup() {
size(400, 400);
}
文の終わりに必ずつける

14. キャンバスをつくる
void setup() {
size(400, 400);
}
キャンバスの
横の長さ
キャンバスの
縦の長さ

15. 円を描く
void setup() {
size(400, 400);
}
void draw() {
ellipse(200, 200, 100, 100);
}

16. 円を描く

17. 円を描く - setup関数とdraw関数
void setup() {
size(400, 400);
}
void draw() {
ellipse(200, 200, 100, 100);
}
開始時に一度だけ
読み込まれる
何度も
繰り返す

18. 円を描く - パラメータ
〜このスライド以降setup関数省略〜
void draw() {
ellipse(200, 200, 100, 100);
}
円の中心の
x座標
円の中心の
y座標
円の横の長さ
円の縦の長さ

19. 円を描く - Processingの座標について
void draw() {
ellipse(200, 200, 100, 100);
ellipse(100, 100, 50, 25);
ellipse(350, 250, 80, 150);
}
x軸方向
y軸方向

20. 色をつける - 背景色、線の色、塗りつぶし
void draw() {
background(50, 100, 200);
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}

21. 色をつける - 背景色、線の色、塗りつぶし

22. 色をつける - 背景色、線の色、塗りつぶし
void draw() {
background(50, 100, 200);
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}
背景色の指定
図形の枠線の色の指定
図形の塗りつぶしの色の指定

23. 色をつける - RGBで色を指定する
void draw() {
background(50, 100, 200);
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}
(赤, 緑, 青)がそれぞれ
どれくらいの割合かを
0〜255の数値で示す
RGB で指定している

24. 2行ずつ順番を入れ替えてみよう
void draw() {
background(255, 255, 255);
noStroke();
fill(255, 0, 0);
ellipse(150, 200, 150, 150);
fill(0, 0, 255);
ellipse(200, 200, 100, 100);
}

25. 2行ずつ順番を入れ替えてみよう
void draw() {
background(255, 255, 255);
noStroke();
fill(0, 0, 255);
ellipse(200, 200, 100, 100);
fill(255, 0, 0);
ellipse(150, 200, 150, 150);
}

26. 2行ずつ順番を入れ替えてみよう
void draw() {
background(255, 255, 255);
noStroke();
fill(0, 0, 255);
ellipse(200, 200, 100, 100);
fill(255, 0, 0);
ellipse(150, 200, 150, 150);
}
図形の枠線を非表示

27. プログラミングの基礎その1、順次
● プログラムは書かれた順番に処理されていく
○ 命令は上から下へ、順々にこなされていく
○ Processingは順々に上に重ねるように描画していく
○ 料理の手順と同じで、順序を考えて物事を進めるのが大事！
「料理のさしすせそ」みたいなもの！

28. 円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}

29. 円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
y = 200
x = 150
整数型

30. 円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
d = 130
整数型

31. 円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
色々な値に
変えてみよう！

32. 円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
ellipse(x, y, d, d);
}

33. 円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
ellipse(x + i * 40, y, d, d);
}
}

34. 円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
ellipse(x + i * 40, y, d, d);
}
}
初期値
継続条件
{ }の中身の後に
毎回やる事

35. 円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
ellipse(x + i * 40, y, d, d);
}
}
初期値
継続条件
{ }の中身の後に
毎回やる事
x = 20, 60, 100, 140, 180,
220, 260, 300
i = 0, 1, 2, … , 6, 7

36. プログラミングの基礎その2、反復
● 同じ命令を決められた回数だけ繰り返す
○ 指定された条件になるまで何回でも同じ処理ができる
○ 繰り返しの回数に応じた計算も書ける
○ 同じ大きさの円を100個でも1000個でもそれよりもっとでも描ける！

37. 小さい円を円状に配置するには？

38. 円状配置の特徴を考える
外周の中心からの距離は
どの小さい円も同じ

39. 円状配置の特徴を考える
外周の中心からの距離は
どの小さい円も同じ
右の横線を基準にすると
同じ長さの線を違う角度で
配置しているだけ
コンパスと同じ！

40. 円状配置の特徴を考える
あれ？

41. 円状配置の特徴を考える
これ三角形な気がする

42. ！！！これが噂の三角関数だ！！！
画像中央を(0, 0)、
斜め線の長さをR、
水平線からの角度をθとすると、
x(横点線の長さ) = R * cos(θ)
y(縦点線の長さ) = R * sin(θ)
x
y
R
(0, 0)
θ
cos(θ) = x / R
sin(θ) = y / R

43. ！！！これが噂の三角関数だ！！！
画像中央を(0, 0)、
斜め線の長さをR、
水平線からの角度をθとすると、
x(横点線の長さ) = R * cos(θ)
y(縦点線の長さ) = R * sin(θ)
x
y
R
(0, 0)
θ
cos(θ) = x / R
sin(θ) = y / R
なんか学生の時
やった気がする

44. ！！！これが噂の三角関数だ！！！
θ(角度)について :
8個の小さな円を円状に並べたい
→ 360度(2π)を8等分して何番目か
x
y
R
(0, 0)
θ

45. Processingで円を円状に配置する
※灰色の線はガイド線なので
無視してください

46. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(i * TWO_PI / num);
float y = R * sin(i * TWO_PI / num);
ellipse(x, y, d, d);
}
popMatrix();
}

47. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(i * TWO_PI / num);
float y = R * sin(i * TWO_PI / num);
ellipse(x, y, d, d);
}
popMatrix();
}
pushMatrix〜popMatrixの間は
(0, 0)の位置を左上から
キャンバスの中心に移動
(translate)
width : キャンバスの横の長さ
height : キャンバスの縦の長さ

48. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(i * TWO_PI / num);
float y = R * sin(i * TWO_PI / num);
ellipse(x, y, d, d);
}
popMatrix();
}
intが整数型だったのに対し、
floatは浮動小数点数型
TWO_PI = 2π

49. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}

50. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
radians関数が角度を
ラジアン(弧度法)に
変換してくれる
360度→2π

51. 小さな円を花の形に配置する

52. 花の形の配置の特徴を考える
中心から一番遠いところへの
距離は毎回一定
距離の増え方/減り方も一定
(ゼロ-[増加]->一番遠い所-[減少]->ゼロ)

53. 花の形の配置の特徴を考える
さっきの円状配置の
三角形をあてはめるとこんな感じ→
R が一定に増えたり減ったりすれば
なんとかなりそう x
y
R
(0, 0)
θ

54. 花の形の配置の特徴を考える
R が一定に増えたり減ったりすれば
なんとかなりそう
x
y
R
(0, 0)
θ
中心からの距離 R
水平線とRの間の角度 θ
増！
減！

55. 突然ですがサイン波でも見て休憩しましょう

56. どっかで見た気がしますね

57. 真ん中で折ってみますか

58. お前…まさか……！！！

59. さっきのグラフじゃないか！！！
中心からの距離 R
水平線とRの間の角度 θ

60. 「一定の増減」はサイン波で表せる
サイン波は -1と1 を
いったりきたりする
1
-1
マイナス部分をプラスに持ってきた
サイン波

61. Processingで小さな円を花の形に配置する

62. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}

63. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
R を0から150の間で
いったりきたり増減させている
abs関数を通すと絶対値の値が
出力されるので
マイナス部分がプラスとして
得られる
絶対値 : 0からの距離
(例 : -3と3は0から3の距離)

64. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
1から順に数字に変えてみましょう！

65. 花に凝った色をつける

66. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
noStroke();
if (i % 3 == 0) {
fill(0, 0, 200);
d = 10;
} else {
fill(0, 150, 200);
d = 5;
}
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}

67. Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
noStroke();
if (i % 3 == 0) {
fill(0, 0, 200);
d = 10;
} else {
fill(0, 150, 200);
d = 5;
}
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
もしも3で割った余りが0なら
→ 3で割り切れる数字ならば
そうでない時は...

68. プログラミングの基礎その3、分岐
● ある条件の時にだけ処理する
○ 条件に合っているかどうかで結果を出し分けられる
○ 「暑い日はカレーが食べたいし、寒い日は鍋が食べたい！」
→ 気温が20度以上ならばカレーを食べ、そうでない時は鍋を食べる

69. 完成

70. 完成のその先へ！！！！！！！！！！！！！！

71. 画像1枚あればグッズ販売が無料で始められるサービスの利用
(SUZURI、pixivFactory/BOOTHなど)
完成のその先へ！！！！！！！！！！！！！！

72. 最後に
● ご質問はお気軽に！イベント内でも後日Twitterでも
● お悩み相談とかもあればどうぞ〜 お答えできる範囲のことなら …
○ 「エンジニアになりたいんだけど…」
○ 「情報系の大学に行きたいんだけど…」
○ 「今日の晩ごはん何にしよう…」
● 本日はご参加いただきありがとうございました！
引き続きPCDを一緒に楽しみましょう！
@reona396