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

課題 赤色のグラデーションをつけた丸を表示する

課題 赤色のグラデーションをつけた丸を表示する function setup() { createCanvas(640, 480); noStroke(); } function draw() { background(220); for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { fi ll(220, 220 - (22 * i), 220 - (22 * i)); circle(i * 30 + 15, j * 30 + 15, 30); } } }

noise パーリンノイズ 連続性を持ったなだらかな値（0.0〜1.0）を出力する 炎や煙、雲を表現するときに用いられる

random関数 let count = 0; function setup() { createCanvas(400, 400); } function draw() { background(220); strokeWegiht(5); stroke(255, 0, 0); point(random(width), random(height)); }

noise関数 let count = 0; function setup() { createCanvas(400, 400); } function draw() { background(220); strokeWegiht(5); stroke(255, 0, 0); count += 0.01; point(noise(count) * width, noise(count) * height); } ノイズの変化量を与える noise(Xの変化量, Yの変化量, Zの変化量);

課題（パーリンノイズ円） パーリンノイズを使った円

課題（パーリンノイズ円） function draw() { background(220); let lastX = -1; let lastY = -1; let radius = 100; let n = 0; for (let ang = 0; ang <= 1440; ang++) { let rad = radians(ang); n += 0.05; let x = width/2 + (radius + noise(n) * 50 - 50) * cos(rad); let y = height/2 + (radius + noise(n) * 50 - 50) * sin(rad); if (lastX > 0) { line(x, y, lastX, lastY); } radius += 0.1; lastX = x; lastY = y; } }

課題（パーリンノイズグリッド） パーリンノイズを使ったグリッド

課題（パーリンノイズグリッド） let numX = 16; let numY = 12; let w = width / numX; let h = height / numY; function setup() { createCanvas(400, 400); fi ll(220, 90, 60); strokeWeight(3); } function draw() { background(220); for (let i = 0; i < numX; i++) { let x = i * w; for (let j = 0; j < numY; j++) { let y = j * h; let s = noise(x * 0.005, y * 0.005); rect(x, y, s * w, s * h); } } }

課題（パーリンノイズグリッド＋色） パーリンノイズを使ったグリッド

課題（パーリンノイズグリッド＋色） let numX = 16; let numY = 12; let w = width / numX; let h = height / numY; function setup() { createCanvas(400, 400); colorMode(HSB); noStroke(); } function draw() { background(220); for (let i = 0; i < numX; i++) { let x = i * w; for (let j = 0; j < numY; j++) { let y = j * h; let s = noise(x * 0.005, y * 0.005); fi ll(noise(x * 0.005, y * 0.005) * 480, 100, 100, 1); rect(x, y, s * w, s * h); } } } HSBは360度で全色を表すが、今回の用途では端のほうの色（赤系） が出にくいので、480度（360+120）の範囲にする

課題（パーリンノイズドット）

課題（パーリンノイズドット） function setup() { createCanvas(600, 600); blendMode(SCREEN); strokeWeight(2); stroke(255, 255, 255, 100); noLoop(); } function draw() { background(0); for (let x = 0.3; x <= 0.7; x += 0.02) { for (let y = 0.3; y <= 0.7; y += 0.02) { let px = x; let py = y; for (let cnt = 0; cnt < 300; cnt++) { px += 0.001 * cos(TWO_PI * noise(px, py)); py += 0.001 * sin(TWO_PI * noise(py, px)); point(px * width, py * height); } } } }

課題（音量に反応する図形）

課題（音量に反応する図形） let mic; let count = 0; function setup() { createCanvas(400, 400); colorMode(HSB); mic = new p5.AudioIn(); mic.start(); } function draw() { background(0, 0, 100, 0.2); fi ll(random(360), 80, 100); count++; let volume = mic.getLevel(); let d = volume * 1000; rect((-100+count*4)%width - d/2, height*0.6 - d/2, d, d); rect((-200+count*3)%width - d/2, height*0.4 - d/2, d, d); rect((-300+count*2)%width - d/2, height*0.2 - d/2, d, d); } mic.getLevel()で音量を取得する（0.0〜1.0）

高速フーリエ変換（FFT: Fast Fourier Transform） すべての音はsin波の組み合わせで作ることができる 音をsin波に分解することで、音に含まれる周波数成分を特定できる

課題（周波数成分を可視化する） let mic; let ff t; function setup() { createCanvas(600, 400); noFill(); mic = new p5.AudioIn(); mic.start(); ff t = new p5.FFT(); ff t.setInput(mic); } function draw() { background(200); let spectrum = ff t.analyze(); beginShape(); for (let i = 0; i < spectrum.length; i++) { vertex(i, map(spectrum[i], 0, 255, height, 0)); } endShape(); } 周波数を0〜1023の範囲で取得できる ※ 0は直流成分