Simulation: the weblog

Active Canvas: a digital art work?


This started off when I had to do a project on colour for my BTEC. I became increasingly interested in the way colours are defined and built up. At the same time, I wanted to improve my Javascript skills. So the idea was to write a web page which would generate colours in a structured way, to allow exploration of their relationships with each other.


In a small way this is also offered as a digital art-work. Artistic inspiration came partly from Every Icon by John F Simon, and partly from the 'Piet' programming language (See my blog entry.)


I'm intrigued by the ability of the web to produce a canvas that is not just a passive surface, but actively collaborates with the artist and shapes the product intelligently. When you start, you see a blank screen; but this contains its own laws and assumptions. As you draw', the programme takes over part of the process. Each cell becomes part of a continuous dialogue between artist and the 'laws' of colour, though these are abstract mathematical laws based on colour relationships with adjacent squares.


The point of Simon's 'Every Icon' is not so much to produce pictures, as to examine the possibilities of graphic variations. 'Active Canvas' looks at the systematic resonances of colours. (The maths - see below - are a deliberate attempt to replicate processes like changing tints and developing complementary hues. 'Every Icon' also develops patterns by logical progression, but makes no attempt to be 'artistic'.)


'Active Canvas' also examines 'shared' creation. By being unpredictable (or rather, predictable, but not easily so) it forces the artist to take chances. You set 'Every Icon' going and watch it; you can't interact. But to elicit a response from 'Active Canvas' you have to keep interacting. You draw the shape, but you don't know what colour changes will result.


In the 'Piet' programming language, colours become programming instructions. (So the programme code needed to write 'Piet' looks like a painting by Mondrian.) In 'Active Canvas', each colour also becomes a programming instruction to the squares near it, so that they interact logically as well as visually.


RGB Colours

Colours on the web are made by the additive mixing of three 'channels': red, green and blue, or RGB. The strength or intensity of each channel is expressed as a number from 0 to 255 (or more usually from 00 to FF hex).


Once mathematics enter into the picture, it becomes possible to develop the colours like a Bach fugue, in which each colour is related organically and rhythmically to another, and each cell influenced by its neighbour's colour. I wanted to see how far mathematical patterns would generate their own visual harmony.



First, the script takes the RGB background colour for the square your mouse is over. It then alters this, or its neighbours, in one or more of three ways:

(a) shifts the RGB values to the right, so the numerical value of the red channel is assigned to the green channel, the green to the blue, and the blue to the red.

(b) increases the value of the red channel by 20% (when it reaches 100% it goes to zero again).

(c) increases the value of all three channels by 60% (so a channel at 0% goes to 60%. Again, if the value exceeds 100%, it cycles back, so after 60% comes 20%.)


As you move your mouse, some squares are changed more than once. Going over and over the same area, or drawing patterns which cross each other, develops the colours further.



How to use Active Canvas

There are only 200 lines of code, but they may generate over 6000 'event handlers' - so please forgive the page if it takes a while to appear.


Also, sadly, it only works on Internet Explorer, NOT Firefox. I have no idea why not. Sorry.

When you load it you see a blank screen. You do the work by moving your mouse around the screen (quite slowly is best). No need to click. As you move, the colours change in a cycle that takes you through 216 different possible colours. The changes seem random, but there is an overall rhythm. Refresh or reload the page to start again. When you've finished, use the 'back' button on your browser to come back to this page.


There are three different settings. Click here or here to start. Or here for the third version with a more delicate 'brush' and smaller 'cells', which takes longer to load.


Here are three simple images drawn on the Active Canvas, using the different versions: