DEV Community

Devang Pradhan
Devang Pradhan

Posted on

Vector Field Engine

🎨 Vector Field Engine β€” Real-Time Generative Art in the Browser

I built a small but powerful generative art tool called:

πŸ‘‰ https://vfengine.vercel.app/
πŸ‘‰ https://github.com/devangpradhan/VFE

It’s a vector field engine that lets you create, animate, and export procedural line art directly in the browser.


βš™οΈ How It Works

At its core, the engine loops over a grid and assigns a direction (angle) to every point using math like noise or trigonometric functions.

Each point draws a line β†’ together they form flowing patterns.


πŸš€ Features

  • πŸŽ› Real-time controls (density, flow, rotation, colors)
  • πŸ”€ Modes: Static, Dynamic, Animated
  • 🎲 Random presets for quick exploration
  • πŸ“€ Export as PNG, JPG, or SVG (for design tools & plotters)

πŸ›  Tech Stack

  • SvelteKit
  • p5.js (instance mode)
  • p5.js-svg
  • Tweakpane
  • Vercel

πŸ’‘ Why I Built This

I wanted a fast, interactive playground for generative art that:

  • runs in the browser
  • feels smooth and responsive
  • supports professional exports (SVG)

πŸ”— Try It

πŸ‘‰ https://vfengine.vercel.app/


If you're into creative coding or generative design, give it a try πŸš€

Top comments (0)