🎇 Slime Mold Eclipse

📝 p5.js

// Slime Mold Simulation
let xMotion = 0;
let yMotion = 0;

const agents = [];
let trailMap;

const numX = 500;
const numY = 8;

function setup() {
  createCanvas(800, 800);

  colorMode(HSB, 360, 255, 255);
  background(0);
  noiseDetail(7, 0.7);

  // Use Float32Array for memory efficiency
  trailMap = new Float32Array(width * height).fill(0);

  // Initialize Agents
  for (let nx = 0; nx < numX; nx++) {
    let nmx = nx / numX;
    for (let ny = 0; ny < numY; ny++) {
      let nmy = ny / numY;

      const noiseVal = noise(nmx * nmy);

      const startX = width / 2 + sin(nmx * PI * 2) * (width / 3.5);
      const startY = height / 2 + cos(nmx * PI * 2) * (height / 3.5);
      const angle = nmx * PI * 2;

      agents.push(new Agent(startX, startY, angle, noiseVal));
    }
  }

  ellipseMode(CENTER);
  rectMode(CENTER);
  noStroke();
}

function draw() {
  // 1. Process Agents
  for (let agent of agents) {
    agent.sense(trailMap);
    agent.move();
    agent.deposit(trailMap); // Deposit logic usually happens after move
    agent.display();
  }

  // 2. Decay Trail
  // TypedArray optimized loop
  for (let i = 0; i < trailMap.length; i++) {
    trailMap[i] -= 0.1;
    if (trailMap[i] < 0) trailMap[i] = 0;
  }

  // 3. Global Motion
  xMotion += 0.05;
  yMotion += 0.0002;
}

// --- Agent Class (Strict Original Math) ---
class Agent {
  constructor(x, y, angle, noiseVal) {
    this.x = x; // Using simple x, y instead of p5.Vector for raw control
    this.y = y;
    this.angle = angle;
    this.vel = 1;
    this.depositVal = 1;
    this.noiseOffset = noiseVal;

    this.sensorOffset = 5;
    this.sensorAngle = 45; // degrees
  }

  sense(mapData) {
    const sensorRad = radians(this.sensorAngle);

    // round(sin(...))을 먼저 수행하여 오프셋을 정수로 만든 뒤 위치에 더함
    const getSensorIndex = (angleOffset) => {
      const angle = this.angle + angleOffset;

      // 1. Calculate Integer Offset first (Crucial for symmetry)
      const offX = Math.round(Math.sin(angle) * this.sensorOffset);
      const offY = Math.round(Math.cos(angle) * this.sensorOffset);

      // 2. Add to position and truncate using parseInt
      let sx = parseInt(this.x + offX);
      let sy = parseInt(this.y + offY);

      // 3. Boundary Wrap (Manual implementation to match original)
      if (sx < 0) sx += width;
      if (sy < 0) sy += height;
      sx %= width;
      sy %= height;

      return sx + sy * width;
    };

    const idxL = getSensorIndex(-sensorRad); // Left
    const idxF = getSensorIndex(0); // Forward
    const idxR = getSensorIndex(sensorRad); // Right

    const sL = mapData[idxL];
    const sF = mapData[idxF];
    const sR = mapData[idxR];

    // Behavior Logic
    if (sF < sL && sF < sR) {
      // Stay same (Random turn was commented out in original)
    } else if (sL < sR) {
      this.angle -= PI / 8; // Turn Left
    } else if (sR < sL) {
      this.angle += PI / 8; // Turn Right
    }
  }

  move() {
    this.x += this.vel * Math.sin(this.angle);
    this.y += this.vel * Math.cos(this.angle);
  }

  deposit(mapData) {
    // Boundary check (Original used 'continue', effectively skipping)
    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) return;

    // [중요] Diffusion 위치 계산 시 parseInt 사용
    const ix = parseInt(this.x);
    const iy = parseInt(this.y);
    const index = ix + iy * width;

    // Diffusion (3x3 Blur)
    const b = mapData[index] / 2;

    // Neighbor indices with manual wrapping
    // 원본의 (lx - 1), (lx + 1) 로직을 그대로 구현
    const prevX = ix - 1 < 0 ? width - 1 : ix - 1;
    const nextX = (ix + 1) % width;
    const prevY = iy - 1 < 0 ? height - 1 : iy - 1;
    const nextY = (iy + 1) % height;

    mapData[prevX + iy * width] = b;
    mapData[nextX + iy * width] = b;
    mapData[prevX + prevY * width] = b;
    mapData[prevX + nextY * width] = b;
    mapData[nextX + prevY * width] = b;
    mapData[nextX + nextY * width] = b;
    mapData[ix + prevY * width] = b;
    mapData[ix + nextY * width] = b;

    // Deposit current
    mapData[index] = this.depositVal;
  }

  display() {
    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) return;

    const ll = 400;
    // Magic visual formula strictly preserved
    // noise(this.noiseOffset...) -> ensures agents in the same ring flicker together
    const t =
      noise(this.noiseOffset + xMotion * 4) *
      2 *
      pow(
        1 - min(ll, frameCount) / ll,
        5.5 * (0.5 + (1 - this.y / height) / 2)
      );

    const sph = 1 - abs((0.5 - this.x / width) * 2);
    const colVal = 224 + noise(this.noiseOffset + xMotion * 2) * 32 * sph;

    fill(0, 0, colVal, t / 3);
    // Draw 1x1 rectangle at float position (p5 handles sub-pixel rendering, but logic is integer based)
    rect(this.x, this.y, 1, 1);
  }
}

점균류의 자연적인 움직임을 시뮬레이션하는 코드

1. 🧬 에이전트 생성 및 초기 방사형 배치

에이전트들이 시뮬레이션을 시작하는 초기 조건을 설정합니다.

• 에이전트 수 및 밀도:

  • numX (500)와 numY (8)를 곱하여 총 $4,000$개의 에이전트를 생성합니다.
  • $500$개의 각도(Angle)에 $8$개씩 겹쳐 배치하여 초기 대칭 구조를 만듭니다.

• 초기 위치 (방사형 배치):

  • sin(nmx * 2\pi)와 cos(nmx * 2\pi) 수식을 사용하여 캔버스 중앙을 기준으로 모든 에이전트를 완벽한 원형으로 배치합니다.

• 초기 각도 (this.angle):

  • 에이전트의 초기 방향을 원의 둘레를 따라 바깥쪽을 향하도록 설정하여, 패턴이 중앙에서 외곽으로 뻗어나가도록 유도합니다.

2. 🧭 에이전트 이동 및 센서 시스템

에이전트가 환경과 상호작용하며 경로를 결정하는 메커니즘입니다.

• 이동 속도:
  • this.vel은 1로 설정되어 프레임당 1픽셀씩 이동합니다.
• 센서 설정:
  • sensorOffset (3픽셀)과 sensorAngle ($45^\circ$)이 좌/우 센서의 위치를 결정합니다.
• 의사결정 (Behavior Logic):
  • 세 센서(좌, 전방, 우)의 흔적 밀도를 비교하여 흔적이 더 적은 방향으로 에이전트를 회전시킵니다. 이는 에이전트가 혼잡하지 않은 새로운 경로를 탐색하도록 유도합니다.
• 정수 연산의 역할 (대칭성 유지):
  • 센서 위치를 계산할 때 Math.round()와 parseInt()를 사용하여 좌표를 강제로 정수 그리드에 스냅(Snap)시킵니다. 이 미세한 정수화 처리가 에이전트의 움직임을 질서 있게 잡아주어 방사형 대칭이 무너지지 않도록 유지하는 데 결정적인 역할을 합니다.

3. 🧪 흔적 지도와 상호작용 (Trail Map and Interaction)

에이전트의 움직임에 반응하고 시간에 따라 변화하는 환경인 흔적 지도(trailMap)의 관리입니다.

• 흔적 지도 저장:

  • trailMap은 Float32Array로 구현되어 캔버스 픽셀별 흔적 밀도를 저장하며, 일반 배열보다 메모리 효율이 높습니다.

• 흔적 퇴적 (depositVal):

  • 에이전트가 이동할 때마다 현재 위치에 depositVal (1)만큼의 새로운 흔적을 남깁니다.

• 확산 (Diffusion):

  • 흔적을 남기는 순간, 주변 8개 이웃 픽셀의 밀도를 현재 위치 밀도의 절반으로 설정하여 흔적이 퍼져나가는 효과를 만듭니다.

• 감쇠 (Decay):

  • 모든 픽셀의 흔적 밀도를 프레임당 $-0.1$씩 감소시킵니다. 이 값이 흔적의 수명과 패턴의 크기를 결정합니다. (값이 클수록 흔적이 빨리 사라집니다.)

4. 🎨 시각적 요소 및 동적 변화

패턴의 미적인 요소와 시간 경과에 따른 움직임을 담당합니다.

• 시간 기반 노이즈 (xMotion):

  • xMotion이 매 프레임 증가하며 noise() 함수의 시드로 사용됩니다. 이는 시뮬레이션의 시각적 질감과 패턴이 시간에 따라 미묘하게 동적으로 움직이는 느낌을 만듭니다.

• 개별 노이즈 오프셋:

  • this.noiseOffset은 에이전트가 가진 고유한 노이즈 시드로, 색상과 밝기 계산에 입력되어 같은 위치의 에이전트들 사이에도 미세하게 다른 반짝임과 변화를 줍니다.

• 동적 페이드 효과 (t):

  • 복잡한 pow() 수식을 통해 계산되는 t 값은 에이전트가 남기는 흔적의 투명도를 조절합니다. 시간이 지날수록 흔적이 흐려지도록 하여 새로운 흔적이 더 선명하게 보이도록 합니다.