Close Pixelate

Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It's basically a simple demo for canvas' imageData functionality.

NOTE:

This is a work in progress. I've forked Davids repo, made it so images can be responsive, and I've converted it to work without the window var and with es6 imports. It hasn't been tested or properly finished yet.

close-pixelate.desandro.com

Contributors

• David DeSandro
• John Schulz

Example Code

This script works on any same domain image. According to the HTML5 spec, browsers prevent the usage of getImageData() on cross-domain images.

<img id="portrait-image" src="img/portrait.jpg" />

Use the closePixelate method on the image in your script. You can control the output of the rendering by passing in an array of options.

function init() {
  document
    .getElementById("portrait-image")
    .closePixelate([
      { resolution: 24 },
      { shape: "circle", resolution: 24, size: 16, offset: 12, alpha: 0.5 }
    ]);
}
window.addEventListener("load", init, false);

Each set of options is an object representing one re-rendering the original image.

The first set of options, { resolution : 24 } directs the script to render a big square pixel every 24 actual pixels. The script uses the exact color value of the one single actual pixel in the center of the big square pixel.

The second set of options uses all available parameters: { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 } Like the first set, the resolution is 24 pixels. The shape of the pixels will be circles. The size of each circle is 16 pixels (each circle will have a radius of 8 pixels). The circles will placed down and to the right by 12 pixels in both directions. Finally all the circles will have an opacity of 0.5, or 50%.

Options

The function accepts an array of objects. Each object holds a set of options.

• resolution : The distance in pixels between rendered pixels. Required.
• shape : The shape of the pixel. Accepts square, circle, and diamond. Optional. Defaults to square.
• size : The size in pixels of the rendered pixel. Optional. Defaults to value of resolution.
• offset : Offset in pixels. Optional. Defaults to 0. Can be a single value 15 for a diagonal offset, or an array or object for X/Y pairs: [ 15, 5 ] or { x: 15, y: 5 }.
• alpha : A decimal value for the opacity of the rendering. Optional. Defaults to 1.

Constructor and methods

var img = document.getElementById("portrait-img");
// create a new Close Pixelation instance with ClosePixelation
// requires two arguments: the original image element
// and an array of options
var myPixelation = new ClosePixelation(img, [{ resolution: 24 }]);
// re-render the canvas with different options
myPixelation.render([
  { resolution: 32 },
  { resolution: 16, shape: "circle", offset: 8 }
]);
// render a single option-set on top
myPixelation.renderClosePixels({
  resolution: 48,
  alpha: 0.5
});