How To Use Filter In Javascript

Creating a pixelation filter in Javascript

Welcome to the side by side installment of Artistic Coding Nuts. You can see previous tutorials here.

And as always the total code is bachelor on my github: https://github.com/GeorgeGally/creative_coding

A pixelation filter is quite easy to create, and the sampling technique and formula is useful to know in artistic coding, especially in computer vision, which I'll be covering presently.

The essence of the pixelate filter is simply dividing the screen into blocks and then sampling blocks for their colours. We sample equally blocks and non every pixel, for the sake of functioning. The smaller the sample size the slower our artwork will run.

So let's outset just by dividing the screen into blocks… Nosotros do this by looping through all the rows and columns, which slowed downwards, looks like so:

The formula is a loop within a loop:

                // define the sample size                                
var sample_size = twenty;

                // loop through the rows from to to bottom of page                
for (var y= 0; y < h; y+= sample_size) {

                                  // loop through all the columns from left to right                
                for (var x = 0; ten < west; ten+= sample_size) {

Which allows usa to hands get squeamish effects like this:

var ctx = createCanvas("canvas1");

// ascertain the sample size
var sample_size = randomInt(twenty, fourscore);

                if(chance(200)) sample_size = randomInt(10, 40);

                // loop through the rows from to to bottom of page
                for (var y= 0; y < h; y+= sample_size) {

                //loop through all the columns from left to right
                for (var ten = 0; 10 < w; x+= sample_size) {
                ctx.fillStyle = rgb(random(205));
                ctx.fillRect(x, y, sample_size, sample_size);
                }

The only new thing at that place is the function chance(), which is a handy little random helper role I utilize all the time, which enables me to fire events randomly based on a probability. The lawmaking looks like this:

part chance(value){
                return (random(value) > value-1);
}

But I digress.

So at present that we take a formula for sampling, let's sample an epitome. There's a tiny bit of theory nosotros demand…

The Javascript role for sampling a the canvas is: getImageData(start_x, start_y, sample_width, sample_height), so to sample the whole screen we can simple exercise:

var sample = ctx.getImageData(0,0,w,h);

This gets us back an object with a data array of rgba values. And all we need now to do is loop through the data values and excerpt our pixel values.

To go the position of any point on the screen we can use the magic formula:

However, recall that assortment the data array returned to us has four values for every pixel, then to get that pixel's position in the assortment nosotros simple multiply information technology by 4:

var sample_point = (x + y * west) * 4;

And and so the side by side four values in the array would be that pixel's rgba values…

// we want the information element of the object
var sample = ctx.getImageData(0,0,w,h).data;

                for (var y= 0; y < h; y+= sample_size) {

                for (var x = 0; x < w; 10+= sample_size) {

                var pos = (x + y * westward) * four;
                  var red   = sample[pos];
                  var dark-green = sample[pos + one];
                  var blue  = sample[pos + 2];
                  var alpha  = sample[pos + 3];                                                                        // ...do something with those values

We can actually ignore the blastoff value as we won't be needing it. So to put it neatly into a function, and so we can play with it easily, and never think of it over again, nosotros do something similar this:

function pixelate(sample_size){

                var imgData=this.getImageData(0,0,west,h).data;                    for (var y= 0; y < h; y+= sample_size) {

                for (var x = 0; ten < w; x+= sample_size) {                       var pos = (x + y * w) * 4;
                  var cherry-red   = sample[pos];
                  var green = sample[pos + 1];
                  var blueish  = sample[pos + ii];

                ctx.fillStyle = rgb(red, blue, dark-green);
                ctx.fillRect(ten, y, sample_size, sample_size);

And nosotros would it like this:

// create canvas                
var ctx = createCanvas("canvas1");

                // define the sample size                
var sample_size = randomInt(20, 80);

                //load an paradigm                
var img = new Prototype();
img.src = 'img/stevie.jpg';

                if(chance(200)) sample_size = randomInt(10, 40);
                ctx.drawImage(img, 0, 0, w, h);
                pixelate(sample_size);

                
function pixelate(sample_size){

                var imgData=this.getImageData(0,0,west,h).information;                    for (var y= 0; y < h; y+= sample_size) {

                for (var x = 0; 10 < west; 10+= sample_size) {                       var pos = (x + y * west) * iv;
                  var cerise   = sample[pos];
                  var light-green = sample[pos + 1];
                  var blue  = sample[pos + 2];

                ctx.fillStyle = rgb(blood-red, blue, green);
                ctx.fillRect(ten, y, sample_size, sample_size);

There'southward a few tweaks I want to do to the part. Firstly let'due south laissez passer a context into it, so we can if we want, accept multiple canvases on the screen and but target i of them… So nosotros just laissez passer in an actress argument. The line:

var context = _ctx || ctx;

…is shorthand for saying if the argument _ctx is undefined so use the default variable ctx. This allows me to non have to pass the statement in if I only have one sheet.

part pixelate(sample_size,                _ctx){

                var context = _ctx || ctx;                
                var sample = context.getImageData(0,0,w,h).data;

                for (var y= 0; y < h; y+= sample_size) {                      for (var 10 = 0; x < due west; x+= sample_size) {

                var pos = (x + y * w) * iv;
                var red   = sample[pos];
                var green = sample[pos + 1];
                var blue  = sample[pos + two];
                context.fillStyle = rgb(red, bluish, green);
                context.fillRect(10, y, sample_size, sample_size);
                }
                }

And for actress credit, there's one more play a joke on we tin can employ to speed things up. The to a higher place office is perfectly fine. But as always in Javascript in that location are many means to peel a cat.

We can use an unsigned 32-bit integer array, and together with using bitwise operators, nosotros get a bit of added operation… so our final office would look like this:

function pixelate(sample_size, _ctx){

                var context = _ctx || ctx;
                var sourceBuffer32 = new Uint32Array(context.getImageData(0,0,w,h).data.buffer);

                for(var y = 0; y < h; y += sample_size){                      for(var x = 0; ten < westward; x += sample_size){

                var pos = (x + y * w);
                  var b = (sourceBuffer32[pos] >> sixteen) & 0xff;
                  var g = (sourceBuffer32[pos] >> 8) & 0xff;
                  var r = (sourceBuffer32[pos] >> 0) & 0xff;                
                context.fillStyle = rgb(r,g,b);
                context.centreFillRect(x, y, sample_size, sample_size);

And that's that. Go forth and pixelate.

Equally usual the total code is bachelor on my github: https://github.com/GeorgeGally/creative_coding

You can encounter previous all my tutorials here.

Follow me here if y'all and so desire:

https://www.instagram.com/radarboy3000/

https://twitter.com/radarboy_japan