#ksawerykomputery #creativecoding #generativeart #musicvideo #installations #processing #newmedia #livevideo #ksawerykomputery #creativecoding #generativeart #musicvideo #installations #processing #newmedia #livevideo


a p5.js library, based on the idea of sorting images by its brightness and using them as pixels to reproduce the canvas source.

download p5.pixelator.js

quick setup and info

note: the code is open source, which means that you can use it freely with a proper credit. If you are interested in a commercial use, contact me.


Pixelator is a extension library for p5.js, so to make it work, first you have to get familiar with p5.js. you can think of p5.js as it is a Processing environment for web use. for me, the biggest advantages of p5.js are:

  • it makes creative coding for web much simpler;
  • you can use it to improve websites visually and with interactive approach;
  • you can share your sketches just sending a link.

read more at p5js.org


this script does three things:

  • it groups similar pixels of the graphic source,
  • it creates a brightness-sorted set of sprites – currently there are 4 types of sprites: default greyscale, generative blocks, generative gradients and image,
  • it draws bright-corresponding sprites in place of pixels.

link the p5.pixelator.js file on my host or download it here.

basic script

<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js" type="text/javascript"></script> <script src="https://ksawerykomputery.pl/sources/p5.pixelator.js" type="text/javascript"></script> <script> 'use strict' var canvas; var pixelator; var myPalette; function setup() { canvas = createCanvas(1024, 512, WEBGL); // canvas.hide(); myPalette = [ color('#ffffff'), color('#ff0000'), color('#00ffff'), color('#0000ff'), color('#666666'), color('#333333'), color('#000000') ]; pixelator = new Pixelator(window, canvas, { type: "gradients", palette: myPalette }); } function draw() { lights(); background(100); rotateX(-frameCount*0.011); rotateY(frameCount*0.01); strokeWeight(80); box(240); pixelator.update(); } </script>

run this example
download p5.pixelator-example.html


set default type:


set type to gradients (color palette required):

pixelator.set( { type: "gradients", palette: myPalette } );

set type to blocks (color palette required):

pixelator.set( { type: "blocks", palette: myPalette } );

set type to image (image file required):

pixelator.set( { type: "image", image: myFile } );

limit number of sprites (0.0-1.0):

pixelator.set( { range: 1.0 } );

set tolerance for grouper algorithm (0.0-1.0):

pixelator.set( { tolerance: 0.2 } );

move Pixelator canvas to a container:

pixelator.parent( id );

change graphic source for Pixelator:

pixelator.changeSource( graphics );

more settings

if you are interested in changing the way the blocks are being generated, have a look at the p5.pixelator.js file for newSprite() function.

Show comments 💬