<aside> <img src="/icons/burst_yellow.svg" alt="/icons/burst_yellow.svg" width="40px" />

Live Link on Vercel

</aside>

Project Overview

Abtracting image creations into particle systems that feel connected.

Goal

Image generations come in different stylizations that can only be tuned with high-precision prompt writing. What if we vectorized images that generate and map it to our own particle system?

Idea

  1. Gemini API is called to generate images, prompting it to only use black and white vectors to draw images
  2. Extract edge detection and map those points onto a plane
  3. Redraw those lines with a particle system
  4. Animate transitions between generations to feel seamless, and connected experiences

Process

  1. Designed the UI of the page using Figma → Figma dev → Cursor
  2. Got inspired by a cool effect on Spline (3D tool) and tried to integrate it → it failed
  3. Tried to recreate in Cursor, turns out it understands with a lot of inspiration
  4. Prompted the animating experience of particles forming together, and the interaction
  5. Passed in Gemini API to test edge detection workflow
  6. Came out bad, had to fine-tune the prompt to use black and white only, and strict vector-only images
  7. Result below

Version 1

Bow

Bow