Canvas layer experiment with sensor filtering methods

This is actually a HTML5 <canvas> rework of a former flash prototype for inspecting signal filtering methods. The original Flash implementation is at ©ompass360° (augmented reality) 0.9.3 – filtering methods article. Later on it turned out that this is more of a HTML5 Canvas layer managing experiment. Just hit the expand button below.

It basically shows the difference between the two popular filtering methods One-pole filter (a.k.a. Low-pass filter) and Moving average (a.k.a. Rolling average). Click (drag) to add some noise to the input, and you can really see how the different filtering parameters are doing their job.

This comes handy when one is dealing with iPhone sensor data (accelerometer, gyroscope, compass) and is intended to smooth the raw and noisy sample stream. Here you can think of the mouse position samples as a two dimensional accelerometer stream for example, so the experiment suddenly becomes much more meaninful. However, this experiment showed me a lot about canvas layer management, and more objective, object oriented Javascript as well.

Canvas layer management

I thought that HTML5 <canvas> will provide some solution to add layers, hierarchy to a given context, but it turned out there is no such class. Instead I created some classes EPPZScene and EPPZLayer that implements a really lightweight, easy to use canvas layer framework.

I’ll definietly extract the strict layering features to form a lightweight drop-in canvas layer framework in the future, now it is a more specific for this experiment.

Since these classes does the rest of the job here, the actual filtering implementations could be narrowed down to a few lines of code, well encapsulated in a customized EPPZLayer subclass.

var EPPZOnePoleFilter = EPPZLayer.extend
({
    init: function()
    {
        this.filter = 0.2;
    },

    updateFilteredSamples: function()
    {
        //Save previous updateFilteredSamples value.
        this.previousFilteredSample = new Point(this.filteredSample);

        //Filter.
        this.filteredSample.x = this.sample.x * this.filter + this.previousFilteredSample.x * (1.0 - this.filter);
        this.filteredSample.y = this.sample.y * this.filter + this.previousFilteredSample.y * (1.0 - this.filter);
    },

    draw: function()
    {
        this.strokeFilteredSamples();
    }
});

More object oriented Javascript

As I’m spending a lot of time around Objective-C, I felt Javascript uncomfortable at first. Then I slowly started to shape it to form a well designed application code.

Now code that controlling the view goes to a ViewController.js class, with explicit references to UI elements, holds the <canvas> layer engine, and the layer hierarchy as model. Markup hold the views only, just like an Interface Builder file. This setup embodies actually a pretty decent MVC Modell-View-Controller pattern.

Will finish up the article soon… …I have to go now.

The post Canvas layer experiment with sensor filtering methods appeared first on eppz!.