Vector Field Engine

Source: Dev.to

Overview

I built a small but powerful generative art tool called Vector Field Engine. It lets you create, animate, and export procedural line art directly in the browser.

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

The engine works by looping over a grid and assigning a direction (angle) to every point using mathematical functions such as noise or trigonometric formulas. Each point draws a short line, and together they form flowing patterns.

Features

• Real‑time controls – adjust density, flow, rotation, colors, etc.
• Modes – Static, Dynamic, Animated.
• Random presets – quickly explore different visual styles.
• Export options – download artwork as PNG, JPG, or SVG (suitable for design tools and plotters).

Technology Stack

• SvelteKit – framework for building the web app.
• p5.js (instance mode) – core drawing library.
• p5.js‑svg – enables SVG export.
• Tweakpane – UI for real‑time parameter tweaking.
• Vercel – hosting and deployment platform.

Getting Started

If you’re into creative coding or generative design, give the tool a try and experiment with the built‑in controls and presets. 🚀