🌊 Displacement Brush

A WebGL/Three.js experiment where a brush distorts an image with rippling, interactive trails.

---

🖼 Preview

---

⚙️ Getting Started

These instructions will get your project running locally.

# 1. Clone the repo
git clone https://github.com/suzubu/displacement-brush.git

# 2. Navigate into the project folder
cd displacement-brush-v1

# 3. Install dependencies
npm install

# 4. Run the app
npm run dev

Built with:

• Three.js
• WebGL
• Vite

---

✨ Features

• 🖌️ Brush interaction distorts background image
• 🌊 Rippling trail effects follow cursor movement
• ⚡ Real-time displacement mapping
• 🎨 Smooth, interactive visuals for creative coding experiments

---

💡 Dev Notes

• Uses custom fragment + vertex shaders for displacement
• Designed for modular experimentation with WebGL
• Vite handles fast local development and bundling
• Includes references to GPU-based rendering strategies

---

📚 Inspiration / Credits

This project was inspired by:

• Henri Heymans' interactive distortion experiments
• Shadertoy & WebGL art demos
• Creative coding community projects

---

🧪 Known Issues

• ❌ Trails may not render consistently across all browsers
• 🔍 Performance depends heavily on GPU capabilities

---

🔭 Roadmap / TODO

• Add configurable brush textures
• Improve performance on mobile devices
• Add support for multiple images
• Experiment with displacement intensity sliders

---

📂 Folder Structure

displacement-brush-v1/
    index.html
    public/
    .gitignore
    package-lock.json
    package.json
    .git/
    src/

---

📜 License

MIT — feel free to use and adapt!

---

🙋‍♀️ Author

Made with ☕ + 🎧 by suzubu