The joys of the HTML canvas.

The HTML Canvas is the perfect meeting point of art and maths.  It allows you to draw things in almost any way you can imagine.  It’s basically a Photoshop with no GUI (although you can make one).  You can use vectors and get bitmap data.  And then you can play around with the maths.

Take the example below which is a a visualisation of a super-position of sine waves (specifically of Fourier Series).  It’s enchanting and you can play with it and watch it forever …

If you don’t know about Fourier Series / Transforms then I recommend a quick wiki.  Joseph Fourier basically said that all waves can be seen as the superposition of different sine waves.  The above visualisation represents sine waves as spinning circles at specific rates (if you reduce the “order” to 1 then this will make sense), where a sine wave’s amplitude is correlated to the radius of a circle.  All of the following circles start on the edge of their predecessor at a specific point (the point where the sine wave would be at zero).  By spinning at different speeds (being out of phase) you get a superposition of these waves as the circles add and subtract their own radius from their predecessor.

Now, not only is this (relatively) easy to do if you know the maths, but if you spend a few minutes looking at how it works, it’s extremely powerful.  There are obviously other technologies that allow you to do this.  But you can do this on the web, on, with nothing else!

When you have the code setup, like that above, then you can start playing around with it.  Above, it’s quite easy to see that the whole thing can be changed considerably by changing how the radius of the circle is calculated.  Previously the radius was calculated as 1 / (order * Math.PI) * scale. But if you change it up, say to: scale * (((order % 4) + 1)) you get a radii that repeat every 4 iterations:

But I digress, this is essentially vectorised maths (even though it gets printed to bitmap on the canvas).  If you want to use the canvas to manipulate bitmap images: you can.  Aside from generally having to import the image from the same domain otherwise you will get an error like: “Unable to get image data from canvas because the canvas has been tainted by cross-origin data”, you can import an image very simply with CanvasRenderingContext2D methods drawImage or putImageData.  After having the image on a canvas you can use the getImageData which turns the canvas into an ImageData object with a data property this is a TypedArray (specifically a UInt8ClampedArray).  This array is of length 4 x N (N being the amount of pixels in the image) contains red, green, blue and alpha values for each pixel in the format:

[1r, 1g, 1b, 1a, 2r, 2g, 2b, 2a  ..., Nr, Ng, Nb, Na]

With a bit of manipulation you can split the r, g and b channels into separate images and then, using the globalCompositionOperation of the canvas set to “difference”, you can then overlay the separate channel images and just slightly offset them for a glitch effect:


Things I’ve learnt with React.js; ES6 and Browserify

React.js has been the front-end developer’s buzzword for many months now, and it seems that when Facebook eventually release Relay, React will get the framework it needs to truly take off.  I’m just at the point now where I’m looking to build perhaps the most complicated front-end build I’ve done to date.  What better way to get to grips with React?

Continue reading Things I’ve learnt with React.js; ES6 and Browserify