에듀테크 프로젝트 대시보드
마칭 스퀘어 (Marching Squares)
일기예보의 등압선, 등산 지도의 등고선, 게임의 물방울처럼 뭉치는 메타볼 윤곽 —
이 곡선들은 모두 격자에 흩어진 숫자(스칼라 장)에서 "특정 값과 같아지는 경계선"을 뽑아낸 것이다.
마칭 스퀘어는 격자를 한 칸씩 행진(march)하며, 각 셀의 네 꼭짓점이 임계값보다 큰지 작은지만 보고
2⁴ = 16가지 경우 중 하나로 분류해 셀 안에 지나갈 선분을 그린다.
캔버스를 클릭·드래그하면 가장 가까운 "언덕"을 그 자리로 옮길 수 있다. 임계값을 올리면 등고선이 봉우리 쪽으로 수축한다.
꼭짓점을 좌상(8)·우상(4)·우하(2)·좌하(1) 순서로 읽어 "임계값 이상이면 1"인 4비트 인덱스를 만든다. 채워진 점 = 안쪽(≥ 임계값). 선분은 안과 밖이 갈리는 변에서 교차점을 잇는다. 0번·15번은 셀이 통째로 밖/안이라 선이 없다.
케이스 5·10 (대각선 saddle): 대각선 두 꼭짓점만 안쪽이면 선분을 잇는 방법이 두 가지다. 장의 중앙값을 보고 어느 쪽을 연결할지 정하거나(비대칭), 두 조각을 모두 그린다. 이 데모는 후자를 쓴다.
1. 스칼라 장 — 격자의 각 점에 숫자가 있다(고도, 기압, 밝기…).
2. 셀 분류 — 네 꼭짓점을 임계값 t와 비교해 4비트 인덱스를 만든다.
3. 교차점 — 안·밖이 갈리는 변에서, 두 꼭짓점 값 a, b 사이를
f = (t − a) / (b − a) 비율로 선형 보간해 정확한 위치를 찾는다.
보간을 끄면 항상 변의 중점을 써서 계단처럼 각진 윤곽이 된다.
4. 선분 연결 — 케이스별 룩업 테이블대로 교차점을 잇는다.
모든 셀에 대해 독립적으로 처리하므로 O(격자 칸 수)이고 병렬화가 쉽다.
3D로 확장하면 마칭 큐브(Marching Cubes) — 의료 CT의 3D 표면 복원에 쓰인다.
// 한 셀(x,y) 처리 const tl=g[y][x], tr=g[y][x+1]; const bl=g[y+1][x], br=g[y+1][x+1]; let idx = (tl>=t?8:0) | (tr>=t?4:0) | (br>=t?2:0) | (bl>=t?1:0); // 변 위 교차점 (예: 위쪽 변) const lerp = (a,b) => (t-a)/(b-a); const top = { x: x + lerp(tl,tr), y: y }; const right = { x: x+1, y: y + lerp(tr,br) }; const bot = { x: x + lerp(bl,br), y: y+1 }; const left = { x: x, y: y + lerp(tl,bl) }; // idx → 어떤 변끼리 이을지 for (const [p,q] of TABLE[idx]) drawSegment(edge[p], edge[q]);
🗺️ 지형 등고선·기상도 등압선/등온선 · 🎮 2D 메타볼·유체·용암 표면 · 🩻 마칭 큐브로 확장해 MRI/CT 3D 재구성 · 📊 히트맵 위의 등치선(contour plot) · 🧩 픽셀 영역의 매끄러운 외곽선 추출(콜리전 폴리곤)