Breathing Halftone
Images go whoa with lots of floaty dots
Made for Yaron
Install
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.
