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

Transcript

1. プログラミング基礎#2 Basics of Programming 名古屋造形大学
2. ランダムな色の円を画面中央に重ねていく 様々な色の円
3. function setup() { createCanvas(640, 480); } function draw() { } function mouseMoved() { stroke(random(255), random(255), random(255), 70); circle(width/2 + random(-50, 50), height/2 + random(-50, 50), 200); } 様々な色の円
4. 丸を重ねてみる 円
5. let circleSize; function setup() { createCanvas(640, 480); } function draw() { background(220); circleSize = 400; for (let i = 0; i < 20; i++) { circle(width/2, height/2, circleSize); circleSize -= 20; } } 円
6. 四角を重ねてみる 四角
7. let x, y, boxSize; function setup() { createCanvas(640, 480); } function draw() { background(220); x = 10; y = 10; boxSize = 200; for (let i = 0; i < 20; i++) { x += 10; y += 10; boxSize -= 10; rect(x, y, boxSize, boxSize); } } 四角
8. for文を使って階段状に線を描画する 階段
9. let x, y, lineSize; function setup() { createCanvas(640, 480); } function draw() { background(220); x = 20; y = 20; lineSize = 20; for (let i = 0; i < 20; i++) { line(x + i*lineSize, x + i*lineSize, x + i*lineSize, x + (i*lineSize)+lineSize); line(x + i*lineSize, (y+lineSize) + i*lineSize, (x+lineSize) + i*lineSize, (y+lineSize) + i*lineSize); } } 階段
10. 提出課題 複数の図形を用いた作品を制作して提出してください リンクをDMで送る
11. 四角を回転させて重ねてみる 四角回転
12. angleMode(DEGREES); 角度を度数法で指定するモード translate(X座標, Y座標); 原点を指定した座標に変更する rotate(角度); 原点を中心に指定した角度回転させる 回転に使う命令
13. let boxSize; let angle; function setup() { createCanvas(640, 480); angleMode(DEGREES); } 四角回転
14. function draw() { background(220); boxSize = 300; angle = 0; translate(width/2, height/2); for (let i = 0; i < 36; i++) { boxSize -= 10; rotate(angle); rect(-boxSize/2, -boxSize/2, boxSize, boxSize); angle += 10; } } 四角回転
15. 色を変えて遊んでみよう 四角回転（色を変える）
16. パラメータ（値）を変えて遊んでみよう 四角回転
17. 距離を利用した図形の描画 距離
18. let x, y, circleSize; function setup() { createCanvas(400, 400); noStroke(); for (let i = 0; i < 300; i++) { x = width/2 + random(-300, 300); y = height/2 + random(-300, 300); circleSize = 200 - dist(width/2, height/2, x, y) * 1.1; fi ll(random(255), random(255), random(255)); if (circleSize > 0) { circle(x, y, circleSize); } } } dist(点AのX座標, 点AのY座標, 点BのX座標, 点BのY座標); 点Aから点Bまでの距離を求める 距離
19. sinとcosは波 sinに値を渡すと0→1→0→-1→0を繰り返す cosはsinを半分ずらしたもの 0 1 0 -1 0 1 0 1→0→-1→0→1を繰り返す sinとcos
20. sin/cosを使って図形を書いてみる 波
21. function setup() { createCanvas(640, 480); } function draw() { background(220); let num = 50; let boxWidth = width / num; let boxHeight = height / num; let a = 0.0; for (let i = 0; i < num; i++) { boxHeight -= sin(a) * 20; rect(i * boxWidth, height/2 - boxHeight/2, boxWidth, boxHeight); a += TWO_PI / num; } } 波
22. sinとcosを使うと円が作れる 0, 1 1, 0 0, -1 -1, 0 数学の回転向きは反時計回り X座標→cos Y座標→sin sinとcosの値に数字をかけると 半径になる 円
23. 提出課題 sinやcosを用いた作品を制作して提出してください リンクをDMで送る