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

課題（様々な色の円） ランダムな色の円を画面中央に重ねていく

課題（様々な色の円） 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); }

課題（円） 丸を重ねてみる

課題（円） 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; } }

課題（四角） 四角を重ねてみる

課題（四角） 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); } }

課題（階段） for文を使って階段状に線を描画する

課題（階段） 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); } }

課題（四角回転） 四角を回転させて重ねてみる

回転に使う命令 angleMode(DEGREES); 角度を度数法で指定するモード translate(X座標, Y座標); 原点を指定した座標に変更する rotate(角度); 原点を中心に指定した角度回転させる

課題（四角回転） let boxSize; let angle; function setup() { createCanvas(640, 480); angleMode(DEGREES); }

課題（四角回転） 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; } }

課題（四角回転） 色を変えて遊んでみよう

課題（四角回転） パラメータ（値）を変えて遊んでみよう

課題（距離） 距離を利用した図形の描画

課題（距離） 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までの距離を求める

sinとcos sinとcosは波 sinに値を渡すと0→1→0→-1→0を繰り返す cosはsinを半分ずらしたもの 0 1 0 -1 0 1 0 1→0→-1→0→1を繰り返す

課題 sin/cosを使って図形を書いてみる

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

sinとcos sinとcosを使うと円が作れる 0, 1 1, 0 0, -1 -1, 0 数学の回転向きは反時計回り X座標→cos Y座標→sin sinとcosの値に数字をかけると 半径になる