プログラミング基礎#2（名古屋造形大学）

Transcript

1. プログラミング基礎#2 Basics of Programming 名古屋造形大学
2. p5.js（ピーファイブ） グラフィカルなプログラムを簡単に作ることができる開発ツール https://editor.p5js.org/ プログラムを書くところ プログラムの結果
3. Processing プログラミング言語「Java」をベースにMITメディアラボにて開発されたアートと ビジュアルデザインのためのプログラミング環境（オープンソース・ソフトウェア） https://processing.org/download/
4. クリエイティブコーディング
5. 「ジェネラティブ・アート」日本語編集 ジェネラティブ・アート Processingによる実践ガイド マット・ピアソン（著） 久保田 晃弘（監訳）、沖 啓介（訳） ビー・エヌ・エヌ新社
6. プログラムの流れ 順次 プログラムは、基本的に上から下へ1行ずつ順番に実行される size(640, 480); frameRate(60); background(120); //println(Serial.list()); String portID = Serial.list()[1]; mono = new MonoStick(new Serial(this, portID, 115200)); mono.debugMode = true; 実行順序
7. プログラミングのルール function setup() { createCanvas(400, 400); } function draw() { background(220); } 全く同じように書いてみよう 動かない場合は何かが違う（大文字・小文字、カッコ、記号は合っているか）
8. プログラムの実行 クリックで実行する
9. プログラミングのルール function setup() { createCanvas(400, 400); } function draw() { background(220); } プログラミングの注意点 ・{}が処理のかたまりを表す ・大文字と小文字は区別される ・命令の後ろには「;」をつける ブロック名と同じ ブロックの中身
10. プログラミングのルール functionはイベント関数（すでに用意されている関数）を表す function setup() { createCanvas(400, 400); } function draw() { background(220); } setup → 最初に一度だけ実行される draw → 何度も呼び出される
11. createCanvas(400, 400); 関数（機能）の呼び出し方 関数名 内容1 （第1引数） 内容2 （第2引数） 画面幅 画面高さ 画面のサイズを決める 最後には セミコロン 画面サイズを変えてみよう（例：幅→640、高さ→480） 内容1 （第1引数） 内容2 （第2引数）
12. 四角を書いてみる createCanvas(640, 480); rect(50, 50, 200, 200); ウィンドウのサイズを幅640、高さ480にする 左上座標(50, 50)に幅200px、高さ200pxで四角を書く (0, 0) 480 640 50, 50 (50, 50) 200 200
13. 枠線の指定 stroke(255, 0, 0); 枠線の色を赤255 緑0 青0にする strokeWeight(4); 枠線の太さを4にする stroke(0, 0, 0); 枠線の色を設定する 赤（0〜255）、緑（0〜255）、青（0〜255）
14. 円の描画 circle(160, 160, 200); 中心座標（160, 160）、直径200pxの円
15. フレーミーを描いてみる noFill(); 塗りつぶしをなしにする
16. 課題（階段） 階段状に線を描画する line(0, 0, 100, 100); 始点（0, 0）から終点（100, 100）まで線を引く 始点X座標, 始点Y座標, 終点X座標, 終点Y座標
17. マウス座標に円を描画する circle(mouseX, mouseY, 200); mouseX → マウスのX座標 mouseY → マウスのY座標
18. コメント // circle(mouseX, mouseY, 200); 「//」以降に書かれたプログラムは読み飛ばされる コメント化することを「コメントアウト」と言う プログラムを試行錯誤するときは、いきなりコードを消さずに コメントとして残しておく
19. mouseMoved() function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40); } マウスが動いたときに呼び出されるイベント関数 塗りつぶしの色を設定する random(255) 0から指定した数までのランダムな数を作る
20. 課題 始点（0, 0）からマウス座標までランダムな色で線を引く line(0, 0, 100, 100); 始点（0, 0）から終点（100, 100）まで線を引く
21. 徐々に消える表現 function setup() { createCanvas(640, 480); } function draw() { background(‘rgba(255, 255, 255, 0.25)’); noStroke(); fi ll(200, 200, 200); circle(mouseX, mouseY, 100); } 透明度25%ずつ塗りつぶしていく
22. P5.jsリファレンス https://p5js.org/reference/
23. 変数 変数→データを入れるための箱 100 a = 100; a abc b = “abc”; b 文字列の場合は「”」もしくは「’」で囲う let a = 100; 変数を作る命令 （最初だけ）
24. 変数を使ってみる 「w」という箱を作って、「640」を入れる 「h」という箱を作って、「480」を入れる w（640）とh（480）を使う let w = 640; let h = 480; function setup() { createCanvas(w, h); } function draw() { background(220); }
25. 変数の演算 数学の「計算」のことを、プログラムでは「演算」という ʴ ଍͢ ʔ Ҿ͘ ˎ ͔͚Δ ʗ ׂΔ ˋ ׂͬͨ༨Γ 計算順序は、数学と同じ（かける・割るが優先される） 0%2＝0、1%2＝1、2%2＝0、3%2＝1…
26. 四角を画面中央に描いてみる 左上が画面中央になるので、幅と高さを半分を引く let w = 640; let h = 480; let boxSize = 100; function setup() { createCanvas(w, h); } function draw() { background(220); rect(w/2 - boxSize/2, h/2 - boxSize/2, boxSize, boxSize); }
27. let w = 640; let h = 480; let boxSize; function setup() { createCanvas(w, h); } function draw() { background(220); noStroke(); boxSize = random(200); rect(w/2 - boxSize/2, h/2 - boxSize/2, boxSize, boxSize); } 四角のサイズをランダムに変える
28. 課題 線をランダムな位置に描画し続ける
29. let w = 640; let h = 480; let x1, y1, x2, y2; function setup() { createCanvas(w, h); x1 = random(w); y1 = random(h); x2 = random(w); y2 = random(h); } function draw() { background(220); line(x1, y1, x2, y2); } 課題 randomは関数内でしか使用できない
30. let w = 640; let h = 480; function setup() { createCanvas(w, h); } function draw() { background(220); noStroke(); rect(w/2 - 100/2, h/2 - 100/2, random(200), random(200)); } function mouseClicked() { fi ll(random(255), random(255), random(255)); } マウスクリックでランダムに色を変える クリックしたときに実行されるイベント関数
31. 四角を画面の右側に動いていく ① Scratchでコードを考えてみる
32. 四角を画面の右側に動かしていく let x = 0; function setup() { createCanvas(640, 480); } function draw() { background(220); x += 1; rect(x, 200, 100, 100); } x++; 変数名 変数の中身を1増やす x += 1; 変数名 変数の中身を1増やす x += 2; 変数名 変数の中身を2増やす インクリメント
33. 条件式 条件式の種類 a > 100 a < 100 a >= 100 aが100より大きい（100を含まない） aが100以上（100を含む） aが100より小さい（100を含まない） a <= 100 aが100以下（100を含む） a == 100 aが100と等しい a != 100 aが100ではない 条件に当てはまるときに、{}内が実行される 条件に当てはまらないときに{}内が実行される else{}は書かなくても良い if(条件式) { 条件式に当てはまったときに実行される } else { 条件式に当てはまらなかったときに実行される }
34. 課題 １．変数「a」の中身が0なら四角を表示する、それ以外なら表示しない ２．変数「a」の中身が0なら赤色の四角、0以外なら青色の四角を表示する ３．変数「a」の中身が正の数なら赤色の四角、負の数なら青色の四角を表示する
35. 壁にあたったら跳ね返る Scratchでコードを考えてみる
36. 壁にあたったら跳ね返る let x = 0; let move = 1; function setup() { createCanvas(640, 480); } function draw() { background(220); x += move; if (x > 640) { move = -1; } rect(x, 200, 100, 100); } 640を超えたら、moveを-1にする 四角が壁を突き抜けないようにするにはどうするか？
37. 条件式 if (A && B) if (A || B) if (A != B)
38. FizzBuzz問題 変数「a」の数字が、3の倍数なら赤色の四角、5の倍数なら青色の四角 15の倍数（3と5の倍数）ならピンク色の四角を表示する
39. 課題 左右に跳ね返る四角
40. 課題 let x = 0; let moveX = 1; function setup() { createCanvas(640, 480); } function draw() { background(220); x += moveX; if (x > 640-100) { moveX = -1; } if (x < 0) { moveX = 1; } rect(x, 200, 100, 100); }
41. 課題 let x = 0; let moveX = 1; function setup() { createCanvas(640, 480); } function draw() { background(220); x += moveX; if (x > 640-100 || x < 0) { moveX *= -1; } rect(x, 200, 100, 100); }
42. 課題 ランダムに四角を表示し、幅と高さが150pxを超えたら赤くする
43. 一定の大きさを超えた場合、色を変える function setup() { createCanvas(640, 480); } function draw() { background(220); let w = random(20, 200); let h = random(20, 200); let x = 640/2 - w/2; let y = 480/2 - h/2; if (w > 150 && h > 150) { fi ll(255, 0, 0); } else { fi ll(255, 255, 255); } rect(x, y, w, h); } 幅と高さが150以上の場合
44. 課題 上下左右に跳ね返る四角（初期位置と移動速度をランダムにする）
45. 課題 let x, y, moveX, moveY; function setup() { createCanvas(640, 480); x = random(640-100); y = random(480-100); moveX = random(-2, 2); moveY = random(-2, 2); }
46. 課題 function draw() { background(220); x += moveX; y += moveY; if (x > 640-100 || x < 0) { moveX *= -1; } if (y > 480-100 || y < 0) { moveY *= -1; } rect(x, y, 100, 100); }
47. 繰り返し 反復 同じ処理をn回繰り返す for (初期化; 条件式; 更新) { } 条件式に当てはまる間、繰り返す function setup() { createCanvas(640, 480); } function draw() { background(220); for (let i = 0; i < 10; i++) { rect(random(400), random(400), 100, 100); } }
48. 課題 for文を使って、四角を縦に並べる
49. プログラミングの構造 プログラムとは と データ 変数 データ操作 順次、分岐、反復 ……の集まり （構造化定理）