Today I’ve been playing around with some aspects of the HTML5 canvas tag and produced a couple of interesting results.
I began by trying to recreate a tweet cart I previously managed to squeeze into less than 100 characters, a colour war.
The basics of this demo are as follows;
- Fill the screen with random colours
- Find a random pixel
- Grab its colour
- Draw a circle in that colour
- Repeat forever
This produces a lovely looking screen with rapidly changing ‘territories’ which can become quite hypnotic given the proper tweaking of numbers.
In a lunch break I was able to put together this mosaic generator. The speed at which I was able to put together an image effect I had only previously seen in Photoshop was quite exciting!
A quick google search revealed a whole host of possibilities available from the getImageData() function I was using to grab pixel info for my mosaic generator. Needless to say I instantly uninstalled Photoshop, why bother having this huge software package when I can just code all the image effects myself for free!
Sarcasm aside, on my way home I theorised a couple of different ways to improve my earlier implementation of a colour war and set about improving it.
I think the results speak for themselves here! An adjustable colour war toy which works on along device supporting the canvas tag*
*probably, I’ve only tested this on my desktop and phone
Come give it a go at http://craigtinney.co.uk/colour_war.html !