1단계 — 노이즈 워커 하나

스타터 코드가 곧 1단계입니다. 실행해서 원이 화면을 부드럽게 흐르면 1단계 완료입니다. 1교시 ‘떠다니는 원’ 예제와 같은 코드입니다.

기대 결과: 파란 원 하나가 직선이 아니라 부드러운 곡선 경로로 움직입니다.

힌트: - 증가값은 0.005~0.02 사이로 둡니다. 작을수록 천천히 움직입니다. - xOff와 yOff는 반드시 다른 값에서 출발합니다(예: 0과 1000). 같으면 대각선으로만 움직입니다. - let xOff / let yOff는 draw() 밖에 선언합니다. 안에 두면 매 프레임 리셋돼 움직이지 않습니다.

실행이 되면 증가값을 0.05로 바꿔 실행해 보고, 다시 0.01로 돌려놓습니다. 움직임 차이를 직접 비교하는 것이 1단계의 목표입니다.

2단계 — 워커를 여러 개로

워커 하나를 여러 개로 늘립니다. 7주차에서 배운 배열과 for문을 씁니다.

1. draw() 밖에 워커 배열을 만듭니다: let walkers = [];
2. setup()에서 for문으로 워커 객체를 여러 개 push합니다. 워커마다 xOff, yOff 시작값을 다르게 둡니다.
3. draw()에서 for (let w of walkers)로 각 워커를 그립니다.

let walkers = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 5; i++) {
    walkers.push({
      xOff: i * 1000,
      yOff: i * 1000 + 500
    });
  }
}

function draw() {
  background(220);
  for (let w of walkers) {
    let x = noise(w.xOff) * width;
    let y = noise(w.yOff) * height;

    noStroke();
    fill(100, 150, 255);
    ellipse(x, y, 30, 30);

    w.xOff += 0.01;
    w.yOff += 0.01;
  }
}

기대 결과: 5개의 원이 각자 독립적인 경로로 떠다닙니다.

힌트: - 워커 i의 시작 오프셋을 i * 1000으로 두면 서로 충분히 떨어져 경로가 겹치지 않습니다. - 모든 워커가 똑같이 움직인다면 오프셋 시작값이 전부 같다는 뜻입니다. i * 1000 부분을 확인합니다.

3단계 — 유기적 질감 입히기

색과 잔상을 입혀 작품으로 만듭니다. HSB 모드에서 색을 노이즈로 정하고, 배경을 반투명하게 깔아 궤적을 남깁니다.

1. setup()에 colorMode(HSB, 360, 100, 100, 100)을 추가합니다.
2. draw()의 background(220)을 반투명 background(0, 0, 12, 20)으로 바꿉니다. 이전 프레임이 옅게 남아 궤적이 생깁니다.
3. 워커마다 색 오프셋(hueOff)과 크기 오프셋(sizeOff)을 추가해, 색과 크기도 노이즈로 변하게 합니다.

let walkers = [];

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 12);
  for (let i = 0; i < 5; i++) {
    walkers.push({
      xOff: i * 1000,
      yOff: i * 1000 + 500,
      hueOff: i * 1000 + 900,
      sizeOff: i * 1000 + 1400,
      baseHue: (i * 55) % 360
    });
  }
}

function draw() {
  background(0, 0, 12, 20);   // 반투명 배경 → 잔상

  for (let w of walkers) {
    let x = noise(w.xOff) * width;
    let y = noise(w.yOff) * height;
    let hue = (w.baseHue + noise(w.hueOff) * 60) % 360;
    let size = map(noise(w.sizeOff), 0, 1, 10, 40);

    noStroke();
    fill(hue, 80, 100, 70);
    ellipse(x, y, size, size);

    w.xOff += 0.01;
    w.yOff += 0.01;
    w.hueOff += 0.01;
    w.sizeOff += 0.02;
  }
}

기대 결과: 색과 크기가 천천히 변하고, 반투명 배경 덕분에 부드러운 궤적이 화면에 쌓입니다.

힌트: - 색·크기에 노이즈를 쓰려면 위치 오프셋과 다른 오프셋이 필요합니다. hueOff, sizeOff를 따로 둡니다. - 크기는 noise()가 0~1이라 그대로 쓰면 너무 작습니다. map(noise(sizeOff), 0, 1, 10, 40)으로 키웁니다. - 잔상이 너무 빨리 사라지면 background()의 마지막 값(20)을 더 작게, 너무 안 지워지면 더 크게 조절합니다.

4단계 — 인터랙션 추가

마지막으로 마우스·키보드 인터랙션을 더합니다. 4주차에서 배운 mousePressed(), keyPressed()를 씁니다. 완성 코드는 아래 완성 예제에 모두 들어 있습니다.

1. draw()에서 mouseX로 증가값을 정합니다: let step = map(constrain(mouseX, 0, width), 0, width, 0.002, 0.08); — 그리고 워커 오프셋을 0.01 대신 step만큼 증가시킵니다. (constrain()은 마우스가 캔버스 밖으로 나가도 step이 의도하지 않은 값이 되지 않게 막아 줍니다.)
2. mousePressed() 함수를 추가해, 클릭하면 워커를 하나 더 push합니다.
3. keyPressed() 함수를 추가해, 특정 키를 누르면 noiseSeed()로 노이즈 패턴을 새로 생성합니다.

기대 결과: 마우스를 왼쪽에 두면 천천히, 오른쪽에 두면 빠르게 흐릅니다. 클릭하면 워커가 늘고, 키를 누르면 노이즈 패턴이 새로 시작됩니다.

힌트: - mousePressed(), keyPressed()는 draw() 밖에 별도 함수로 작성합니다. draw() 안에 쓰면 동작하지 않습니다. - 워커를 추가할 때는 2·3단계에서 만든 워커 객체와 똑같은 모양으로 walkers.push({ ... }) 합니다. - noiseSeed(숫자)를 부르면 노이즈 패턴이 전체적으로 바뀝니다. 같은 숫자를 넣으면 같은 패턴이 다시 나옵니다.