react-particle-image

Render images as interactive particles

Install

npm install --save react-particle-image

Links

• Demo (source)
• Docs

Simple Usage

codesandbox

import*asReactfrom"react";importParticleImage,{ParticleOptions}from"react-particle-image";constparticleOptions: ParticleOptions={filter: ({ x, y, image })=>{// Get pixelconstpixel=image.get(x,y);// Make a particle for this pixel if blue > 50 (range 0-255)returnpixel.b>50;},color: ({ x, y, image })=>"#61dafb"};exportdefaultfunctionApp(){return(<ParticleImagesrc={"/react-logo.png"}scale={0.75}entropy={20}maxParticles={4200}particleOptions={particleOptions}/>);}

Complex Usage

codesandbox

import*asReactfrom"react";importuseWindowSizefrom"@rooks/use-window-size";importParticleImage,{ParticleOptions,Vector,forces,ParticleForce}from"react-particle-image";import"./styles.css";constparticleOptions: ParticleOptions={filter: ({ x, y, image })=>{// Get pixelconstpixel=image.get(x,y);// Make a particle for this pixel if blue > 50 (range 0-255)returnpixel.b>50;},color: ({ x, y, image })=>"#61dafb",radius: ()=>Math.random()*1.5+0.5,mass: ()=>40,friction: ()=>0.15,initialPosition: ({ canvasDimensions })=>{returnnewVector(canvasDimensions.width/2,canvasDimensions.height/2);}};constmotionForce=(x: number,y: number): ParticleForce=>{returnforces.disturbance(x,y,5);};exportdefaultfunctionApp(){const{ innerWidth, innerHeight }=useWindowSize();return(<ParticleImagesrc={"/react-logo.png"}width={Number(innerWidth)}height={Number(innerHeight)}scale={0.75}entropy={20}maxParticles={4000}particleOptions={particleOptions}mouseMoveForce={motionForce}touchMoveForce={motionForce}backgroundColor="#191D1F"/>);}

Performance Tips

ParticleImage has a target frame rate of 30fps, but with thousands of particles updating positions and repainting 30 times per second, performance can be a problem.

If animations are choppy try:

• Reducing the number of distinct particle colors (particles of the same color will be batched while painting)
• Reducing the number of particles (less than 6000 is ideal)
• Reducing the resolution of the src image.

Here's a codesandbox of a good boy to show what I mean. Note the round function to reduce the number of colors painted on the canvas.

MIT © malerba118