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

Slide 1

Slide 1 text

プログラミング基礎#2 Basics of Programming 名古屋造形大学

Slide 2

Slide 2 text

p5.js（ピーファイブ）グラフィカルなプログラムを簡単に作ることができる開発ツール https://editor.p5js.org/ プログラムを書くところプログラムの結果

Slide 3

Slide 3 text

Processing プログラミング言語「Java」をベースにMITメディアラボにて開発されたアートとビジュアルデザインのためのプログラミング環境（オープンソース・ソフトウェア） https://processing.org/download/

Slide 4

Slide 4 text

クリエイティブコーディング

Slide 5

Slide 5 text

「ジェネラティブ・アート」日本語編集ジェネラティブ・アート Processingによる実践ガイドマット・ピアソン（著）久保田晃弘（監訳）、沖啓介（訳）ビー・エヌ・エヌ新社

Slide 6

Slide 6 text

プログラムの流れ順次プログラムは、基本的に上から下へ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; 実行順序

Slide 7

Slide 7 text

プログラミングのルール function setup() { createCanvas(400, 400); } function draw() { background(220); } 全く同じように書いてみよう動かない場合は何かが違う（大文字・小文字、カッコ、記号は合っているか）

Slide 8

Slide 8 text

プログラムの実行クリックで実行する

Slide 9

Slide 9 text

プログラミングのルール function setup() { createCanvas(400, 400); } function draw() { background(220); } プログラミングの注意点・{}が処理のかたまりを表す・大文字と小文字は区別される・命令の後ろには「;」をつけるブロック名と同じブロックの中身

Slide 10

Slide 10 text

プログラミングのルール functionはイベント関数（すでに用意されている関数）を表す function setup() { createCanvas(400, 400); } function draw() { background(220); } setup → 最初に一度だけ実行される draw → 何度も呼び出される

Slide 11

Slide 11 text

createCanvas(400, 400); 関数（機能）の呼び出し方関数名内容1 （第1引数）内容2 （第2引数）画面幅画面高さ画面のサイズを決める最後にはセミコロン画面サイズを変えてみよう（例：幅→640、高さ→480）内容1 （第1引数）内容2 （第2引数）

Slide 12

Slide 12 text

四角を書いてみる createCanvas(640, 480); rect(50, 50, 200, 200); ウィンドウのサイズを幅640、高さ480にする左上座標(50, 50)に幅200px、高さ200pxで四角を書く (0, 0) 480 640 50, 50 (50, 50) 200 200

Slide 13

Slide 13 text

枠線の指定 stroke(255, 0, 0); 枠線の色を赤255 緑0 青0にする strokeWeight(4); 枠線の太さを4にする stroke(0, 0, 0); 枠線の色を設定する赤（0〜255）、緑（0〜255）、青（0〜255）

Slide 14

Slide 14 text

円の描画 circle(160, 160, 200); 中心座標（160, 160）、直径200pxの円

Slide 15

Slide 15 text

フレーミーを描いてみる noFill(); 塗りつぶしをなしにする

Slide 16

Slide 16 text

課題（階段）階段状に線を描画する line(0, 0, 100, 100); 始点（0, 0）から終点（100, 100）まで線を引く始点X座標, 始点Y座標, 終点X座標, 終点Y座標

Slide 17

Slide 17 text

マウス座標に円を描画する circle(mouseX, mouseY, 200); mouseX → マウスのX座標 mouseY → マウスのY座標

Slide 18

Slide 18 text

コメント // circle(mouseX, mouseY, 200); 「//」以降に書かれたプログラムは読み飛ばされるコメント化することを「コメントアウト」と言うプログラムを試行錯誤するときは、いきなりコードを消さずにコメントとして残しておく

Slide 19

Slide 19 text

mouseMoved() function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40); } マウスが動いたときに呼び出されるイベント関数塗りつぶしの色を設定する random(255) 0から指定した数までのランダムな数を作る

Slide 20

Slide 20 text

課題始点（0, 0）からマウス座標までランダムな色で線を引く line(0, 0, 100, 100); 始点（0, 0）から終点（100, 100）まで線を引く

Slide 21

Slide 21 text

徐々に消える表現 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%ずつ塗りつぶしていく

Slide 22

Slide 22 text

P5.jsリファレンス https://p5js.org/reference/

Slide 23

Slide 23 text

変数変数→データを入れるための箱 100 a = 100; a abc b = “abc”; b 文字列の場合は「”」もしくは「’」で囲う let a = 100; 変数を作る命令（最初だけ）

Slide 24

Slide 24 text

変数を使ってみる「w」という箱を作って、「640」を入れる「h」という箱を作って、「480」を入れる w（640）とh（480）を使う let w = 640; let h = 480; function setup() { createCanvas(w, h); } function draw() { background(220); }

Slide 25

Slide 25 text

変数の演算数学の「計算」のことを、プログラムでは「演算」という ʴ ଍͢ ʔ Ҿ͘ ˎ ͔͚Δ ʗ ׂΔ ˋ ׂͬͨ༨Γ 計算順序は、数学と同じ（かける・割るが優先される） 0%2＝0、1%2＝1、2%2＝0、3%2＝1…

Slide 26

Slide 26 text

四角を画面中央に描いてみる左上が画面中央になるので、幅と高さを半分を引く 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); }

Slide 27

Slide 27 text

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); } 四角のサイズをランダムに変える

Slide 28

Slide 28 text

課題線をランダムな位置に描画し続ける

Slide 29

Slide 29 text

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は関数内でしか使用できない

Slide 30

Slide 30 text

Slide 31

Slide 31 text

四角を画面の右側に動いていく ① Scratchでコードを考えてみる

Slide 32

Slide 32 text

四角を画面の右側に動かしていく 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増やすインクリメント

Slide 33

Slide 33 text

条件式条件式の種類 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 { 条件式に当てはまらなかったときに実行される }

Slide 34

Slide 34 text

課題１．変数「a」の中身が0なら四角を表示する、それ以外なら表示しない２．変数「a」の中身が0なら赤色の四角、0以外なら青色の四角を表示する３．変数「a」の中身が正の数なら赤色の四角、負の数なら青色の四角を表示する

Slide 35

Slide 35 text

壁にあたったら跳ね返る Scratchでコードを考えてみる

Slide 36

Slide 36 text

壁にあたったら跳ね返る 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にする四角が壁を突き抜けないようにするにはどうするか？

Slide 37

Slide 37 text

条件式 if (A && B) if (A || B) if (A != B)

Slide 38

Slide 38 text

FizzBuzz問題変数「a」の数字が、3の倍数なら赤色の四角、5の倍数なら青色の四角 15の倍数（3と5の倍数）ならピンク色の四角を表示する

Slide 39

Slide 39 text

課題左右に跳ね返る四角

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

課題ランダムに四角を表示し、幅と高さが150pxを超えたら赤くする

Slide 43

Slide 43 text

一定の大きさを超えた場合、色を変える 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以上の場合

Slide 44

Slide 44 text

課題上下左右に跳ね返る四角（初期位置と移動速度をランダムにする）

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

繰り返し反復同じ処理を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); } }

Slide 48

Slide 48 text

課題 for文を使って、四角を縦に並べる

Slide 49

Slide 49 text

プログラミングの構造プログラムとはとデータ変数データ操作順次、分岐、反復 ……の集まり（構造化定理）