Halftone Effect

Pict2Pix.js library
Halftone Effect

Setting up Halftone Effect

  • Get the image element and call to pict2pix.animate function
    const imagejh = document.getElementById('image-jh');

window.onload = function initialize() {
  pict2pix.animate({
      image: imagejh,
      dotSize: 4,
      particleType: 'halftone', 
      transitionTime: 10000,
      idleTime: 4000,
      color: 'black', 
      separation: 8
  });
}
  • Options
    • image: Required. The html element to apply the effect
    • particleType: Required. The effect to apply to the image. In this case is 'halftone'
    • dotSize: Optional. Dot size. Must be greater than 4. Default value 4.
    • transitionTime: Optional. Trasitions time in ms. Default value 8000.
    • idleTime: Optional. Idle time in ms. Default value 4000.
    • color: Optional. Dot color. Default value rgb(30, 30, 30).
    • separation: Optional. Separation among dots. Default value 10.