A "Reactive" Particle System

Live Preview

A demo for splitting images into their pixels and animate each of them as a particle with its own attributes and mouse interactions using React and React Three Fiber. Based on this article by Bruno Imbrizi.

What I learned

• How to handle large numbers of particles in r3f using instances. Basically we create one geometry and rendering it as many times as the pixels of the image, instead of having geometries for every pixel.

• Also I learned this cool technique to interact with the particles that uses a new canvas on top of the existing one, onto which we draw circles at the mouse raycasted position, basically forming ripples on the canvas at every mouse move, and then using that as a texture for the particles vertex shader to move them accordingly.

Run

• Install npm install
• Run npm start
• Build npm run build

Libraries

• Three.js - The WebGL library behind all the animations
• R3f - A really (REALLY!) helpful library, its a React renderer for three.js
• gsap - An animation library for handling the exploding effect of the particles.