an image pixelating JavaScript library
Demo
The main demo uses vanilla JavaScript and presents a few images with example manipulations using the library.
There is also a demo using the jQuery plugin and Green Sock Tween in order to animate the pixelating effect, see the original blog post for more information.
Blog Post
The blog post includes a write up of the build process and thought process used for version 1. Version 2 was a full re-factor but the logic used is still the same.
Usage
The library can be installed from npm
npm install --save pixel-flowlet images = Array.from(document.querySelectorAll('img'))
let pixelFlows = images.map((img) => new PixelFlow(img, { resolution: 32 }))
// be aware, creating the pixelate images removes the images from the DOM
// then you can manipulate individual PixelFlow instances
// wait 5 seconds
setTimeout(() => {
pixelFlows.forEach((pixelFlow) => {
// animate the pixelated images back to normal over 2 seconds
pixelFlow.simpleanimate(0, 2)
})
}, 5000)jQuery plugin
The jQuery plugin can be installed from npm as well.
npm install --save pixel-flow jqueryThis library does not come with jQuery packaged, you must install separately.
import $ from 'jquery'
import 'pixel-flow/jquery'
// Converts the image to a pixelated image at 32 pixel resolution
var $pixel = $('img').first().PixelFlow({ resolution: 32 })
// Runs animation on that same image to return to base image.
// Notice I'm selecting the canvas that replaced the image.
$('canvas').first().PixelFlow('simpleanimate', 0, 2000)
// You should use the original returned reference since the
// element is no longer an img element but a canvas
$pixel.PixelFlow('update', { resolution: 32 })
// or you can access the instance directly by fetching it from
// the jQuery data on the $pixel
var pixel = $pixel.data('plugin_PixelFlow')
pixel.rebase()