jQuery Matrix

What is jQuery Matrix ?

jQuery Matrix is my first plugin for the masses. I mean, as a web developer I often need to write some jQuery plugin for my web sites, but they’re usually too related to the site I’m working on, so I’ve never thought to release them.

It’s maybe one of the most useless funny plugin you’ve ever seen. It uses canvas to read images pixels and convert those images in ascii characters. You can choose to keep the original colors of the image or convert them in black and white or green scale.

[Example 1 - The green cow - don't mess with her, she dodges bullets!!]

[Example 2 - Laetitia Casta]

How does it work ?

Loading an image into a canvas makes possible to read the pixels and then the colors:

data =  ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data

the coolness is that it’s possible to read a rectangle of the image, this is used by jQuery Matrix to calculate an average color of every portion of the image. Then, the average color is used by the character that will replace the pixels of a image portion.

//get a portion of image
data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data;
var r_avg = 0, g_avg = 0, b_avg = 0;
 
//sum all channels values
for (var i = 0; i < data.length; i += 4) {
    r_avg += data[i];
    g_avg += data[i + 1];
    b_avg += data[i + 2];
}
 
//calculate average color for each channel
r_avg = Math.round(r_avg / (data.length / 4));
g_avg = Math.round(g_avg / (data.length / 4));
b_avg = Math.round(b_avg / (data.length / 4));

Finally we’ll generate a bunch of B tags, each with its character inside:

var block = document.createElement("b");
jQuery(matrix_cont).append(block);
var r = image_colors[i].r;
var g = image_colors[i].g;
var b = image_colors[i].b;
block.innerHTML = getChar(r, g, b);
switch (settings.colors) {
    case "bn":
        var gray = Math.round((r + g + b) / 3);
        jQuery(block).css("color", "rgb(" + gray + "," + gray + "," + gray + ")");
        break;
    case "green":
        jQuery(block).css("color", "rgb(0," + g + ",0)");
        break;
    case "all":
    default:
        jQuery(block).css("color", "rgb(" + r + "," + g + "," + b + ")");
        break;
}

What characters are chosen ?

I wrote a simple character map, the first character is for the darkest color of the image, the last for the lighter:

chars: ['.', '¸', '¹', '`', '*', '_', '°', 'ª', '^', '+', '±', '¢', '®', '"', 'υ',
            '»', '½', '¾', 'h', 'e', '8', 's', 'p', '=', '/', '$', '§', 'ξ', 'u', '6', '9',
            '5', 'y', 'j', 'd', 'q', 'H', 'ç', 'B', 'V', '8', 'Z', 'W', 'S',
            '%', 'e', 'n', 'm', '&', 'à', 'ω', 'Ψ', 'o', '#', 'k', '●', '♦', '♥']

the more number of characters you use the better result you’ll have, but nice results are gained also usign a single character.

How to use it

Setup

Include in your html page jquery and jquery.matrix.js files:

<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.matrix-0.1.js" type="text/javascript"><!--mce:1--></script>

Activate

$(function () { $("img").matrix(); });

Key Default value Description
grainSize 10 The size of the portions
colors “all” The color of the characters. Other possible values are: “green”, “bn”.
animated false Enable the real Matrix effect! ;-) be careful, it’s CPU intensive
chars ['.', '¸', '¹', '`', '*', '_', '°', 'ª', '^', '+', '±', '¢', '®', '"', 'υ', '»', '½', '¾', 'h', 'e', '8', 's', 'p', '=', '/', '$', '§', 'ξ', 'u', '6', '9', '5', 'y', 'j', 'd', 'q', 'H', 'ç', 'B', 'V', '8', 'Z', 'W', 'S', '%', 'e', 'n', 'm', '&', 'à', 'ω', 'Ψ', 'o', '#', 'k', '●', '♦', '♥'] The set of character to use, ordered by brightness
fontSize copied from grainSize By default the size of the font is the size of the portions, you can override it with a custom value
background “none” By default the characters have a transparent background, but in most cases you’ll want to force a color for the background; in those case pass a string containing the css background value (es.: “#000″)

Download

The whole project is hosted on Google Code:

Notes

jQuery Matrix has been tested with Firefox 3.6, Chrome, Opera and Safari (PC) but it should work with every modern browser that supports tha Canvas element (therefore IE 6, 7 and 8 won’t work). If you find a bug, please report it to: diego.imbriani@gmail.com