Author: | GRA0007 |
---|---|
Views Total: | 801 views |
Official Page: | Go to website |
Last Update: | April 23, 2018 |
License: | MIT |
Preview:

Description:
Pixel Display is a funny JavaScript library that generates pixelated images from JavaScript objects using HTML5 canvas.
It also has the ability to pixelate a regular image you provide.
Plus, the library enables you to animate the generated pixelated images in a given interval.
How to use it:
Download and import the minified version of the Pixel Display library into the document.
<script src="/path/to/pixeldisplay.min.js"></script>
Create an HTML canvas element with the following data
attributes:
- data-density
- data-pixel-height
- data-pixel-width.
- data-foreground-color
- data-background-color
<canvas id="display" data-density="10"></canvas>
Initialize the Pixel Display library and we’re ready to go.
var instance = new Display('#display');
Render an image from a JavaScript object.
var myData = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ]; instance.renderArray(myData);
Pixelate an image.
instance.renderImage('image.png');
Animate pixelated images.
var myAnimation = new Animation(instance, [imageArray1, imageArray2], delay=1000); // starts the animation myAnimation.start(); // stops the animation myAnimation.stop();