벡터 필드 엔진

Source: Dev.to

Overview

저는 Vector Field Engine이라는 작지만 강력한 생성 예술 도구를 만들었습니다. 이 도구를 사용하면 브라우저에서 직접 절차적인 라인 아트를 만들고, 애니메이션을 적용하며, 내보낼 수 있습니다.

• Live demo: https://vfengine.vercel.app/
• Source code: https://github.com/devangpradhan/VFE

엔진은 격자를 순회하면서 노이즈나 삼각함수와 같은 수학 함수를 이용해 각 점에 방향(각도)을 할당하는 방식으로 작동합니다. 각 점은 짧은 선을 그리고, 이 선들이 모여 흐르는 패턴을 형성합니다.

Features

• 실시간 제어 – 밀도, 흐름, 회전, 색상 등을 조절합니다.
• 모드 – 정적, 동적, 애니메이션.
• 무작위 프리셋 – 다양한 시각 스타일을 빠르게 탐색합니다.
• 내보내기 옵션 – PNG, JPG, SVG 형식으로 작품을 다운로드할 수 있어 디자인 툴이나 플로터와도 호환됩니다.

Technology Stack

• SvelteKit – 웹 앱을 구축하기 위한 프레임워크.
• p5.js (instance mode) – 핵심 그리기 라이브러리.
• p5.js‑svg – SVG 내보내기를 지원합니다.
• Tweakpane – 실시간 파라미터 조정을 위한 UI.
• Vercel – 호스팅 및 배포 플랫폼.

Getting Started

크리에이티브 코딩이나 생성 디자인에 관심이 있다면, 도구를 직접 사용해 보고 내장된 컨트롤과 프리셋을 실험해 보세요. 🚀