PIXELATOR

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.

p5.js

Pixelator is an 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

p5.pixelator.js

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

Settings

Set default type:

pixelator.clear();

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.