레슨 3 / 8·20분
인터랙션과 애니메이션
마우스와 키보드 인터랙션
p5.js는 마우스 위치, 클릭, 키보드 입력 등을 쉽게 처리할 수 있는 내장 변수와 함수를 제공합니다. mouseX와 mouseY는 현재 마우스 좌표를, mousePressed()와 keyPressed()는 이벤트 콜백을 제공합니다. 이를 수학 함수(sin, cos, random, noise)와 결합하면 인터랙티브한 비주얼 아트를 만들 수 있습니다.
javascript
let particles = [];
function setup() {
createCanvas(800, 600);
background(10);
}
function draw() {
background(10, 25); // 반투명 배경으로 잔상 효과
// 마우스 위치에 원 그리기
noStroke();
fill(255, 150, 200, 200);
ellipse(mouseX, mouseY, 30, 30);
// 파티클 업데이트
for (let i = particles.length - 1; i >= 0; i--) {
let p = particles[i];
p.x += random(-2, 2);
p.y += random(-2, 2);
p.life -= 2;
fill(p.r, p.g, p.b, p.life);
ellipse(p.x, p.y, p.size);
if (p.life <= 0) particles.splice(i, 1);
}
}
// 마우스 클릭 시 파티클 생성
function mousePressed() {
for (let i = 0; i < 20; i++) {
particles.push({
x: mouseX, y: mouseY,
r: random(150, 255), g: random(50, 200), b: random(100, 255),
size: random(5, 15),
life: 255,
});
}
}
// 키보드 입력
function keyPressed() {
if (key === 'c') background(10); // 'c' 키로 화면 지우기
}수학 함수를 활용한 유기적 움직임
javascript
function setup() {
createCanvas(800, 600);
}
function draw() {
background(10, 15, 30);
noStroke();
let t = frameCount * 0.02;
for (let i = 0; i < 200; i++) {
// noise() — 자연스러운 난수 (Perlin Noise)
let n = noise(i * 0.1, t);
// map() — 값의 범위를 변환
let x = map(sin(t + i * 0.05), -1, 1, 100, width - 100);
let y = map(cos(t + i * 0.07), -1, 1, 100, height - 100);
// sin/cos 로 원형 움직임
let offsetX = cos(i * 0.3 + t) * 80;
let offsetY = sin(i * 0.3 + t) * 80;
let size = map(n, 0, 1, 3, 12);
fill(map(i, 0, 200, 100, 255), 150, 255, 180);
ellipse(x + offsetX, y + offsetY, size);
}
}javascript
// translate/rotate/push/pop 으로 좌표계 변환
function draw() {
background(0);
let t = frameCount * 0.01;
// push/pop — 변환 상태를 저장/복원
push();
translate(width / 2, height / 2); // 원점을 화면 중앙으로
rotate(t); // 회전 (라디안)
fill(100, 200, 255);
rectMode(CENTER);
rect(0, 0, 100, 100);
// 중첩 변환
push();
translate(100, 0);
rotate(t * 3);
fill(255, 100, 150);
rect(0, 0, 40, 40);
pop();
pop();
}- •mouseX / mouseY — 현재 마우스 좌표 (매 프레임 자동 업데이트)
- •random(min, max) — 지정 범위의 무작위 값 반환
- •noise(x, y) — Perlin Noise로 부드럽게 변하는 0~1 난수
- •map(val, min1, max1, min2, max2) — 값의 범위를 변환
- •sin() / cos() — 원형 운동, 파동 등 주기적 움직임
- •push() / pop() — translate, rotate 등 변환 상태를 격리
💡
noise()는 random()과 달리 입력값이 가까우면 출력값도 비슷합니다. 이 특성으로 구름, 지형, 물결 같은 자연스러운 패턴을 만들 수 있습니다. noise(i * 0.01)처럼 작은 증분을 사용하면 더 부드러운 변화를 얻습니다.