16-algorithm-engines — 알고리즘 엔진 + 캔버스 시각화

물리 시뮬레이션 엔진과 Canvas/WebGL 기반 인터랙티브 시각화 컴포넌트 라이브러리.

모듈 구조

16-algorithm-engines/
├── physics/              → 물리 시뮬레이션 엔진 (순수 TypeScript)
│   ├── boids.ts          → Boids 군집 알고리즘 (분리·정렬·결합)
│   └── n-body.ts         → N-Body 은하계 시뮬레이션 (중력·궤도·줌/팬)
├── canvas/               → React 캔버스 시각화 컴포넌트
│   ├── BoidsCanvas.tsx   → Boids 군집 시각화 (포식자 회피 포함)
│   ├── BoidsBackground.tsx → 전체 화면 Boids 배경 효과
│   ├── GalaxyCanvas.tsx  → N-Body 은하계 인터랙티브 시각화
│   ├── MandelbrotCanvas.tsx → 만델브로 집합 WebGL 프랙탈
│   ├── FluidCanvas.tsx   → 나비에-스토크스 유체 역학 (WebGL 2)
│   └── JuliaPreview.tsx  → 줄리아 집합 프리뷰 (아이콘/썸네일)
└── README.md

파일 인덱스

물리 엔진 (physics/)

캔버스 컴포넌트 (canvas/)

사용 예시

1. Boids 군집 엔진 (순수 TypeScript)

import { BoidsSimulation } from './physics/boids';

const sim = new BoidsSimulation({
  count: 80,
  maxSpeed: 2.0,
  separationWeight: 1.5,
  particleColor: [14, 165, 233], // 하늘색
});

sim.init(canvasElement);
sim.start();

// 리사이즈 대응
window.addEventListener('resize', () => {
  sim.resize(window.innerWidth, window.innerHeight);
});

// 정리
sim.destroy();

2. Boids 캔버스 컴포넌트 (React)

import { BoidsCanvas } from './canvas/BoidsCanvas';

function BannerSection() {
  return (
    <div className="h-[400px] relative">
      <BoidsCanvas
        count={150}
        maxSpeed={0.3}
        enablePredator={true}
        palette={[
          [124, 58, 237],
          [14, 165, 233],
          [219, 39, 119],
        ]}
      />
    </div>
  );
}

3. Boids 배경 효과 (React)

import { BoidsBackground } from './canvas/BoidsBackground';

function Layout({ children }) {
  return (
    <>
      <BoidsBackground opacity={0.3} config={{ count: 40, maxSpeed: 1.0 }} />
      <main className="relative z-10">{children}</main>
    </>
  );
}

4. N-Body 은하계 시각화 (React)

import { GalaxyCanvas } from './canvas/GalaxyCanvas';

const items = [
  { id: '1', label: '항목 A', group: 'frontend', brightness: 0.8, size: 0.6 },
  { id: '2', label: '항목 B', group: 'backend', brightness: 0.5, size: 0.4, pulse: true },
  { id: '3', label: '항목 C', group: 'frontend', brightness: 0.9, size: 0.8 },
];

const groupColors = {
  frontend: '#7C3AED',
  backend: '#0EA5E9',
};

function DataGalaxy() {
  return (
    <div className="h-[600px]">
      <GalaxyCanvas
        data={items}
        groupColors={groupColors}
        onStarClick={(star) => console.log('클릭:', star.label)}
        renderTooltip={(star, pos) => (
          <div style={{ left: pos.x, top: pos.y }} className="absolute bg-white p-2 rounded shadow">
            <strong>{star.label}</strong>
          </div>
        )}
      />
    </div>
  );
}

5. 만델브로 프랙탈 (React)

import { MandelbrotCanvas } from './canvas/MandelbrotCanvas';

function FractalBackground() {
  return (
    <div className="h-screen">
      <MandelbrotCanvas
        targetX={-0.7435669}
        targetY={0.1314023}
        zoomSpeed={0.15}
        centerEaseSeconds={30}
      />
    </div>
  );
}

6. 유체 역학 시뮬레이션 (React)

import { FluidCanvas } from './canvas/FluidCanvas';

function FluidBackground() {
  return (
    <div className="h-[500px]">
      <FluidCanvas
        splatForce={600}
        autoInterval={2000}
        palette={[
          [0.9, 0.3, 0.5],
          [0.3, 0.5, 0.9],
          [0.5, 0.9, 0.3],
        ]}
      />
    </div>
  );
}

7. 줄리아 집합 프리뷰 (React)

import { JuliaPreview, JULIA_PRESETS } from './canvas/JuliaPreview';

function CategoryIcons() {
  return (
    <div className="flex gap-4">
      {Object.entries(JULIA_PRESETS).map(([key, preset]) => (
        <div key={key} className="text-center">
          <JuliaPreview cx={preset.cx} cy={preset.cy} color="#7C3AED" size={48} />
          <span className="text-xs">{preset.label}</span>
        </div>
      ))}
    </div>
  );
}

의존성

physics/ 디렉토리의 엔진 파일은 React 없이 순수 TypeScript만으로 사용 가능합니다.

시각화 유형별 특징

추출 이력

• 출처: galaxy-con (260301)
• 추출일: 2026-03-08
• 정제 사항:
  • n-body.ts: 도메인 특화 데이터 매핑 제거, 범용 StarInput 인터페이스 도입
  • GalaxyCanvas.tsx: 프로젝트별 import/라우팅 제거, 범용 콜백 구조
  • BoidsCanvas.tsx: 프로젝트 테마 색상 제거, 커스텀 팔레트 props 추가
  • 모든 파일: JSDoc 메타데이터 헤더, 한국어 주석, named export, single quote 컨벤션 적용