Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,466 views

Published on

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

Published in: Art & Photos
  • Be the first to comment

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

×