Skip to content
Images go whoa with lots of floaty dots
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add dist files Oct 31, 2014
js add dist files Oct 31, 2014
.gitignore ignore node modules Mar 2, 2014
.jshintrc initial commit Feb 13, 2014
README.md yaronschoen.com/info Oct 31, 2014
gulpfile.js add dist files Oct 31, 2014
package.json add uglify and package.json Oct 31, 2014
sandbox.html rename demo as sandbox Oct 31, 2014

README.md

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.

You can’t perform that action at this time.