Home Workshops

Spatial Filters

When working with pixels we don't have to work only with the pixel we're looking at directly, we can work with pixels around the pixel we're currently looking at in the loop.

A common way to do this is to use what's called a spatial filter (or kernerl). Take a look at this image:

2 Image Kernels

Here we see 2 kernels for filtering an image. If you multiply the values for the kernel on the left you would get a 3x3 grid of 1/9 values (all would be the same). This is called a Box Blur filter.

The filter on the right resembles a Gaussian Blur filter, a blur that resembles a soft brush from photoshop (thick in the center and softer at the edges).

Pixel Lines

Imagine taking a line of pixels like the ones above and applying a Box Blur filter. The pixel in the middle (black) would become lighter (influenced by the surrounding white pixels), and the neighboring pixels (white) would become darker (influenced by the middle pixel).

A gaussian blur will have the same result but maintain more of the color of the pixel in the center of the filter.

Let's take a look at how to apply a kernel:

        //loop all pixels
        for (var i = 0; i < data32; i++) {
          //kernelX will keeps track of kernel position
          var r = 0, g = 0, b = 0, kernelX = -1;
          //loops -1, 0, 1
          for (var j = -1; j < 2; j++) {
            var kernelY = -1;
            //loops -1, 0, 1
            for (var k = -1; k < 2; k++) {
              //get pixel @ current kernel position
              var index = i + k * w + j;
              var pixel = data32[index];
              //do an operation using kernel value
              rx += ((pixel) & 0xff)
                    * kernel[kernelX][kernelY];

              //... more operations



Translate Rotate Scale Skew

This should largely be a review but we will be working working with a few CSS transformations to manipulate our canvas around the screen. They are:

There is another factor in using CSS 3D Transformations and that is Perspective which controls how "deep" the 3D effect will be. A smaller perspective value means a deeper perspective, larger means more shallow.

You can set the transform of any html element using the following code:

          //get canvas and controls
          var canvas = this.canvas,
          tranX = this.controls.TranslateX.value,
          tranY = this.controls.TranslateY.value,
          tranZ = this.controls.TranslateZ.value,
          scaleX = this.controls.ScaleX.value,
          scaleY = this.controls.ScaleY.value,
          rotX = this.controls.RotateX.value,
          rotY = this.controls.RotateY.value,
          rotZ = this.controls.RotateZ.value,
          perspective = this.controls.Perspective.value;

          //NOTE canvas is not an html5 canvas element but a JS Object
          //canvas property element is the actual html5 canvas element

          canvas.element.style.transform = 'perspective(' + perspective + 'px) '
          + 'translate3d(' + tranX + 'px, ' + tranY + 'px, ' + tranZ + 'px) '
          + 'scale(' + scaleX + ', ' + scaleY + ') '
          + 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg) rotateZ(' + rotZ + 'deg)';

*** Only tested in Chrome (latest version)