{ shape : 'diamond', resolution : 48, size: 50 },
{ shape : 'diamond', resolution : 48, offset : 24 },
{ shape : 'circle', resolution : 8, size: 6 } |
VOOZH | about |
|
VOOZH | about |
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
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.
{ shape : 'diamond', resolution : 48, size: 50 },
{ shape : 'diamond', resolution : 48, offset : 24 },
{ shape : 'circle', resolution : 8, size: 6 }
{ 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 }
{ 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 }
{ 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 }
{ shape: 'diamond', resolution: 24, size: 25 },
{ shape: 'diamond', resolution: 24, offset: 12 },
{ resolution: 24, alpha: 0.5 }
{ 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 }
{ shape : 'circle', resolution : 24 },
{ shape : 'circle', resolution : 24, size: 9, offset: 12 }
{ 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 }
{ shape : 'square', resolution : 48 },
{ shape : 'diamond', resolution : 12, size: 8 },
{ shape : 'diamond', resolution : 12, size: 8, offset : 6 }