🎇 Bird flocks at dusk

📝 p5.js

// w03_example_05.js

let baseColorA;
let baseColorB;
let currentColorA;
let currentColorB;

let particles = [];
const PARTICLE_COUNT = 8000;

function setup() {
  createCanvas(800, 800);
  colorMode(RGB, 255);
  noStroke();

  // 그라데이션 초기 색
  baseColorA = color(40, 60, 90);
  baseColorB = color(220, 200, 180);

  currentColorA = baseColorA;
  currentColorB = baseColorB;

  // 파티클 생성
  for (let i = 0; i < PARTICLE_COUNT; i++) {
    particles.push(new BirdParticle());
  }
}

function draw() {
  drawGradientBackground();

  for (let p of particles) {
    p.update();
    p.display();
  }
}

/* ------------------------------
   Gradient Background
-------------------------------- */

function drawGradientBackground() {
  let t = frameCount * 0.005;

  let targetColorA = color(
    40 + noise(t) * 80,
    60 + noise(t + 10) * 80,
    90 + noise(t + 20) * 80
  );

  let targetColorB = color(
    180 + noise(t + 30) * 60,
    170 + noise(t + 40) * 60,
    160 + noise(t + 50) * 60
  );

  currentColorA = lerpColor(currentColorA, targetColorA, 0.01);
  currentColorB = lerpColor(currentColorB, targetColorB, 0.01);

  for (let y = 0; y < height; y++) {
    let distanceFactor = dist(mouseX, mouseY, width / 2, y) / width;

    let verticalFactor = map(y, 0, height, 0, 1);
    let blendFactor = lerp(verticalFactor, distanceFactor, 0.3);

    let c = lerpColor(
      currentColorA,
      currentColorB,
      constrain(blendFactor, 0, 1)
    );

    fill(c);
    rect(0, y, width, 1);
  }
}

/* ------------------------------
   Bird-like Particles
-------------------------------- */

class BirdParticle {
  constructor() {
    this.position = createVector(random(width), random(height));

    this.velocity = p5.Vector.random2D();
    this.velocity.mult(random(0.3, 0.8));

    this.noiseOffset = random(1000);
    this.size = random(0.5, 3);
  }

  update() {
    let angle =
      noise(
        this.position.x * 0.02,
        this.position.y * 0.02,
        frameCount * 3.02 + this.noiseOffset
      ) *
      TWO_PI *
      2;

    let flowVector = p5.Vector.fromAngle(angle);
    flowVector.mult(0.05);

    this.velocity.add(flowVector);
    this.velocity.limit(1);

    this.position.add(this.velocity);
    this.wrapEdges();
  }

  wrapEdges() {
    if (this.position.x < 0) this.position.x = width;
    if (this.position.x > width) this.position.x = 0;
    if (this.position.y < 0) this.position.y = height;
    if (this.position.y > height) this.position.y = 0;
  }

  display() {
    fill(0, 140);
    ellipse(this.position.x, this.position.y, this.size, this.size);
  }
}

이 코드는 동적 그라데이션 배경과 조류처럼 움직이는 파티클 시스템을 구현한 것입니다. 그라데이션 색상 생성과 마우스 위치를 활용한 색 변경에 대해 자세히 분석해 보겠습니다.

1. 동적 그라데이션 배경:
   • 시간에 따라 천천히 변하는 색상
   • 마우스 위치에 반응하는 그라데이션 패턴
2. 조류처럼 움직이는 파티클:
   • 노이즈 기반의 유체적 움직임
   • 8000개의 파티클이 함께 움직이며 마치 새떼 같은 효과
     3 상호작용:
   • 마우스를 움직이면 그라데이션이 변화하여 사용자와의 상호작용 가능

그라데이션 색상 생성 과정

1. 초기 색상 설정

// 그라데이션 초기 색
baseColorA = color(40, 60, 90);  // 짙은 파란색 계열
baseColorB = color(220, 200, 180);  // 옅은 베이지/노란색 계열

2. 동적 색상 변화

let t = frameCount * 0.005;

let targetColorA = color(
  40 + noise(t) * 80,
  60 + noise(t + 10) * 80,
  90 + noise(t + 20) * 80
);

let targetColorB = color(
  180 + noise(t + 30) * 60,
  170 + noise(t + 40) * 60,
  160 + noise(t + 50) * 60
);

currentColorA = lerpColor(currentColorA, targetColorA, 0.01);
currentColorB = lerpColor(currentColorB, targetColorB, 0.01);

• noise() 함수를 사용하여 부드럽게 색상이 변하도록 설정
• 각 색상 채널(R, G, B)에 다른 오프셋(noise(t +10), noise(t + 20)등)을 적용
• lerpColor() 함수를 이용하여 현재 색상과 목표 색상을 0.01의 비율로 부드럽게 보간

3. 수직 그라데이션 구현

for (let y = 0; y < height; y++) {
  let verticalFactor = map(y, 0, height, 0, 1);
  let c = lerpColor(currentColorA, currentColorB, verticalFactor);
  fill(c);
  rect(0, y, width, 1);
}

• y좌표에 따라 색상을 혼합하여 수직 그라데이션 생성
• map()함수로 y좌표를 0~1 범위로 변환
• lerpColor()로 두 색상을 혼합

마우스 위치를 활용한 색 변경

1. 마우스 거리 기반 색상 혼합

let distanceFactor = dist(mouseX, mouseY, width / 2, y) / width;

• dist() 함수로 마우스 위치와 화면 중앙 x축의 특정 y 지점 사이의 거리 계산
• / width로 정규화하여 0~1 범위로 변환

2. 수직 위치와 마우스 거리 혼합

let blendFactor = lerp(verticalFactor, distanceFactor, 0.3);

• 일반적인 수직 그라데이션(verticalFactor)과 마우스 거리 기반 그라데이션(distanceFactor)을 30% 비율로 혼합
• 이로 인해 그라데이션이 수직 방향 외에 마우스 위치에도 반응

3. 최종 색상 적용

let c = lerpColor(
  currentColorA,
  currentColorB,
  constrain(blendFactor, 0, 1)
);

• 혼합 요소를 0~1 범위로 제한
• 두 색상을 혼합하여 최종 색상 생성