Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
CG2013 07
CG2013 07
Loading in …3
×

Check these out next

1 of 72 Ad

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

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

More from reona396 (14)

Advertisement

Recently uploaded (20)

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

  1. 1. 2時間で! Processingでプログラミング入門 @reona396
  2. 2. 自己紹介 ● reona396 / レオナ ● インタラクション&フロントエンドエンジニア ● Processing歴8年くらい ● 「[普及版]ジェネラティブ・アート」編集協力 名前(※旧姓の本名)載せていただいてます。良い本なのでオススメです!
  3. 3. みなさんのことが知りたいです!!! ● プログラミング初めてor初心者という方! ● 逆に、プログラミングでご飯食べてますという方! ● Processingが初めての方! ● このワークショップに参加した理由は? ○ Processingってなんだろうと思って ○ デジタルアートに興味があって ○ プログラミング教育に興味があって ○ 数学や三角関数というキーワードが気になって ○ なんとなく ○ 他のワークショップに行きたかったが売り切れてたので仕方なく…
  4. 4. 2時間しかないので急ぎ足進行ですが ご質問があればどうぞお気軽に! あとからTwitterとかで質問していただいても大丈夫です!!
  5. 5. 本ワークショップの目標 Processingでお花を描きます!
  6. 6. 本ワークショップでお伝えしたいこと ● プログラミングの楽しさ ● Processingの面白さ ● プログラミングの基礎 ● 三角関数の便利さ
  7. 7. プログラミングの基礎 ● 順次:プログラムは順番通りに動く ● 反復:プログラムは繰り返しが得意 ● 分岐:条件によってプログラムから異なる結果を得る Processingを動かしながら実際に体験していきましょう!
  8. 8. まずはProcessingを起動! おめでとうございます!!最初の一歩を踏み出しましたね!
  9. 9. Processingの画面構成 実行ボタン / 停止ボタン プログラム(コード)を書くところ エラーメッセージが出るところ (エラーは怖くないです!)
  10. 10. キャンバスをつくる void setup() { size(400, 400); }
  11. 11. キャンバスをつくる
  12. 12. キャンバスをつくる void setup() { size(400, 400); } ひとかたまり
  13. 13. キャンバスをつくる void setup() { size(400, 400); } 文の終わりに必ずつける
  14. 14. キャンバスをつくる void setup() { size(400, 400); } キャンバスの 横の長さ キャンバスの 縦の長さ
  15. 15. 円を描く void setup() { size(400, 400); } void draw() { ellipse(200, 200, 100, 100); }
  16. 16. 円を描く
  17. 17. 円を描く - setup関数とdraw関数 void setup() { size(400, 400); } void draw() { ellipse(200, 200, 100, 100); } 開始時に一度だけ 読み込まれる 何度も 繰り返す
  18. 18. 円を描く - パラメータ 〜このスライド以降setup関数省略〜 void draw() { ellipse(200, 200, 100, 100); } 円の中心の x座標 円の中心の y座標 円の横の長さ 円の縦の長さ
  19. 19. 円を描く - Processingの座標について void draw() { ellipse(200, 200, 100, 100); ellipse(100, 100, 50, 25); ellipse(350, 250, 80, 150); } x軸方向 y軸方向
  20. 20. 色をつける - 背景色、線の色、塗りつぶし void draw() { background(50, 100, 200); stroke(250, 250, 0); fill(250, 150, 250); ellipse(200, 200, 100, 100); }
  21. 21. 色をつける - 背景色、線の色、塗りつぶし
  22. 22. 色をつける - 背景色、線の色、塗りつぶし void draw() { background(50, 100, 200); stroke(250, 250, 0); fill(250, 150, 250); ellipse(200, 200, 100, 100); } 背景色の指定 図形の枠線の色の指定 図形の塗りつぶしの色の指定
  23. 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. 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. 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. 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. 27. プログラミングの基礎その1、順次 ● プログラムは書かれた順番に処理されていく ○ 命令は上から下へ、順々にこなされていく ○ Processingは順々に上に重ねるように描画していく ○ 料理の手順と同じで、順序を考えて物事を進めるのが大事! 「料理のさしすせそ」みたいなもの!
  28. 28. 円の位置や大きさを変数で制御する void draw() { background(255, 255, 255); int x = 150; int y = 200; int d = 130; ellipse(x, y, d, d); }
  29. 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. 30. 円の位置や大きさを変数で制御する void draw() { background(255, 255, 255); int x = 150; int y = 200; int d = 130; ellipse(x, y, d, d); } d = 130 整数型
  31. 31. 円の位置や大きさを変数で制御する void draw() { background(255, 255, 255); int x = 150; int y = 200; int d = 130; ellipse(x, y, d, d); } 色々な値に 変えてみよう!
  32. 32. 円をたくさん描く void draw() { background(255, 255, 255); int x = 20; int y = 200; int d = 30; ellipse(x, y, d, d); }
  33. 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. 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. 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. 36. プログラミングの基礎その2、反復 ● 同じ命令を決められた回数だけ繰り返す ○ 指定された条件になるまで何回でも同じ処理ができる ○ 繰り返しの回数に応じた計算も書ける ○ 同じ大きさの円を100個でも1000個でもそれよりもっとでも描ける!
  37. 37. 小さい円を円状に配置するには?
  38. 38. 円状配置の特徴を考える 外周の中心からの距離は どの小さい円も同じ
  39. 39. 円状配置の特徴を考える 外周の中心からの距離は どの小さい円も同じ 右の横線を基準にすると 同じ長さの線を違う角度で 配置しているだけ コンパスと同じ!
  40. 40. 円状配置の特徴を考える あれ?
  41. 41. 円状配置の特徴を考える これ三角形な気がする
  42. 42. !!!これが噂の三角関数だ!!! 画像中央を(0, 0)、 斜め線の長さをR、 水平線からの角度をθとすると、 x(横点線の長さ) = R * cos(θ) y(縦点線の長さ) = R * sin(θ) x y R (0, 0) θ cos(θ) = x / R sin(θ) = y / R
  43. 43. !!!これが噂の三角関数だ!!! 画像中央を(0, 0)、 斜め線の長さをR、 水平線からの角度をθとすると、 x(横点線の長さ) = R * cos(θ) y(縦点線の長さ) = R * sin(θ) x y R (0, 0) θ cos(θ) = x / R sin(θ) = y / R なんか学生の時 やった気がする
  44. 44. !!!これが噂の三角関数だ!!! θ(角度)について : 8個の小さな円を円状に並べたい → 360度(2π)を8等分して何番目か x y R (0, 0) θ
  45. 45. Processingで円を円状に配置する ※灰色の線はガイド線なので 無視してください
  46. 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. 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. 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. 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. 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. 51. 小さな円を花の形に配置する
  52. 52. 花の形の配置の特徴を考える 中心から一番遠いところへの 距離は毎回一定 距離の増え方/減り方も一定 (ゼロ-[増加]->一番遠い所-[減少]->ゼロ)
  53. 53. 花の形の配置の特徴を考える さっきの円状配置の 三角形をあてはめるとこんな感じ→ R が一定に増えたり減ったりすれば なんとかなりそう x y R (0, 0) θ
  54. 54. 花の形の配置の特徴を考える R が一定に増えたり減ったりすれば なんとかなりそう x y R (0, 0) θ 中心からの距離 R 水平線とRの間の角度 θ 増! 減!
  55. 55. 突然ですがサイン波でも見て休憩しましょう
  56. 56. どっかで見た気がしますね
  57. 57. 真ん中で折ってみますか
  58. 58. お前…まさか……!!!
  59. 59. さっきのグラフじゃないか!!! 中心からの距離 R 水平線とRの間の角度 θ
  60. 60. 「一定の増減」はサイン波で表せる サイン波は -1と1 を いったりきたりする 1 -1 マイナス部分をプラスに持ってきた サイン波
  61. 61. Processingで小さな円を花の形に配置する
  62. 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. 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. 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. 65. 花に凝った色をつける
  66. 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. 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. 68. プログラミングの基礎その3、分岐 ● ある条件の時にだけ処理する ○ 条件に合っているかどうかで結果を出し分けられる ○ 「暑い日はカレーが食べたいし、寒い日は鍋が食べたい!」 → 気温が20度以上ならばカレーを食べ、そうでない時は鍋を食べる
  69. 69. 完成
  70. 70. 完成のその先へ!!!!!!!!!!!!!!
  71. 71. 画像1枚あればグッズ販売が無料で始められるサービスの利用 (SUZURI、pixivFactory/BOOTHなど) 完成のその先へ!!!!!!!!!!!!!!
  72. 72. 最後に ● ご質問はお気軽に!イベント内でも後日Twitterでも ● お悩み相談とかもあればどうぞ〜 お答えできる範囲のことなら … ○ 「エンジニアになりたいんだけど…」 ○ 「情報系の大学に行きたいんだけど…」 ○ 「今日の晩ごはん何にしよう…」 ● 本日はご参加いただきありがとうございました! 引き続きPCDを一緒に楽しみましょう! @reona396

×