A generative art paintbrush that creates organic, flowing brush strokes with physics-based vertex animation.

NeoBrush is a creative coding tool that generates painterly effects by simulating chains of vertices that follow your cursor with physics-based easing. Colors are sampled from source images, creating unique compositions with every stroke.

Tech Stack: Vue 3, TypeScript, Vite, Vuetify 3, Pinia, Canvas 2D API

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

1. Draw: Click and drag on the canvas to create brush strokes
2. Adjust Parameters: Use the right panel to tweak brush behavior:
   • Number of lines per stroke
   • Line weight and opacity
   • Easing (responsiveness)
   • Speed (damping)
   • Vertex count (smoothness)
3. Change Colors: Select different source images in the left panel to change the color palette
4. Presets: Use built-in presets (Smooth, Chaotic, Fine Lines) or adjust parameters manually

src/
├── components/       # Vue components (panels, canvas, menus)
├── composables/      # Vue composables (useNeoBrush)
├── engine/           # Framework-agnostic rendering engine
│   ├── brushes/      # NeoBrush, SketchLine physics
│   └── core/         # CanvasManager, Vector2D
├── stores/           # Pinia stores (brush, canvas, layers, history)
├── plugins/          # Vuetify configuration
└── types/            # TypeScript interfaces

The original Processing and p5.js implementations are preserved in archive/ for reference:

• archive/processing/ - Processing 3 (Java) desktop version
• archive/p5js/ - p5.js web version with Angular UI

Chris Riebschlager

MIT