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 codepen.io, 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:

TL; DR – I played around with the canvas this weekend …

Advertisements

Published by

richieahb

A full stack web developer working with PHP, Ruby and Node.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s