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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

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

Avatar for ISHIGO Yusuke

ISHIGO Yusuke PRO

December 02, 2024
Tweet

More Decks by ISHIGO Yusuke

Other Decks in Education

Transcript

  1. 合同会社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-
  2. Bootstrap WordPress Ruby OpenCV C# node.js Smarty JavaScript Arduino PHP

    gulp Electron Golang Sass Swift Kotlin MySQL jQuery Python slim Unity AWS Dart プログラミング
  3. 順次 プログラムは、基本的に上から下へ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; 実行順序の例 プログラムの流れ 上 か ら 下 に 実 行 さ れ る
  4. function setup() { createCanvas(400, 400); } function draw() { background(220);

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

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

    background(220); } setup → 最初に一度だけ実行される draw → 何度も呼び出される プログラミングのルール
  7. createCanvas(400, 400); 関数名 内容1 (第1引数) 内容2 (第2引数) 画面幅 画面高さ 画面のサイズを決める

    最後には セミコロン 画面サイズを変えてみよう(例:幅→640、高さ→480) 関数(機能)の呼び出し方
  8. (0, 0) 480 640 50, 50 (50, 50) 200 200

    四角を書いてみる
  9. function setup() { createCanvas(640, 480); } function draw() { background(220);

    rect(50, 50, 200, 200); } ウィンドウのサイズを幅640、高さ480にする 左上座標(50, 50)に幅200px、高さ200pxで四角を書く 四角を書いてみる
  10. 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); 枠線の指定
  11. 階段状に線を描画する line(0, 0, 100, 100); 始点(0, 0)から終点(100, 100)まで線を引く 始点X座標, 始点Y座標,

    終点X座標, 終点Y座標 課題(階段) 始点X座標, 始点Y座標 終点X座標, 終点Y座標
  12. function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40);

    } マウスが動いたときに呼び出されるイベント関数 塗りつぶしの色を設定する random(255) 0から指定した数までのランダムな数を作る mouseMoved()
  13. backgroundの意味 function setup() { createCanvas(400, 400); } function draw() {

    //background(220); } function mouseMoved() { fi ll(random(255), random(255), random(255)); circle(mouseX, mouseY, 40); } 指定した色で画面全体を塗りつぶす コメントアウトすることで、塗りつぶしがなくなる
  14. マウスで左右対称に線を描く 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); }
  15. 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%ずつ塗りつぶしていく 徐々に消える表現 レイヤーが重なれば重なるほど消えていく
  16. 変数→データを入れるための箱 a = “abc”; ※ 文字列の場合は「”」もしくは「’」で囲う let a = 100;

    変数を作る命令 (最初だけ) 変数 a = 100; a 100 100 a = 200; a 100 200 a 200
  17. 「w」という箱を作って、「640」を入れる 「h」という箱を作って、「480」を入れる w(640)とh(480)を使う let w = 640; let h =

    480; function setup() { createCanvas(w, h); } function draw() { background(220); } 変数を使ってみる
  18. 数学の「計算」のことを、プログラムでは「演算」という ʴ ଍͢ ʔ Ҿ͘ ˎ ͔͚Δ ʗ ׂΔ ˋ

    ׂͬͨ༨Γ 計算順序は、数学と同じ(かける・割るが優先される) 0%2=0、1%2=1、2%2=0、3%2=1… 変数の演算
  19. 左上が画面中央になるので、幅と高さを半分を引く 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); } 四角を画面中央に描いてみる
  20. 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); } 四角のサイズをランダムに変える
  21. 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は関数内でしか使用できない 課題(ランダムな線)
  22. 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)); } クリックしたときに実行されるイベント関数 マウスクリックでランダムに色を変える
  23. 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増やす インクリメント 四角を画面の右側に動かしていく
  24. let size = 0; function setup() { createCanvas(400, 400); }

    function draw() { background(220); size += 1; circle(width/2, height/2, size); } 徐々に大きくなる円
  25. 条件式の種類 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{}は省略(書かなくても良い)できる 条件式
  26. クリックすると昼と夜が入れ替わる 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; } }
  27. 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)); } } 徐々に大きくなる円(色をランダムに変える)
  28. 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にする 四角が壁を突き抜けないようにするにはどうするか? 壁にあたったら跳ね返る
  29. 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); } 課題(左右に跳ね返る四角)
  30. 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); } 課題
  31. 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); } 課題
  32. 反復 同じ処理をn回繰り返す for (初期化; 条件式; 更新) { } 繰り返し for

    (let i = 0; i < 10; i++) { } ・{}の中身が10回実行される ・変数iが0→9まで変化する i → 0、i → 1、i →2 ...
  33. function setup() { createCanvas(640, 480); background(220); for (let i =

    0; i < 10; i++) { rect(random(400), random(400), 100, 100); } } function draw() { } 繰り返し