• Like
岡山県立大学オープンキャンパス資料
Upcoming SlideShare
Loading in...5
×

岡山県立大学オープンキャンパス資料

  • 1,761 views
Uploaded on

岡山県立大学オープンキャンパスで実施している体験講義用資料。Processingを題材として、プログラミングの体験をしてもらうという内容です。2014-07-25追記: 改訂版に置き換えました。

岡山県立大学オープンキャンパスで実施している体験講義用資料。Processingを題材として、プログラミングの体験をしてもらうという内容です。2014-07-25追記: 改訂版に置き換えました。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,761
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 答は例3-10。File > Examples > Books > Getting Started > Chapter03 > Ex_03_10

Transcript

  • 1. プログラミングで アニメーションを作ろう 岡山県立大学情報工学部 知能メディア工学研究室 国島丈生(kunishi@c.oka-pu.ac.jp) http://www.slideshare.net/kunishi/20120723
  • 2. 今日の内容 • プログラミング言語 Processingによるアニメー ション作成 • 画面上で • 図形が動く • マウスに合わせて図形が反応 して動く • etc. • いわゆる「アニメ」ではありま せん • アニメーションを通してプ ログラミングの体験をして もらう
  • 3. 参考資料 • Processing公式サイト http://www.processing.org/ • Processing入門講座 http://ap.kakoku.net/ • 書籍 • 「Processingをはじめよう」(オライリー・ジャパン) • 「Built with Processing デザイン/アートのためのプログラミング入門」 (BNN)
  • 4. 第1部 プログラムの基礎知識:変数、ループ、条件分岐など
  • 5. まず動かしてみよう 起動 プログラムをここに書く
  • 6. 最初のプログラム 課題1. 次のプログラムを書いて実行してみましょう。 ellipse(50, 50, 80, 80); 課題2. 課題1のプログラムをわざと次のように間違えて書いて 実行してみましょう。 (1)Ellipse(50, 50, 80, 80); (2)ellipse(50. 50, 80, 80); (3)ellipse(50, 50, 80, 80) [プログラムを書く時の注意点] • かな漢字変換がオフになっていることを確認しましょう(特に空白文字に注 意!) • 大文字と小文字を間違えないように(間違うとプログラムは動きません) • セミコロンをつけ忘れないように
  • 7. もう少し難しいプログラム 課題3. ブラウザを開いて、次のURLにあるプログラムを書いて 実行してみましょう。コピー&ペーストではなく、手で写してみま しょう。 https://gist.github.com/3096487 • マウスを追うように円が次々描かれます。 • マウスを押すと黒い円が、マウスを離すと白い円が描かれま す。
  • 8. プログラムを書くときの注意 • カッコ (), {} の対応に注意し ましょう。 • 全角スペースが混じらない ように気をつけましょう。 • カッコの前や後、コンマの後 などの空白はなくても動き ますが、空白を入れることで プログラムが見やすくなりま す。入れるように心がけま しょう。 • 行頭の字下げ(インデント) も、プログラムを見やすくす るために入れています。 void setup() { size(480, 120); smooth(); } void draw() { if (mousePressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); }
  • 9. プログラムで絵を描く 課題4. 次のプログラムを実行してみましょう。 size(800, 600); point(240, 60); line(20, 50, 420, 110); [ポイント] • Processingでは、描画の命令(関数)を次々と実行していくことで絵を描きま す。 • 前に書いた図形は後に書いた図形に上書きされていきます。 • 関数の書式: 関数名(引数1, 引数2, …) • 引数の個数や順番には意味があります。勝手に変えてはいけません。 • Processingでは、描画ウインドウの左上隅が原点となっており、x軸は右方向、 y軸は下方向が正になります。(y軸の正方向が数学とは逆です) [関数] • size(横方向のピクセル数, 縦方向のピクセル数) • 描画ウインドウの大きさを決めます。
  • 10. 図形を描く関数(1) • point(x, y) • 点(x, y)を描く • line(x1, y1, x2, y2) • (x1, y1) から (x2, y2) に線を引く • rect(x1, y1, width, height) • 左上隅が(x1, y1), 幅 width, 高さ height の長方形を描く • triangle(x1, y1, x2, y2, x3, y3) • (x1, y1), (x2, y2), (x3, y3) を頂点とする三角形を描く • quad(x1, y1, x2, y2, x3, y3, x4, y4) • (x1, y1), (x2, y2), (x3, y3), (x4, y4) を頂点とする四角形を描く
  • 11. 図形を描く関数(2) • ellipse(x1, y1, width, height) • 中心が(x1, y1), 横方向の幅がwidth, 縦方向の幅がheightである楕円 を描く • 円を描く場合は width と height を同じ値にします • arc(x1, y1, width, height, start, end) • 中心が(x1, y1), 横方向の幅がwidth, 縦方向の幅がheight, 描き始めの 角度が start, 描き終わりの角度が end である円弧を描く • 角度は弧度法で指定します • 便利な関数 • radians(a)…角度a(0°≦a≦360°)を弧度法の値に変換する • 例: arc(90, 60, 80, 80, 0, radians(90))
  • 12. 図形を描く関数 課題5. 下の図は、横方向480, 縦方向120の描画ウインドウに、 以下の2つの図形を描いています。このプログラムを作ってみ てください。 • 左上隅 (160, 30), 横幅260, 縦幅20の長方形 • 中心が (140, 0), 半径が190の円 https://gist.github.com/kunishi/7996f7d50e511e3358d9
  • 13. 色についての予備知識 • 色の種類 • 有彩色…色味のある色(赤、青、黄など) • 無彩色…色味のない色(白、灰色、黒) • 色を数値で表現する方法 • グレイスケール:無彩色の表現。0が黒、数値が大きいほど白 • RGB:赤(R), 青(B), 緑(G)に色を分解して、その濃さで表現 • HSB:色相(H)、彩度(S)、明度(B)という成分で表現
  • 14. 描画色の指定(1) • colorMode(mode, max) • 色の指定方法をmode (RGB またはHSB)に決める。maxは色指定の 上限値である。 • background(グレイスケール値), background(R, G, B), background(H, S, B) • 背景色の指定 [例] colorMode(HSB, 100); // HSBモード、H, S, Bはそれぞれ0〜99で指定 background(99); // 背景をグレイスケール値99(=色指定の上限値=白)に指定
  • 15. 描画色の指定(2) • stroke(グレイスケール値), stroke(R, G, B), stroke(H, S, B) • 線の色を指定 • strokeWeight(線の太さのピクセル数) • 線の太さを指定 • noStroke() • 縁取り線を消す • fill(グレイスケール値), fill(R, G, B), fill(H, S, B) • 図形の塗りつぶし色を指定 • noFill() • 図形の塗りつぶしをしない(=輪郭線だけを描く)
  • 16. 色を使った図形の描画 • 課題6. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3134851 こんな風にグラデーションが 描けましたか?
  • 17. 同じような描画の繰り返し fill(45, 80, 99); rect(0, 0, 200, 200); fill(45, 60, 99); rect(0, 0, 150, 150); fill(45, 40, 99); rect(0, 0, 100, 100); fill(45, 20, 99); rect(0, 0, 50, 50); [0回目] 彩度80 = 80–20×0, 大きさ200 = 200−50×0 [1回目] 彩度60 = 80–20×1, 大きさ150 = 200−50×1 [2回目] 彩度40 = 80–20×2, 大きさ100 = 200−50×2 [3回目] 彩度20 = 80–20×3, 大きさ50 = 200−50×3
  • 18. 変数と繰り返しでまとめる 課題7. 課題6(https://gist.github.com/3134851)のプログラム を、変数と繰り返しで書き換えて実行してみましょう。 同じようにグラデーションが 描けましたか? https://gist.github.com/kunishi/53f33842f7e95207e37c
  • 19. 変数と繰り返しでまとめる int i; // 繰り返し回数を保存する変数 for (i = 0; i <= 3; i = i + 1) { fill(45, 80 – 20 * i, 99); rect(0, 0, 200 - 50 * i, 200 – 50 * i); } [プログラムにおける変数] 何らかの値を保存しておくときに使います。数学での変数とは違い、未知数を表すわ けではありません。 [変数の宣言:変数を使う前に、必ずその変数を宣言しなければなりません] 変数の型 変数名; • 変数の型=変数に保存できる値の定義域。int (整数), float (実数) など。 • 変数の宣言は、ほかにも似たような書き方がいくつもあります。今回は省略。
  • 20. 変数と繰り返しでまとめる int i; // 繰り返し回数を保存する変数 for (i = 0; i <= 3; i = i + 1) { fill(45, 80 – 20 * i, 99); rect(0, 0, 200 - 50 * i, 200 – 50 * i); } [変数へ値を保存する:プログラムの用語で「変数に値を代入する」と言います] 変数名 = 式; • まず、= の右側の式を計算します。 • その結果の値を、左側の変数に保存します。 • だから、= の左側と右側に同じ変数が出てくることもあります。
  • 21. 変数と繰り返しでまとめる int i; // 繰り返し回数を保存する変数 for (i = 0; i <= 3; i = i + 1) { fill(45, 80 – 20 * i, 99); rect(0, 0, 200 - 50 * i, 200 – 50 * i); } [for文:条件が成立する間、処理を繰り返します] for (繰り返し変数の設定; 繰り返し継続の条件; 繰り返し変数の更新) { 繰り返し実行する命令 } • 最初に、繰り返し変数の設定をします。 • 以下を繰り返します。 • 繰り返し継続の条件が成り立っているか調べます。 • 成り立っていれば、{ } 内を実行して、繰り返し変数を更新します。 • 成り立っていなければ、繰り返しを終了します。
  • 22. 2次元に敷き詰める 課題8. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3140854 こんな風に正方形が敷き詰 められましたか?
  • 23. for文の入れ子 for (i = 0; i < 10; i = i + 1) { // for文1 for (j = 0; j < 10; j = j + 1) { // for文2 fill(i * 10, 10 + j * 10, 99); rect(i * 20, j * 20, 10, 10); } } i = 0, j = 0 … 色相0*10, 彩度10+0*10, 正方形の左上隅(0*20, 0*20) j = 1 … 色相0*10, 彩度10+1*10, 正方形の左上隅(0*20, 1*20) … i = 1, j = 0 … 色相1*10, 彩度10+0*10, 正方形の左上隅(1*20, 0*20) j = 1 … 色相1*10, 彩度10+1*10, 正方形の左上隅(1*20, 1*20) … … …
  • 24. プログラミングを知っている方向け for文以外にも、次のような文が用意されています。 • if (条件) { 条件が成立するとき実行 } • if (条件) { 条件が成立するとき実行 } else { 条件が成立しないとき実行 } • while (繰り返し継続条件) { 繰り返し処理 } • ++演算子 i++; // i = i + 1と同じ意味
  • 25. 繰り返しごとに微妙に違いを出す 課題9. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3141111 微妙に色や位置が違う正方 形が敷き詰められましたか?
  • 26. ランダムな値(乱数) for (i = 0; i < 10; i = i + 1) { for (j = 0; j < 10; j = j + 1) { fill(random(20, 40), random(50, 70), 99); rect(i * 20 + random(-3, 3), j * 20 + random(-3, 3), 10, 10); } } [ポイント] random(下限, 上限) … 下限≦x<上限の範囲でランダムな数字xを生成する関数 上の例では、正方形の色相、彩度、左上隅の位置に乱数を使い、微妙な違いを出し ています。
  • 27. 第2部 アニメーションをプログラムで作る
  • 28. 絵からアニメーションへ 課題10. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3141167 色や大きさの違う楕円が 次々に描かれていますか?
  • 29. アニメーション処理の基本 void setup() { // 初期化。プログラムの最初に1回だけ実行 size(200, 200); colorMode(HSB, 100); background(99); noStroke(); } void draw() { // 何度も繰り返して実行 fill(random(0, 100), random(50, 100), random(80, 100)); ellipse(random(0, 200), random(0, 200), random(0, 50), random(0, 50)); } setup(), draw()ともに関数です。 つまり、このプログラムはsetup(), draw()という2つの関数を自作してい るのです。
  • 30. マウスに反応するアニメーション 課題11. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3141201 マウスの位置に次々に円が 描かれていますか?
  • 31. マウスの位置を取得する void draw() { fill(random(0, 100), random(50, 100), random(80, 100)); ellipse(mouseX, mouseY, 5, 5); } [ポイント] mouseX, mouseYという変数に、自動的に現在のマウスポインタの位置が保存され ます。 • これらの変数は宣言しなくても使えます。 • 大文字と小文字の区別に注意しましょう。
  • 32. マウスの移動量に反応するアニメーション 課題12. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3141239 マウスが大きく移動すると大 きな楕円が、小さく移動する と小さな楕円が描かれてい ますか?
  • 33. 直前のマウスの位置を取得する void draw() { fill(random(0, 100), random(50, 100), random(80, 100)); ellipse(mouseX, mouseY, mouseX - pmouseX, mouseY - pmouseY); } [ポイント] pmouseX, pmouseY という変数に、直前のマウスの位置が保存されています。 • これらの変数も、宣言しなくても使えます。 • 上の例では、楕円の幅と高さを、現在のマウスの位置と直前のマウスの位置の差 にしていますね。だから、マウスの移動距離に応じて楕円の大きさが変わったの です。
  • 34. サイン波 課題13. 次の場所にあるプログラムを実行してみましょう。 https://gist.github.com/3141333 サイン波が動いていますか?
  • 35. 変数宣言の位置に注意! int start; // 左端の円のy座標に対応する角度 void setup() { … start = 0; } void draw() { int theta; … start = start + 2; theta = start; … } [ポイント] • setup()やdraw()の外に変数宣言を書くと • グローバル変数の宣言になります • グローバル変数はsetup()でもdraw()でも使 えます • draw()が何回実行されても、グローバル変 数に保存された値は壊れません • setup()やdraw()の中に変数宣言を書くと • ローカル変数の宣言になります • ローカル変数は宣言された関数の中でしか 使えません • ローカル変数thetaは、draw()が実行される たびに作り直されます(値が毎回壊れます) • 使い分けが必要です
  • 36. 自由にアニメーションを作ってみよう • ここまでで、Processingによるプログラミングについて、基本 的なことをひと通りお話しました。 • 残りの時間は、自由にアニメーションを作ってみてください。 • いろんな図形を使ってみる、とか • 色の変化をプログラムで作ってみる、とか • 繰り返し文とアニメーションを組み合わせる、とか • etc.