I was inspired by a friend to do some art using the math/scientific world as a basis, so I decided to start with the classic: pi.
I’ll be looking at some different ways of visualising the digits of pi visually using HTML5 and the canvas element to iterate over the digits. If you have any cool or interesting ideas regarding Math, Science and Art visualisations, especially concerning pi and other interesting numbers, then leave a comment below and we’ll feature your thoughts or works in our next post!
Continue reading “Math and Science Art Series: Visualising Pi with a HTML5 canvas” »
Some might say polaroids are a bit overdone when it comes to displaying your photos, but I’m going to be using the Flickr API to get a selection of images and hang them on a virtual line.
There’s a bit more to this though, as I’ll be showing you how to calculate the actual widths of our hanging polaroids so that we can fit as many on the line as possible without having them overlap. This may sound trivial, but when we’re hanging our pictures at an angle it becomes slightly more complex.
Continue reading “Creating polaroids using Flickr API (also how to space rotated elements correctly)” »
If you have a video/photograph that has a plain background, such us you’d find if you used a green/blue screen or maybe on a plain sky background, you can create a chroma key effect. This is the same technique used by weather presenters and on hollywood movies to replace the background with something else.
We’ll go through some of the trials an tribulations of using this to replace the background of an image and even on a video. Continue reading “Creating a chroma key effect with HTML5 canvas.” »
HTML5 brings us the amazing canvas element. The canvas element is useful for so many things, but here we will look at how to create a book using a canvas and a few other elements.
Continue reading “Making a fancy book using HTML5 canvases” »