Playing around with HTML5 CANVAS

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;

  1. Fill the screen with random colours
  2. Find a random pixel
  3. Grab its colour
  4. Draw a circle in that colour
  5. Repeat forever

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 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 !

Leave a Reply