プログラミング基礎#2 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); } } 階段 

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

四角を回転させて重ねてみる 四角回転 

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に値を渡すと0→1→0→-1→0を繰り返す cosはsinを半分ずらしたもの 0 1 0 -1 0 1 0 1→0→-1→0→1を繰り返す sinとcos 

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

提出課題 sinやcosを用いた作品を制作して提出してください リンクをDMで送る