Apply Fancy Pixel Particle Animations To Images – Pict2Pix.js

Preview:

Description:

Pict2Pix.js is a JavaScript library that adds fancy pixel particle animations to images using Canvas API.

How to use it:

1. Import the minified version of the Pict2Pix.js library into the document.

<script src="/dist/pict2pix.min.js"></script>

2. Initialize the library on the target image and done.

<img id="image-demo" src="demo.jpg" />

const imageDemo = document.getElementById('image-demo');
window.onload = function initialize() {
  pict2pix.animate({
    image: imageDemo
  });
}

3. Specify the particle type. Can be ‘twisted-particle’, ‘halftone’, or ‘led-matrix’.

pict2pix.animate({
  image: imageDemo,
  particleType: 'twisted-particle',
});

4. Specify the number of particles to generate. Default: 3000.

pict2pix.animate({
  image: imageDemo,
  numberOfParticles: 500,
});

5. Config the animation speed. Default: 1.

pict2pix.animate({
  image: imageDemo,
  horizontalSpeed: 1,
  verticalSpeed: 1,
});

Changelog:

v0.4.0 (08/29/2021)

• Led matrix bug fixed
• Halftone effect added
• Constant added

v0.3.1 (08/16/2021)

• Bugfix

v0.3.0 (08/04/2021)

• Add Led Matrix Effect