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;
This produces a lovely looking screen with rapidly changing 'territories' which can become quite hypnotic given the proper tweaking of numbers.
My first implementation in the lab of HTML/Javascript proved too slow to simulate what I had in Pico 8, but did sport the advantage of being able to start with any image as the source, rather than just random noise.
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 any device supporting the canvas tag*
*probably, I've only tested this on my desktop and phoneCome give it a go at http://craigtinney.co.uk/colour_war.html !