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.

Close Pixelate on GitHub Read docs Download close-pixelate.js

Contributors

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.

The Pixelator by Ben Keen

Demos

$2 Portrait Project: Stanley by Troy Holden
Original photo: $2 Portrait Project: Stanley by Troy Holden
{ resolution: 32 },
{ shape : 'circle', resolution : 32, offset: 15 },
{ shape : 'circle', resolution : 32, size: 26, offset: 13 },
{ shape : 'circle', resolution : 32, size: 18, offset: 10 },
{ shape : 'circle', resolution : 32, size: 12, offset: 8 }
Take My Portrait by Hamed Saber
Original photo: Take My Portrait by Hamed Saber
{ resolution: 48 },
{ shape: 'diamond', resolution: 48, offset: 12, alpha: 0.5  },
{ shape: 'diamond', resolution: 48, offset: 36, alpha: 0.5  },
{ shape: 'circle', resolution: 16, size: 8, offset: 4, alpha: 0.5 }
Original photo: Tony deep in thought (B&W) by Jon-Luke
{ shape: 'circle', resolution: 32, size: 6, offset: 8 },
{ shape: 'circle', resolution: 32, size: 9, offset: 16 },
{ shape: 'circle', resolution: 32, size: 12, offset: 24 },
{ shape: 'circle', resolution: 32, size: 9, offset: 0 }
Wonder by Kyrill Poole
Original photo: Wonder by Kyrill Poole
{ shape: 'diamond', resolution: 24, size: 25 },
{ shape: 'diamond', resolution: 24, offset: 12 },
{ resolution: 24, alpha: 0.5 }
anita shlosse 04 c studio.es by Vincent Boiteau
Original photo: anita shlosse 04 © studio.es by Vincent Boiteau
{ shape: 'square', resolution: 32 },
{ shape: 'circle', resolution: 32, offset: 16 },
{ shape: 'circle', resolution: 32, offset: 0, alpha: 0.5 },
{ shape: 'circle', resolution: 16, size: 9, offset: 0, alpha: 0.5 }
Kendra by Anna Kreslavskaya
Original photo: Kendra by Anna Kreslavskaya
{ shape : 'square', resolution : 48, offset: 24 },
{ shape : 'circle', resolution : 48, offset : 0 },
{ shape : 'diamond', resolution : 16, size: 15, offset : 0, alpha : 0.6 },
{ shape : 'diamond', resolution : 16, size: 15, offset : 8, alpha : 0.6 }
Portrait Of A Mayor by Troy Holden
Original photo: Portrait Of A Mayor by Troy Holden
{ shape : 'square', resolution : 48 },
{ shape : 'diamond', resolution : 12, size: 8 },
{ shape : 'diamond', resolution : 12, size: 8, offset : 6 }