狠狠撸

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

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

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

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

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

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

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

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

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

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

void setup() {
size(400, 400);
}
ひとかたまり

void setup() {
size(400, 400);
}
文の終わりに必ずつける

void setup() {
size(400, 400);
}
キャンバスの
横の長さ
キャンバスの
縦の長さ

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

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

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

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

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

void draw() {
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}
背景色の指定
図形の枠線の色の指定
図形の塗りつぶしの色の指定

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

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

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

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);
}
図形の枠線を非表示

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

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

void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
}
y = 200
x = 150
整数型

void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
}
d = 130
整数型

void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
}
色々な値に
変えてみよう！

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

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

void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
}
}
初期値
継続条件
{ }の中身の後に
毎回やる事

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

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

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

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

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

あれ？

これ三角形な気がする

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

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

θ(角度)について :
8個の小さな円を円状に並べたい
→ 360度(2π)を8等分して何番目か
x
y
R
(0, 0)
θ

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);
}
popMatrix();
}

void draw() {
background(255, 255, 255);
pushMatrix();
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
}
popMatrix();
}
pushMatrix?popMatrixの間は
(0, 0)の位置を左上から
キャンバスの中心に移動
(translate)
width : キャンバスの横の長さ
height : キャンバスの縦の長さ

void draw() {
background(255, 255, 255);
pushMatrix();
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
}
popMatrix();
}
intが整数型だったのに対し、
floatは浮動小数点数型
TWO_PI = 2π

void draw() {
background(255, 255, 255);
pushMatrix();
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));
}
popMatrix();
}

void draw() {
background(255, 255, 255);
pushMatrix();
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
}
popMatrix();
}
radians関数が角度を
ラジアン(弧度法)に
変換してくれる
360度→2π

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

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

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

R が一定に増えたり減ったりすれば
なんとかなりそう
x
y
R
(0, 0)
θ
中心からの距離 R
水平線とRの間の角度 θ
増！
減！

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

どっかで见た気がしますね

真ん中で折ってみますか

お前…まさか……！！！

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

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

笔谤辞肠别蝉蝉颈苍驳で小さな円を花の形に配置する

void draw() {
background(255, 255, 255);
pushMatrix();
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
}
popMatrix();
}

void draw() {
background(255, 255, 255);
pushMatrix();
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
}
popMatrix();
}
R を0から150の間で
いったりきたり増減させている
abs関数を通すと絶対値の値が
出力されるので
マイナス部分がプラスとして
得られる
絶対値 : 0からの距離
(例 : -3と3は0から3の距離)

void draw() {
background(255, 255, 255);
pushMatrix();
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
}
popMatrix();
}
1から順に数字に変えてみましょう！

花に凝った色をつける

void draw() {
background(255, 255, 255);
pushMatrix();
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;
}
}
popMatrix();
}

void draw() {
background(255, 255, 255);
pushMatrix();
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;
}
}
popMatrix();
}
もしも3で割った余りが0なら
→ 3で割り切れる数字ならば
そうでない時は...

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

完成のその先へ！！！！！！！！！！！！！！

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

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

狠狠撸

PCD2019 TOKYO ワークショップ「2時間で！Processingでプログラミング入門」

Recommended

More Related Content

What's hot (20)

Similar to PCD2019 TOKYO ワークショップ「2時間で！Processingでプログラミング入門」 (20)

More from reona396 (17)

PCD2019 TOKYO ワークショップ「2時間で！Processingでプログラミング入門」