Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

合同会社4D Pocket [代表] 4D Pocket LLC. 2017.4- 一般社団法人HOPTER TECH SCHOOL [共同代表] HOPTER TECH SCHOOL FOUNDATION 2021.5- 石郷 祐介 ISHIGO Yusuke 岐阜県生活技術研究所 Gifu Pref. Research Institute for Human Life Technology 2011.5-2012.3 情報科学芸術大学院大学[IAMAS] 博士前期課程 Institute of Advanced Media Arts and Sciences 2012.4-2018.3 公益財団法人ソフトピアジャパン SOFTOPIA JAPAN FOUNDATION 2015.4-2017.3 日本総合ビジネス専門学校 Japan Professional Training College of Business 2017.4-2021.5 名古屋造形大学 情報表現領域 [非常勤講師] Nagoya Zokei University 2022.4- 名古屋文理大学 情報メディア学部 [助教] Nagoya Bunri University 2023.11- 自己紹介 名古屋市立大学 芸術工学部 [非常勤講師] Nagoya City University 2025.4-

Slide 3

Slide 3 text

絵画に重ねると、絵画の一部が動き出す OKUTRANS

Slide 4

Slide 4 text

絵画に重ねると、絵画の一部が動き出す OKUTRANS

Slide 5

Slide 5 text

絵画に重ねると、絵画の一部が動き出す OKUTRANS

Slide 6

Slide 6 text

絵画に重ねると、絵画の一部が動き出す OKUTRANS

Slide 7

Slide 7 text

スマホの裏面に貼り付けたマークをタップすることで攻撃できるARシューティングゲーム BARNG

Slide 8

Slide 8 text

スマホの裏面に貼り付けたマークをタップすることで攻撃できるARシューティングゲーム BARNG

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

IT×お化け屋敷（アプリ開発プロジェクト）

Slide 12

Slide 12 text

AR（拡張現実）、デザイン Untiy（ゲームエンジン）、グラフィック プロジェクションマッピング、映像撮影 映像編集 物語創作（ストーリー分岐） モバイルアプリ

Slide 13

Slide 13 text

Bootstrap WordPress Ruby OpenCV C# node.js Smarty JavaScript Arduino PHP gulp Electron Golang Sass Swift Kotlin MySQL jQuery Python slim Unity AWS Dart プログラミング

Slide 14

Slide 14 text

プログラミングって、どんなイメージ？

Slide 15

Slide 15 text

コンピュータはプログラミングしてあげないと何もできない ？ コンピュータを動かすには

Slide 16

Slide 16 text

コンピュータはプログラミングしてあげないと何もできない ！ プログラミング ボタンを押したら◯◯する プログラミング言語 → 命令 → 命令するための言葉 コンピュータを動かすには

Slide 17

Slide 17 text

!!! Aボタンを押したら◯◯する Bボタンを押したら◯◯する Cボタンを押したら◯◯する … 細かく指示を与えないといけない コンピュータはプログラミングしてあげないと何もできない プログラミング プログラミング言語 → 命令 → 命令するための言葉 コンピュータを動かすには

Slide 18

Slide 18 text

プログラミングはスポーツやゲームと同じようにルールがある！ バットにボールを当てたら1塁に走る ボールを手で持つのはルール違反 ボールを持って規定の歩数以上歩いてはいけない 敵を踏むことで潰すことができる ブロックを下から押すことでアイテムがでることがある エラーというのはルール違反のこと プログラミングのルールを覚えよう！

Slide 19

Slide 19 text

順次 プログラムは上から順番に実行される 分岐 条件によって処理を分岐させる 反復 同じ処理を何度も繰り返す プログラミングの基本ルール（構造化定理）

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 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 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

(0, 0) 480 640 50, 50 (50, 50) 200 200 四角を書いてみる

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

backgroundの意味 function setup() { createCanvas(400, 400); } function draw() { //background(220); } function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40); } 指定した色で画面全体を塗りつぶす コメントアウトすることで、塗りつぶしがなくなる

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

マウスで左右対称に線を描く function setup() { createCanvas(400, 400); background(0); } function draw() { noStroke(); fi ll(59, 241, 108); circle(mouseX, mouseY, 30); fi ll(235, 107, 231); circle(width - mouseX, height - mouseY, 30); }

Slide 42

Slide 42 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 43

Slide 43 text

提出課題 図形描画を用いた作品を制作して提出してください リンクをDMで送る

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 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 47

Slide 47 text

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

Slide 48

Slide 48 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 49

Slide 49 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 50

Slide 50 text

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

Slide 51

Slide 51 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 52

Slide 52 text

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)); } クリックしたときに実行されるイベント関数 マウスクリックでランダムに色を変える

Slide 53

Slide 53 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 54

Slide 54 text

let size = 0; function setup() { createCanvas(400, 400); } function draw() { background(220); size += 1; circle(width/2, height/2, size); } 徐々に大きくなる円

Slide 55

Slide 55 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ではない if(条件式) { 条件式に当てはまったときに実行される } else { 条件式に当てはまらなかったときに実行される } ※ else{}は省略（書かなくても良い）できる 条件式

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

クリックすると昼と夜が入れ替わる let night = 1; function setup() { createCanvas(600, 400); noStroke(); } function mouseClicked() { if (night == 1) { background(10, 20, 40); fi ll(250, 250, 210); circle(80, 80, 60); night = 2; } else { background(135, 206, 235); fi ll(255, 220, 80); circle(80, 80, 60); night = 1; } }

Slide 58

Slide 58 text

let size = 0; function setup() { createCanvas(400, 400); background(0); fi ll(255, 255, 255); } function draw() { background(0); noStroke(); circle(width/2, height/2, size); size += 2; if (size > width + 200) { size = 0; fi ll(random(255), random(255), random(255)); } } 徐々に大きくなる円（色をランダムに変える）

Slide 59

Slide 59 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 60

Slide 60 text

左右に跳ね返る四角 課題（左右に跳ね返る四角）

Slide 61

Slide 61 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 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 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 65

Slide 65 text

function draw() { background(220); x += moveX; y += moveY; if (x > 640-100) { moveX *= -1; } if (x < 0) { moveX *= -1; } if (y > 480-100) { moveY *= -1; } if (y < 0) { moveY *= -1; } rect(x, y, 100, 100); } 課題

Slide 66

Slide 66 text

提出課題 動きのある図形を用いた作品を制作して提出してください リンクをDMで送る

Slide 67

Slide 67 text

反復 同じ処理をn回繰り返す for (初期化; 条件式; 更新) { } 繰り返し for (let i = 0; i < 10; i++) { } ・{}の中身が10回実行される ・変数iが0→9まで変化する i → 0、i → 1、i →2 ...

Slide 68

Slide 68 text

function setup() { createCanvas(640, 480); background(220); for (let i = 0; i < 10; i++) { rect(random(400), random(400), 100, 100); } } function draw() { } 繰り返し

Slide 69

Slide 69 text

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