Apply Fancy Pixel Particle Animations To Images – Pict2Pix.js

Category: Animation , Image , Javascript | August 29, 2021
Author:evaristocuesta
Views Total:50 views
Official Page:Go to website
Last Update:August 29, 2021
License:MIT

Preview:

Apply Fancy Pixel Particle Animations To Images – Pict2Pix.js

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

You Might Be Interested In:


Leave a Reply