Pixelator

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.