GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

슬라임몰드 길찾기 9종 — 점균 네트워크가 스스로 최단경로를 찾는 캔버스

· Godrich · 9종 · 16분 읽기

크리에이티브 UI바닐라 JSReact자동 재생클릭히어로 섹션게임 · 놀이

슬라임몰드 길찾기를 캔버스 픽셀 계산만으로 재현합니다. 라이브러리·WebGL 없이 화면 위를 기어다니는 점 하나하나가 앞·좌·우 냄새를 맡고 진한 쪽으로 도는 규칙만 반복하는 것으로, 미로의 최단경로를 스스로 찾아내는 점균 네트워크가 자랍니다.

기본 3센서 에이전트 — 앞·좌·우 냄새를 맡고 도는 점균 한 마리01 slime-agent-sensor-basic 미로 최단경로 — 이그노벨상 실험을 캔버스로 재현02 slime-maze-solve-pathfind 다중 먹이 네트워크 — 철도망처럼 최적 연결선을 그리기03 slime-network-food-source 포인터 먹이·기피물 — 클릭한 자리로 네트워크가 자라거나 피하기04 slime-pointer-attract-repel 다종 영역 경쟁 — 서로 다른 색 두 군집이 화면을 나눠 갖기05 slime-multi-species-territory 트레일 나이 채색 — 최근 지나간 길일수록 밝게 빛나는 네온 잔상06 slime-trail-decay-color-age 센서 각도 모프 — 각도 하나로 산호에서 혈관까지 형태가 바뀌기07 slime-sensor-angle-morph 유기체 텍스처 패널 — 고정 프레임을 캡처해 카드 배경으로 깔기08 slime-veins-texture-panel 매크로 발광 씬 — 어두운 배경 위 다큐멘터리 조명의 점균 장면09 slime-macro-bioluminescent-scene

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

데모

아홉 판은 각각 독립적으로 돌아갑니다. 시드를 고정해 결정적으로 굴리므로 같은 판을 다시 열어도 같은 성장이 나타나고, 24프레임을 녹화하는 동안 아홉 판 모두 23프레임이 움직였습니다(움직인프레임 23). 클릭해 만질 수 있는 판도 있으니 첫 장부터 직접 부딪혀 보시길 권합니다.

항목 초점 누적면적(%) 강도 평균
01 기본 3센서 감각·회전·퇴적의 최소 규칙 51.385 46.9
02 미로 최단경로 장애물 필드 위의 길찾기 43.166 19.8
03 다중 먹이 여러 지점을 잇는 수송망 36.237 15.9
04 포인터 먹이·기피 끌림과 밀어냄의 부호 하나 41.776 17.1
05 다종 영역 경쟁 두 색 군집의 밀어내기 53.258 57.0
06 트레일 나이 채색 마지막 방문 시각의 색 35.206 76.0
07 센서 각도 모프 값 두 개로 형태 변화 49.385 22.2
08 유기체 텍스처 자란 순간의 정지 캡처 34.819 15.5
09 매크로 발광 씬 어두운 무대의 조명 연출 49.253 54.7

센서 각도 하나로 산호에서 혈관까지 가른 아홉 걸음

순서는 화려함이 아니라 규칙에 무엇을 하나씩 얹었는가로 정했습니다. 01은 감각·회전·퇴적 세 동작만 남긴 최소판이고, 02는 그 위에 벽을 -1000짜리 장애물 필드로 깔아 이그노벨상 실험을 재현하며, 03은 먹이 지점을 여러 개 두어 먹이 가중치 FOOD_W 하나로 수송망을 만듭니다. 04는 먹이에 부호를 붙여 소금(기피물질)까지 다루고, 05는 트레일 필드를 종마다 하나씩 들고 서로를 밀어내게 하며, 06은 트레일 강도 대신 마지막 방문 시각을 기록해 색을 입힙니다. 07은 규칙을 바꾸지 않고 센서 벌림각·거리 두 값만 움직여 형태가 산호에서 혈관으로 갈리는 걸 보여주고, 08은 자란 순간을 정지 캡처로 굳혀 질감으로 재사용하며, 09는 같은 계산을 검은 무대와 조명 위에 올려 매크로 촬영 한 장면으로 마무리합니다. 슬라임몰드 길찾기로 찾아오신 분께는 02가, 화면 배경이 궁금하신 분께는 08·09가 곧장 답이 될 순서입니다.

항목별 코드

01기본 3센서 에이전트 — 앞·좌·우 냄새를 맡고 도는 점균 한 마리

기본 3센서 에이전트 — 앞·좌·우 냄새를 맡고 도는 점균 한 마리
새 창에서 열기

01 · 기본 3센서 에이전트 — 앞·좌·우 냄새를 맡고 도는 점균 한 마리 — 측정 누적면적 51.385% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDataputImageDatarequestAnimationFrame

에이전트마다 전방 부채꼴 세 지점의 페로몬 농도를 읽어 가장 짙은 쪽으로 살짝 돌고 한 걸음 전진하며 지나간 자리에 트레일을 남기면 천수백 개가 모여 저절로 혈관 같은 네트워크가 자라고, 측정은 누적면적 51.385%·최대 면적 34.913%로 아홉 판 중 넓게 퍼지는 축입니다.

감각에서 퇴적까지의 한 사이클

  function stepAgents() {
    for (var i = 0; i < AGENTS; i++) {
      var x = ax[i], y = ay[i], h = ah[i];
      var sf = sample(x + Math.cos(h) * SENSOR_DIST, y + Math.sin(h) * SENSOR_DIST);
      var sl = sample(x + Math.cos(h + SENSOR_ANGLE) * SENSOR_DIST, y + Math.sin(h + SENSOR_ANGLE) * SENSOR_DIST);
      var sr = sample(x + Math.cos(h - SENSOR_ANGLE) * SENSOR_DIST, y + Math.sin(h - SENSOR_ANGLE) * SENSOR_DIST);
      if (sf >= sl && sf >= sr) {
        // 직진 — 가장 짙은 쪽이 정면
      } else if (sl > sr) {
        h += TURN;
      } else if (sr > sl) {
        h -= TURN;
      } else {
        h += (rand() < 0.5 ? 1 : -1) * TURN;
      }
      h += (rand() - 0.5) * 0.14;
      var nx = x + Math.cos(h) * STEP, ny = y + Math.sin(h) * STEP;
      nx = ((nx % fw) + fw) % fw; ny = ((ny % fh) + fh) % fh;
      ax[i] = nx; ay[i] = ny; ah[i] = h;
      var ii = idx(Math.round(nx), Math.round(ny));
      trail[ii] = Math.min(CAP, trail[ii] + DEPOSIT);
    }
    stepCount++;
  }

머리 방향 h에서 벌림각 SENSOR_ANGLE만큼 좌우로 벌린 세 지점을 SENSOR_DIST 거리에서 읽고, 정면이 가장 짙으면 그대로 직진합니다. 좌우 중 짙은 쪽으로 TURN만큼 돌고 매 걸음 (rand() - 0.5) * 0.14의 흔들림을 얹어 갈라지는 혈관이 나게 하며, 마지막 줄의 Math.min(CAP, trail[ii] + DEPOSIT)이 지나간 자리에 냄새를 남기는 퇴적입니다.

02미로 최단경로 — 이그노벨상 실험을 캔버스로 재현

미로 최단경로 — 이그노벨상 실험을 캔버스로 재현
새 창에서 열기

02 · 미로 최단경로 — 이그노벨상 실험을 캔버스로 재현 — 측정 누적면적 43.166% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDatarequestAnimationFrame

미로 벽을 장애물 필드로 깔고 입구·출구에 먹이를 두면 막다른 길의 트레일부터 말라 없어지고 가장 짧은 통로만 굵어지며 스스로 최단경로를 찾아내는데, 2008년 인지과학 이그노벨상을 받은 점균 미로 실험과 같은 구조를 화면 안에서 돌려 보는 판입니다.

벽은 센서 값 -1000, 에이전트는 빈 칸에서만 태운다

  function sense(x, y) {
    var i = clampIdx(x, y);
    if (obstacle[i]) return -1000;
    return trail[i] + food[i] * FOOD_W * CAP;
  }

  function initAgents() {
    var open = [];
    for (var i = 0; i < obstacle.length; i++) if (!obstacle[i]) open.push(i);
    ax = new Float32Array(AGENTS); ay = new Float32Array(AGENTS); ah = new Float32Array(AGENTS);
    for (var k = 0; k < AGENTS; k++) {
      var oi = open[Math.floor(rand() * open.length)];
      ax[k] = oi % fw; ay[k] = Math.floor(oi / fw);
      ah[k] = rand() * Math.PI * 2;
    }
  }

벽 칸은 어떤 트레일보다 작은 -1000을 돌려주어 세 센서가 그쪽을 향하지 않게 만들고, 시작 시 에이전트는 벽이 아닌 칸 목록 open에서만 뽑아 태웁니다. 걸음마다 다음 칸이 장애물이면 방향을 크게 틀어 되돌아나오는 처리가 이어지는데, 이 세 가지만으로 안내 표지 없이 통로가 저절로 좁혀집니다.

03다중 먹이 네트워크 — 철도망처럼 최적 연결선을 그리기

다중 먹이 네트워크 — 철도망처럼 최적 연결선을 그리기
새 창에서 열기

03 · 다중 먹이 네트워크 — 철도망처럼 최적 연결선을 그리기 — 측정 누적면적 36.237% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDatarequestAnimationFrame

먹이 지점을 여러 개 흩뿌리면 점균이 모든 지점을 잇는 굵은 간선과 가는 지선을 스스로 구분해 효율적인 방사형 수송망을 그려내는데, 2010년 같은 연구진이 점균으로 도쿄 지하철 노선망과 비슷한 연결을 재현했다는 보고와 닿아 있는 판입니다.

먹이 가중치 하나가 지선을 간선으로 바꾼다

  function sense(x, y) {
    var i = clampIdx(x, y);
    return trail[i] + food[i] * FOOD_W * CAP;
  }

  function initAgents() {
    ax = new Float32Array(AGENTS); ay = new Float32Array(AGENTS); ah = new Float32Array(AGENTS);
    var cx = fw / 2, cy = fh / 2, r = Math.min(fw, fh) * 0.12;
    for (var i = 0; i < AGENTS; i++) {
      var a = rand() * Math.PI * 2, rr = rand() * r;
      ax[i] = cx + Math.cos(a) * rr;
      ay[i] = cy + Math.sin(a) * rr;
      ah[i] = rand() * Math.PI * 2;
    }
  }

센서가 읽는 값은 트레일에 먹이 필드를 FOOD_W * CAP배로 얹은 합이라 먹이 주변은 항상 짙게 읽히고, 에이전트가 그 주변을 맴돌다 서로의 트레일을 겹치면 겹친 트레일이 다시 먹이로 향하는 흐름을 끌어당겨 굵은 간선이 됩니다. 시작은 화면 중앙의 작은 원반 안에 몰아 태워 성장을 모든 먹이 방향으로 동시에 뻗게 합니다.

04포인터 먹이·기피물 — 클릭한 자리로 네트워크가 자라거나 피하기

포인터 먹이·기피물 — 클릭한 자리로 네트워크가 자라거나 피하기
새 창에서 열기

04 · 포인터 먹이·기피물 — 클릭한 자리로 네트워크가 자라거나 피하기 — 측정 누적면적 41.776% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

pointermoveImageDatarequestAnimationFrame

클릭한 좌표를 새 먹이로 심으면 네트워크가 그쪽으로 가지를 뻗고 모드를 바꿔 소금(기피물질)로 두면 트레일이 그 자리를 피해 휘어 자라니, 끌어당김과 밀어냄이 값 하나의 차이라는 걸 손으로 확인하는 판입니다.

닻의 부호와 수명으로 끌기와 밀기

  function anchorField(x, y) {
    var v = 0;
    for (var i = 0; i < anchors.length; i++) {
      var a = anchors[i];
      var age = curT - a.born;
      if (age < 0 || age > ANCHOR_LIFE) continue;
      var life = 1 - age / ANCHOR_LIFE;
      var dx = x - a.x, dy = y - a.y;
      var d2 = dx * dx + dy * dy;
      v += a.sign * life * Math.exp(-d2 / 30);
    }
    return v;
  }

클릭할 때마다 좌표·시각·부호를 가진 닻이 쌓이고, 센서는 trail[i] + anchorField(x, y) * ANCHOR_W * CAP를 읽습니다. 부호 a.sign이 +1이면 먹이, -1이면 소금이라 같은 가우시안 감쇠(Math.exp(-d2 / 30))가 끌림과 밀림을 모두 담당하며, ANCHOR_LIFE가 지나면 닻이 사라져 화면이 원래 성장으로 되돌아갑니다.

05다종 영역 경쟁 — 서로 다른 색 두 군집이 화면을 나눠 갖기

다종 영역 경쟁 — 서로 다른 색 두 군집이 화면을 나눠 갖기
새 창에서 열기

05 · 다종 영역 경쟁 — 서로 다른 색 두 군집이 화면을 나눠 갖기 — 측정 누적면적 53.258% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDatarequestAnimationFrame

종마다 자기 트레일에만 반응하고 남의 트레일은 장애물로 취급하게 하면 두 색 군집이 서로 밀어내며 경계선 뚜렷한 영역으로 화면을 나누는데, 누적면적 53.258%·강도 평균 57.0으로 아홉 판 중 가장 진하게 타오르는 대결판입니다.

남의 트레일을 빼서 읽는 종별 센서

  function stepSpecies(ax, ay, ah, count, own, other) {
    for (var i = 0; i < count; i++) {
      var x = ax[i], y = ay[i], h = ah[i];
      var sf = senseFrom(own, other, x + Math.cos(h) * SENSOR_DIST, y + Math.sin(h) * SENSOR_DIST);
      var sl = senseFrom(own, other, x + Math.cos(h + SENSOR_ANGLE) * SENSOR_DIST, y + Math.sin(h + SENSOR_ANGLE) * SENSOR_DIST);
      var sr = senseFrom(own, other, x + Math.cos(h - SENSOR_ANGLE) * SENSOR_DIST, y + Math.sin(h - SENSOR_ANGLE) * SENSOR_DIST);
      if (sf >= sl && sf >= sr) {
        // 직진
      } else if (sl > sr) {
        h += TURN;
      } else if (sr > sl) {
        h -= TURN;
      } else {
        h += (rand() < 0.5 ? 1 : -1) * TURN;
      }
      h += (rand() - 0.5) * 0.14;
      var nx = x + Math.cos(h) * STEP, ny = y + Math.sin(h) * STEP;
      nx = ((nx % fw) + fw) % fw; ny = ((ny % fh) + fh) % fh;
      ax[i] = nx; ay[i] = ny; ah[i] = h;
      var ii = idx(Math.round(nx), Math.round(ny));
      own[ii] = Math.min(CAP, own[ii] + DEPOSIT);
    }
  }

stepSpecies는 트레일 필드를 자기 것 own과 상대 것 other 두 개를 받아 같은 회전 규칙을 돌리는데, 이곳의 senseFrom(own, other, x, y)는 own[i] - other[i] * REPEL_W를 돌려주어 상대가 짙게 깔린 쪽은 값이 깎여 우회로 선택됩니다. 퇴적도 own에만 하므로 두 필드는 서로를 밀어내며 성장하고 경계가 저절로 또렷해집니다.

06트레일 나이 채색 — 최근 지나간 길일수록 밝게 빛나는 네온 잔상

트레일 나이 채색 — 최근 지나간 길일수록 밝게 빛나는 네온 잔상
새 창에서 열기

06 · 트레일 나이 채색 — 최근 지나간 길일수록 밝게 빛나는 네온 잔상 — 측정 누적면적 35.206% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDataputImageDatarequestAnimationFrame

각 셀에 마지막으로 밟힌 시각을 기록해 오래될수록 색을 어둡게 죽이면 활발히 쓰이는 간선만 네온처럼 밝게 남고 버려진 지선은 자연히 사라지는데, 강도 평균 76.0은 아홉 판 중 최고로 밝은 길과 어두운 길의 대비가 가장 큰 판이라는 뜻입니다.

방문 시각의 나이를 색으로 바꾸는 보간

        var i = y * fw + x;
        var j = i * 4;
        var lv = lastVisit[i];
        var k = 0;
        if (lv >= 0) {
          var age = stepCount - lv;
          if (age < DECAY_STEPS) k = 1 - age / DECAY_STEPS;
        }
        k = k * k * (3 - 2 * k);   // 나이 페이드를 부드럽게
        var rr = C_INK[0] + (C_OLD[0] - C_INK[0]) * Math.min(1, k * 2.4) + (C_FRESH[0] - C_OLD[0]) * Math.max(0, k - 0.35) * 1.54;
        var gg = C_INK[1] + (C_OLD[1] - C_INK[1]) * Math.min(1, k * 2.4) + (C_FRESH[1] - C_OLD[1]) * Math.max(0, k - 0.35) * 1.54;
        var bb = C_INK[2] + (C_OLD[2] - C_INK[2]) * Math.min(1, k * 2.4) + (C_FRESH[2] - C_OLD[2]) * Math.max(0, k - 0.35) * 1.54;

렌더는 별도의 트레일 강도 필드를 두지 않고 마지막 방문 걸음 lastVisit[i]와 현재 걸음 수의 차로 신선도 k를 계산해 smoothstep으로 부드럽게 만든 뒤, 잉크→오래된 색→새 색의 두 단 보간으로 픽셀을 찍습니다. 감지도 같은 나이 필드를 그대로 읽어 최근 밟힌 셀을 진한 트레일로 취급하므로, 증발을 나이 하나로 표현해도 규칙은 그대로 유지됩니다.

07센서 각도 모프 — 각도 하나로 산호에서 혈관까지 형태가 바뀌기

센서 각도 모프 — 각도 하나로 산호에서 혈관까지 형태가 바뀌기
새 창에서 열기

07 · 센서 각도 모프 — 각도 하나로 산호에서 혈관까지 형태가 바뀌기 — 측정 누적면적 49.385% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDatarequestAnimationFrame

센서 벌림각과 거리 두 숫자만 슬라이더로 바꾸면 같은 규칙이 촘촘한 산호 모양·성긴 혈관 모양·격자형 도시 모양까지 완전히 다른 네트워크를 그려내니, 규칙이 아니라 규칙의 인자가 형태를 정한다는 걸 보여주는 실험판입니다.

슬라이더 두 개가 곧장 규칙의 인자

  angRng.addEventListener('input', function () {
    humanTouch = true;
    sensorAngleDeg = parseInt(angRng.value, 10);
    setLabels();
  });
  distRng.addEventListener('input', function () {
    humanTouch = true;
    sensorDist = parseInt(distRng.value, 10);
    setLabels();
  });

벌림각 슬라이더는 10~90도, 거리 슬라이더는 4~30을 담당하며 값이 바뀌면 다음 걸음부터 각도·거리 계산에 즉시 반영되고, 데모 자동 진행 중이던 판도 손이 닿는 순간 humanTouch가 켜져 사용자 조작을 우선합니다. 각도를 좁히면 좌우 감각이 비슷해져 촘촘한 덤불이, 넓히면 한 걸음 차이가 커져 성긴 혈관이 나옵니다.

08유기체 텍스처 패널 — 고정 프레임을 캡처해 카드 배경으로 깔기

유기체 텍스처 패널 — 고정 프레임을 캡처해 카드 배경으로 깔기
새 창에서 열기

08 · 유기체 텍스처 패널 — 고정 프레임을 캡처해 카드 배경으로 깔기 — 측정 누적면적 34.819% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

ImageDatarequestAnimationFrame

네트워크가 다 자란 순간의 캔버스를 정지 이미지로 굳혀 옅은 투명도로 깔면 움직이지 않아도 손으로 그린 듯한 유기적 질감이 카드·섹션 배경이 되니, 질감이 필요한 자리에 애니메이션의 계산을 재활용하는 활용판입니다.

필드를 통째로 굳히고 비워 다시 기르기

  function capture() {
    // 지금 필드를 통째로 굳혀 새 질감으로 삼고, 필드는 비워 다음 성장을 시작한다.
    var tmp = snapOld;
    snapOld = snapNew;
    snapNew = tmp;
    if (!snapNew) snapNew = new Float32Array(fw * fh);
    snapNew.set(trail);
    captureCount++;
    if (nOut) nOut.textContent = String(captureCount);
    for (var i = 0; i < trail.length; i++) trail[i] = 0;
    stepCount = 0;
    initAgents();
  }

캡처 시 현재 트레일 필드를 snapNew에 통째로 복사해 정지 질감으로 보관하고 실제 필드는 0으로 비워 에이전트를 처음부터 다시 태우며, 화면은 두 스냅샷을 크로스페이드하며 카드 배경용 질감을 갱신하니 한 번 자란 형태가 배경으로 남고 다음 성장이 그 위에서 다시 시작됩니다. 움직임 없는 정적 페이지에도 점균 질감을 얹을 수 있는 이유입니다.

09매크로 발광 씬 — 어두운 배경 위 다큐멘터리 조명의 점균 장면

매크로 발광 씬 — 어두운 배경 위 다큐멘터리 조명의 점균 장면
새 창에서 열기

09 · 매크로 발광 씬 — 어두운 배경 위 다큐멘터리 조명의 점균 장면 — 측정 누적면적 49.253% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

createRadialGradientImageDatarequestAnimationFrame

검은 배경에 중앙 조명을 깔고 네트워크를 크게 키우면 다큐멘터리 접사 촬영 같은 한 장면이 되어 트레일 끝의 여린 촉수가 계속 꿈틀대며 화면이 살아 있고, 누적면적 49.253%·최대 면적 28.611%로 어두운 가장자리까지 골고루 뻗는 대형 판입니다.

조명 버퍼는 한 번만 만들어 픽셀로 굳힌다

  function buildLightBase() {
    var off = document.createElement('canvas');
    off.width = fw; off.height = fh;
    var octx = off.getContext('2d');
    var cx = fw / 2, cy = fh / 2, r = Math.min(fw, fh) * LIGHT_RADIUS;
    var g = octx.createRadialGradient(cx, cy, 0, cx, cy, r);
    g.addColorStop(0, 'rgb(' + C_LIGHT[0] + ',' + C_LIGHT[1] + ',' + C_LIGHT[2] + ')');
    g.addColorStop(0.55, 'rgb(' + Math.round((C_LIGHT[0] + C_DARK[0]) / 2) + ',' + Math.round((C_LIGHT[1] + C_DARK[1]) / 2) + ',' + Math.round((C_LIGHT[2] + C_DARK[2]) / 2) + ')');
    g.addColorStop(1, 'rgb(' + C_DARK[0] + ',' + C_DARK[1] + ',' + C_DARK[2] + ')');
    octx.fillStyle = g;
    octx.fillRect(0, 0, fw, fh);
    var d = octx.getImageData(0, 0, fw, fh).data;
    lightBase = new Float32Array(fw * fh * 3);
    for (var i = 0, p = 0; i < d.length; i += 4, p += 3) {
      lightBase[p] = d[i]; lightBase[p + 1] = d[i + 1]; lightBase[p + 2] = d[i + 2];
    }
  }

중앙 조명은 방사형 그라디언트를 오프스크린 캔버스에 한 번 그려 getImageData로 픽셀 배열로 굳히고, 이후 매 프레임 렌더는 이 조명 색을 바탕으로 트레일 밝기만큼 발광색을 섞어 찍으므로 그라디언트를 다시 만들지 않습니다. 시뮬레이션 규칙은 01과 같고 무대 조명만 얹었는데, 트레일이 조명 밖에서 어둡게 죽는 효과만으로 접사 한 장면의 인상이 만들어집니다.

철도망 인포그래픽과 인터랙티브 히어로 — 이 아홉 개를 어디에 쓰나

교통·물류 데이터를 시각적으로 설명하고 싶다면 03 다중 먹이 네트워크가 가장 가깝습니다. 점균이 스스로 최적 연결선을 찾아가는 과정이 철도망 최적화 알고리즘을 몰라도 눈으로 납득되는 그림이 되어 줍니다. 방문자가 직접 클릭해 보길 바라는 인터랙티브 히어로 영역에는 04 포인터 먹이·기피물을 앉히면, 클릭한 자리로 네트워크가 자라거나 피하는 반응이 그대로 조작감이 됩니다.

다큐멘터리풍 인트로나 과학 콘텐츠의 표지 화면이라면 09 매크로 발광 씬이 맞습니다. 어두운 배경 위 조명 아래 한 마리 점균이 자라는 장면이 이미 완성돼 있어 타이틀만 얹으면 됩니다. 세 판 모두 파일 하나로 끝나 있어 별도 라이브러리 없이 정적 섹션에 바로 붙습니다.

점균은 왜 최단경로로 수렴하나? — 트레일 강화와 증발의 셈

확산과 증발은 격자 한 줄 계산

  function diffuseEvap() {
    for (var y = 0; y < fh; y++) {
      var ym = y === 0 ? fh - 1 : y - 1, yp = y === fh - 1 ? 0 : y + 1;
      var rowY = y * fw, rowYm = ym * fw, rowYp = yp * fw;
      for (var x = 0; x < fw; x++) {
        var xm = x === 0 ? fw - 1 : x - 1, xp = x === fw - 1 ? 0 : x + 1;
        var i = rowY + x;
        var avg = (trail[rowY + xm] + trail[rowY + xp] + trail[rowYm + x] + trail[rowYp + x]) * 0.25;
        trailB[i] = (trail[i] * (1 - DIFFUSE) + avg * DIFFUSE) * (1 - DECAY);
    }
    var t = trail; trail = trailB; trailB = t;
  }

좌우상하 네 이웃의 평균과 자기 값을 DIFFUSE 비율로 섞은 뒤 (1 - DECAY)를 곱해 조금씩 증발시키고, 두 버퍼를 맞바꿉니다. 편미분 방정식을 세우지 않고 격자 위에서 네 이웃 평균으로 확산을 흉내 내는 것이 전부라 수식 없이도 두 배경 지식으로 설명이 끝납니다.

증발 속도가 점균류 네트워크의 굵기를 가른다

퇴적은 매 걸음 DEPOSIT만큼 더하고 증발은 매 걸음 DECAY만큼 곱합니다. 어떤 길이 살아남는지는 이 둘의 균형으로 정해지는데, 자주 밟히는 길은 퇴적이 증발을 앞질러 최댓값 CAP까지 굵어지고 드물게 지나는 길은 증발만 남아 희미해집니다. 혈관·지선 구분은 중앙 계획이 아니라 이 균형의 결과입니다.

최단경로만 남는 이유는 보강의 속도 차

긴 우회 경로와 짧은 경로가 같은 목적지를 잇고 있다고 합시다. 같은 수의 에이전트가 두 길을 쓴다면 짧은 쪽은 한 바퀴 도는 시간이 짧아 단위 시간당 퇴적이 더 쌓입니다. 퇴적이 짙은 길은 센서가 더 강하게 끌어당겨 에이전트를 더 모으고, 모일수록 퇴적은 더 짙어지는 양의 되먹임이 걸립니다. 반대로 긴 길은 보강이 늦어 증발과의 균형을 잃고 서서히 말라, 두 지점 사이에 굵은 통로 하나만 남습니다.

개미의 페로몬과 같은 셈, 다른 출발

이 구조는 개미가 페로몬을 남겨 먹이 길을 정하는 스티그머지와 정확히 같은 계산입니다. 차이는 개미가 먹이에서 둥지로 돌아오며 페로몬을 놓는 반면 점균은 먹이를 찾아 뻗으며 트레일을 놓는다는 점과, 점균의 몸 자체가 트레일이라는 점입니다. 이를 점균류 알고리즘으로 옮긴 연구는 최적화 기법의 하나로 자리 잡아 노선망 설계 같은 문제에 응용되었습니다. 군집의 방향을 정하는 스티어링 규칙이 궁금하시면 규칙 세 개로 무리를 이루는 보이드 시뮬레이션을, 격자 위에서 두 물질이 서로를 바꾸는 무늬는 확산 속도 차로 줄무늬를 만드는 튜링 반응 판을 이어 보시길 권합니다.

센서 벌림각과 트레일 감쇠율을 바꾸는 세 변형과 접근성

값 하나를 바꾼 세 변형

첫째, 07의 센서 벌림각을 22.5도에서 45도로 넓히면 네트워크가 더 성기고 넓게 퍼집니다. 둘째, 01의 트레일 감쇠율을 0.02에서 0.06으로 올리면 오래된 가지가 빨리 사라지고 최적 경로만 굵게 남아 길찾기 인상이 강해집니다. 셋째, 03의 에이전트를 4천 개에서 1만 2천 개로 늘리면 네트워크가 더 촘촘하고 빠르게 수렴합니다. 세 변형 모두 규칙은 건드리지 않고 숫자 하나만 바꾼다는 점이 이 시뮬레이션의 성격을 잘 보여줍니다.

움직임을 줄인 사용자에게 남기는 것

아홉 판 모두 matchMedia('(prefers-reduced-motion: reduce)')로 이 설정을 감지해, 켜져 있으면 프레임을 계속 흘리는 대신 시뮬레이션을 미리 여러 스텝 돌려 자란 순간 하나를 정지 프레임으로 그리고 멈춥니다. 08만은 이 정지 과정에 자기 캡처 기능까지 얹어 스냅샷을 질감으로 남기지만, 나머지 여덟 판도 각자 같은 방식으로 움직임을 끕니다. 움직임은 없어도 점균의 형태와 질감은 그대로 전달됩니다.

포인터로 만지는 한 판과 나머지 여덟 판

04만 포인터 입력을 받고 나머지 여덟 판은 손을 대지 않아도 완결됩니다. 터치 기기에서는 손가락으로 누른 자리가 그대로 닻으로 심기므로 실수 터치가 곧 장면 변화라는 점만 알아두시면 됩니다. 자동 진행 판들은 시드가 고정되어 있어 결과를 다시 재현할 수 있습니다.

증발을 끄면 최단경로 대신 만화경이 되는 함정

증발을 끄면 최단경로가 아니라 만화경이 된다

DECAY를 0에 가깝게 내리면 모든 트레일이 남아 화면이 만화경처럼 고르게 채워집니다. 길을 가리는 정보는 살아 있는 트레일이 아니라 죽어 가는 트레일과의 대비라, 증발이 없으면 선택이 없습니다. 반대로 너무 올리면 굵은 간선마저 말라 판이 텅 비니 01의 기본값 근처에서 조금씩만 움직여 보시길 권합니다.

에이전트 수를 올리면 렌더보다 샘플링이 먼저 무거워진다

개체를 몇 배로 늘릴 때 프레임이 끊기는 원인은 대개 그리기가 아니라 개체마다 세 지점씩 일어나는 필드 읽기입니다. 렌더는 화면 크기에만 비례하지만 샘플링은 개체 수에 비례하므로, 촘촘함을 원하면 개체를 늘리기 전에 STEP을 키워 같은 밀도를 더 적은 개체로 얻는 편이 셈이 셉니다.

퇴적을 포화값 근처로 올리면 첫 걸음에 판이 꽉 찬다

DEPOSIT을 CAP에 가깝게 잡으면 개체 몇 걸음 만에 필드가 포화되어 어디가 짙은지 구분이 사라집니다. 센서는 농도 차를 읽는 장치이므로 모든 칸이 최대치면 좌우가 항상 같아 회전이 동전 던지기가 됩니다. 퇴적은 최대치의 몇 분의 일 수준으로 시작해 눈으로 확인하며 올리는 것이 안전합니다.

이 아홉 판의 전체 소스와 각 항목의 html·css 는 zip 으로 묶여 있고 비번은 hv25u6ur 입니다. 풀면 각 판의 index.html 이 그대로 들어 있어 위 코드와 줄 단위로 대조해 보실 수 있습니다.

점균 네트워크를 페이지에 붙이기 전 자주 나오는 질문

점균류 지능은 정말로 생각하는 건가요?

뇌가 없는 생물이 길을 찾는다고 해서 의식이 있다는 뜻은 아닙니다. 관찰되는 것은 트레일 강화와 증발의 물리적 균형이 만드는 최적화이고, 이 글의 데모도 그 균형만으로 같은 행동을 재현합니다. 학습이나 기억처럼 보이는 현상도 트레일 필드에 새겨진 농도 기록으로 설명되는 경우가 대부분입니다.

이그노벨상 미로 실험은 무엇을 증명했나요?

2008년 인지과학 이그노벨상은 미로 양 끝에 먹이를 둔 점균이 두 지점을 잇는 최단경로만 남기는 것을 보인 연구에 주어졌습니다. 단순한 성장 규칙이 경로 최적화를 해낸다는 점이 학계의 주목을 받았고, 이후 노선망 설계 연구로 이어졌습니다. 이 글의 02 판이 그 실험의 구조를 그대로 옮긴 것입니다.

코드를 몰라도 이 데모를 제 페이지에 붙일 수 있나요?

가능합니다. zip 을 열어 항목 폴더의 index.html 을 그대로 올리고 원하는 자리에 넣으면 되고, 크기와 색은 파일 안의 토큰 값을 몇 개만 바꿔 조정합니다. 각 판은 서로를 참조하지 않는 단일 파일이라 하나만 골라 쓰셔도 나머지와 무관하게 동작합니다.

더 읽을거리

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.