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

Transcript

1. プログラミング基礎#1 Basics of Programming 名古屋造形大学
2. 合同会社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-
3. 絵画に重ねると、絵画の一部が動き出す OKUTRANS
4. 絵画に重ねると、絵画の一部が動き出す OKUTRANS
5. 絵画に重ねると、絵画の一部が動き出す OKUTRANS
6. 絵画に重ねると、絵画の一部が動き出す OKUTRANS
7. スマホの裏面に貼り付けたマークをタップすることで攻撃できるARシューティングゲーム BARNG
8. スマホの裏面に貼り付けたマークをタップすることで攻撃できるARシューティングゲーム BARNG
11. IT×お化け屋敷（アプリ開発プロジェクト）
12. AR（拡張現実）、デザイン Untiy（ゲームエンジン）、グラフィック プロジェクションマッピング、映像撮影 映像編集 物語創作（ストーリー分岐） モバイルアプリ
13. Bootstrap WordPress Ruby OpenCV C# node.js Smarty JavaScript Arduino PHP gulp Electron Golang Sass Swift Kotlin MySQL jQuery Python slim Unity AWS Dart プログラミング
14. プログラミングって、どんなイメージ？
15. コンピュータはプログラミングしてあげないと何もできない ？ コンピュータを動かすには
16. コンピュータはプログラミングしてあげないと何もできない ！ プログラミング ボタンを押したら◯◯する プログラミング言語 → 命令 → 命令するための言葉 コンピュータを動かすには
17. !!! Aボタンを押したら◯◯する Bボタンを押したら◯◯する Cボタンを押したら◯◯する … 細かく指示を与えないといけない コンピュータはプログラミングしてあげないと何もできない プログラミング プログラミング言語 → 命令 → 命令するための言葉 コンピュータを動かすには
18. プログラミングはスポーツやゲームと同じようにルールがある！ バットにボールを当てたら1塁に走る ボールを手で持つのはルール違反 ボールを持って規定の歩数以上歩いてはいけない 敵を踏むことで潰すことができる ブロックを下から押すことでアイテムがでることがある エラーというのはルール違反のこと プログラミングのルールを覚えよう！
19. 順次 プログラムは上から順番に実行される 分岐 条件によって処理を分岐させる 反復 同じ処理を何度も繰り返す プログラミングの基本ルール（構造化定理）
20. グラフィカルなプログラムを簡単に作ることができる開発ツール https://editor.p5js.org/ プログラムを書くところ プログラムの結果 p5.js（ピーファイブ）
21. プログラミング言語「Java」をベースにMITメディアラボにて開発されたアートと ビジュアルデザインのためのプログラミング環境（オープンソース・ソフトウェア） https://processing.org/download/ Processing
22. クリエイティブコーディング
23. ジェネラティブ・アート Processingによる実践ガイド マット・ピアソン（著） 久保田 晃弘（監訳）、沖 啓介（訳） ビー・エヌ・エヌ新社 「ジェネラティブ・アート」日本語編集
24. 順次 プログラムは、基本的に上から下へ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; 実行順序の例 プログラムの流れ 上 か ら 下 に 実 行 さ れ る
25. function setup() { createCanvas(400, 400); } function draw() { background(220); } 全く同じように書いてみよう 動かない場合は何かが違う（大文字・小文字、カッコ、記号は合っているか） プログラミングのルール
26. クリックで実行する プログラムの実行
27. function setup() { createCanvas(400, 400); } function draw() { background(220); } プログラミングの注意点 ・{}が処理のかたまり（関数）を表す ・大文字と小文字は区別される ・命令の後ろには「;」をつける 処理の名前 処理の中身 プログラミングのルール
28. functionはイベント関数（すでに用意されている関数）を表す function setup() { createCanvas(400, 400); } function draw() { background(220); } setup → 最初に一度だけ実行される draw → 何度も呼び出される プログラミングのルール
29. createCanvas(400, 400); 関数名 内容1 （第1引数） 内容2 （第2引数） 画面幅 画面高さ 画面のサイズを決める 最後には セミコロン 画面サイズを変えてみよう（例：幅→640、高さ→480） 関数（機能）の呼び出し方
30. (0, 0) 480 640 50, 50 (50, 50) 200 200 四角を書いてみる
31. function setup() { createCanvas(640, 480); } function draw() { background(220); rect(50, 50, 200, 200); } ウィンドウのサイズを幅640、高さ480にする 左上座標(50, 50)に幅200px、高さ200pxで四角を書く 四角を書いてみる
32. 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); 枠線の指定
33. circle(160, 160, 200); 中心座標（160, 160）、直径200pxの円 円の描画
34. noFill(); 塗りつぶしをなしにする フレーミーを描いてみる
35. 階段状に線を描画する line(0, 0, 100, 100); 始点（0, 0）から終点（100, 100）まで線を引く 始点X座標, 始点Y座標, 終点X座標, 終点Y座標 課題（階段） 始点X座標, 始点Y座標 終点X座標, 終点Y座標
36. circle(mouseX, mouseY, 200); mouseX → マウスのX座標 mouseY → マウスのY座標 マウス座標に円を描画する
37. // circle(mouseX, mouseY, 200); 「//」以降に書かれたプログラムは読み飛ばされる コメント化することを「コメントアウト」と言う プログラムを試行錯誤するときは、いきなりコードを消さずに コメントとして残しておく コメント
38. function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40); } マウスが動いたときに呼び出されるイベント関数 塗りつぶしの色を設定する random(255) 0から指定した数までのランダムな数を作る mouseMoved()
39. backgroundの意味 function setup() { createCanvas(400, 400); } function draw() { //background(220); } function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40); } 指定した色で画面全体を塗りつぶす コメントアウトすることで、塗りつぶしがなくなる
40. 始点（0, 0）からマウス座標までランダムな色で線を引く line(0, 0, 100, 100); 始点（0, 0）から終点（100, 100）まで線を引く 課題（線）
41. マウスで左右対称に線を描く 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); }
42. 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%ずつ塗りつぶしていく 徐々に消える表現 レイヤーが重なれば重なるほど消えていく
43. 提出課題 図形描画を用いた作品を制作して提出してください リンクをDMで送る
44. https://p5js.org/reference/ P5.jsリファレンス
45. 変数→データを入れるための箱 a = “abc”; ※ 文字列の場合は「”」もしくは「’」で囲う let a = 100; 変数を作る命令 （最初だけ） 変数 a = 100; a 100 100 a = 200; a 100 200 a 200
46. 「w」という箱を作って、「640」を入れる 「h」という箱を作って、「480」を入れる w（640）とh（480）を使う let w = 640; let h = 480; function setup() { createCanvas(w, h); } function draw() { background(220); } 変数を使ってみる
47. 数学の「計算」のことを、プログラムでは「演算」という ʴ ଍͢ ʔ Ҿ͘ ˎ ͔͚Δ ʗ ׂΔ ˋ ׂͬͨ༨Γ 計算順序は、数学と同じ（かける・割るが優先される） 0%2＝0、1%2＝1、2%2＝0、3%2＝1… 変数の演算
48. 左上が画面中央になるので、幅と高さを半分を引く 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); } 四角を画面中央に描いてみる
49. 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); } 四角のサイズをランダムに変える
50. 線をランダムな位置に描画し続ける 課題（ランダムな線）
51. 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は関数内でしか使用できない 課題（ランダムな線）
52. 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)); } クリックしたときに実行されるイベント関数 マウスクリックでランダムに色を変える
53. 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増やす インクリメント 四角を画面の右側に動かしていく
54. let size = 0; function setup() { createCanvas(400, 400); } function draw() { background(220); size += 1; circle(width/2, height/2, size); } 徐々に大きくなる円
55. 条件式の種類 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{}は省略（書かなくても良い）できる 条件式
56. １．変数「a」の中身が0なら四角を表示する、それ以外なら表示しない ２．変数「a」の中身が0なら赤色の四角、0以外なら青色の四角を表示する ３．変数「a」の中身が正の数なら赤色の四角、負の数なら青色の四角を表示する 課題
57. クリックすると昼と夜が入れ替わる 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; } }
58. 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)); } } 徐々に大きくなる円（色をランダムに変える）
59. 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にする 四角が壁を突き抜けないようにするにはどうするか？ 壁にあたったら跳ね返る
60. 左右に跳ね返る四角 課題（左右に跳ね返る四角）
61. 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); } 課題（左右に跳ね返る四角）
62. ランダムに四角を表示し、幅と高さが150pxを超えたら赤くする 課題
63. 上下左右に跳ね返る四角（初期位置と移動速度をランダムにする） 課題
64. 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); } 課題
65. 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); } 課題
66. 提出課題 動きのある図形を用いた作品を制作して提出してください リンクをDMで送る
67. 反復 同じ処理をn回繰り返す for (初期化; 条件式; 更新) { } 繰り返し for (let i = 0; i < 10; i++) { } ・{}の中身が10回実行される ・変数iが0→9まで変化する i → 0、i → 1、i →2 ...
68. function setup() { createCanvas(640, 480); background(220); for (let i = 0; i < 10; i++) { rect(random(400), random(400), 100, 100); } } function draw() { } 繰り返し
69. for文を使って、四角を縦に並べる 課題