JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Breathing Halftone

    Images go whoa with lots of floaty dots
    Filed under  › 

    • 🔾13%Overall
    • 222
    • 26.3 days
    • 🕩25
    • 👥1

    Breathing Halftone

    Images go whoa with lots of floaty dots

    Made for Yaron

    Install

    breathing-halftone.pkgd.js

    breathing-halftone.pkgd.min.js

    Usage

    // get the image
    // jquery
    var img = $('#hero img')[0];
    // or vanilla JS
    var img = document.querySelector('#hero img');
    
    // init halftone
    new BreathingHalftone( img, {
      // options...
    });
    

    Browsers that do not support <canvas> will fall back to the original image.

    Set data-src to use a different source image, so you can display stylized halftone-y image as a fallback.

    <img src="portrait-dots.png" data-src="portrait.jpg" />
    

    Options

    There are a bunch of options so you can fine-tune to your heart's content.

    // default options
    {
      // ----- dot size ----- //
    
      dotSize: 1/40,
      // size of dots
      // as a fraction of the diagonal of the image
      // smaller dots = more dots = poorer performance
    
      dotSizeThreshold: 0.05,
      // hides dots that are smaller than a percentage
    
      initVelocity: 0.02,
      // speed at which dots initially grow
    
      oscPeriod: 3,
      // duration in seconds of a cycle of dot size oscilliation or 'breathing'
    
      oscAmplitude: 0.2
      // percentage of change of oscillation
    
      // ----- color & layout ----- //
    
      isAdditive: false,
      // additive is black with RGB dots,
      // subtractive is white with CMK dots
    
      isRadial: false,
      // enables radial grid layout
    
      channels: [ 'red', 'green', 'blue' ],
      // layers of dots
      // 'lum' is another supported channel, for luminosity
    
      isChannelLens: true,
      // disables changing size of dots when displaced
    
      // ----- behavior ----- //
    
      friction: 0.06,
      // lower makes dots easier to move, higher makes it harder
    
      hoverDiameter: 0.3,
      // size of hover effect
      // as a fraction of the diagonal of the image
    
      hoverForce: -0.02,
      // amount of force of hover effect
      // negative values pull dots in, positive push out
    
      activeDiameter: 0.6,
      // size of click/tap effect
      // as a fraction of the diagonal of the image
    
      activeForce: 0.01
      // amount of force of hover effect
      // negative values pull dots in, positive push out
    }
    

    Gotchas

    As the halftone is low resolution, you don't need a high resolution source image.

    Images must be hosted on the same domain as the site. Cross-domain images cannot be used for security according to the <canvas> spec.

    Smaller dots = lots more dots = poorer browser performance.

    As Firefox and IE do not support darker compositing, so these browsers will fallback to simple black and white design, using channels: [ 'lum' ].

    MIT License

    Breathing Halftone is released under the MIT License. Have at it.

    Show All