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.

This project lives on GitHub where you can download the script and these examples.

View Close Pixelate on GitHub

Contributors

• David DeSandro
• John Schulz

The Pixelator

Ben Keen took this script and built a whole UI around it, creating The Pixelator. It’s the easiest way to take it for a spin.

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.

Example Code

This script works on any image. According to the HTML5 spec, browsers prevent the usage of getImageData() on any externally hosted image, but (largely thanks to the contributions of John Schulz, using Max Novakovic's getImageData API) Close Pixelate has built-in methods to get around this security feature.

<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.

var docReady = function() {
  document.getElementById('portrait-image').closePixelate([
    { resolution : 24 },
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
  ]);
};
window.addEventListener( 'DOMContentLoaded', docReady, 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%.