Interactive Image Particles With JavaScript And Canvas – imageParticles.js

Preview:

Description:

imageParticles.js is a fancy JavaScript plugin for generating an interactive, canvas based particles system from an image you provide.

How to use it:

Download and import the JavaScript file imageParticles.js into the html file.

<script src="/path/to/imageparticles.js"></script>

Create an HTML5 canvas element on which you want to draw the particles.

<canvas id="canvas"></canvas>

Initialize the imageParticles.js and insert your image data in base64 format:

ImageParticles.initialize('canvas', 'data:image/png;base64');

More parameters to customize the image particles.

• canvas_id: canvas ID
• imageData: image data
• densityPara: density of particles
• produceDistancePara: distance between particles
• baseRadiusPara: base radius in pixels
• maxLineThicknessPara: max line thickness
• reactionSensitivityPara: reaction sensitivity
• lineThicknessPara: line thickness

ImageParticles.initialize(canvas_id, imageData,densityPara=14,produceDistancePara=28,baseRadiusPara=2,maxLineThicknessPara=1,reactionSensitivityPara=2,lineThicknessPara=1)