Interactive Image Particles With JavaScript And Canvas – imageParticles.js

Category: Animation , Javascript | August 13, 2018
Author: OssamaRafique
Views Total: 5,838 views
Official Page: Go to website
Last Update: August 13, 2018
License: MIT


Interactive Image Particles With JavaScript And Canvas – imageParticles.js


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)

You Might Be Interested In:

Leave a Reply