Positive experiences with math by Alejandro Erickson in Victoria, Canada

Back to Crafts

Digital art: Random Canvas Details

Here is a seemingly innocent set of computer instructions which produce remarkably organic looking images. The idea is to "randomly" select the colour of each pixel on the canvas so that it is similar to the colours of other pixels close to it.

Go to this article for less details.

Try the Random Canvas generator yourself by pressing the buttons a lot.

Remember: Each new image you see has NEVER been created or seen before. If you like it, then drag it to your desktop! If you make a really nice one, or if you like this, I'd love to hear from you!

px px

This idea and javascript code may be used with attribution to me, and only for non-commercial purposes under this license

Think of a digital image as a grid of pixels, and each pixel has a colour

[an error occurred while processing this directive]

In this image, each pixel is a similar colour to the one that is left of it (or the rightmost one in the row above). How do we get similar colours?

[an error occurred while processing this directive]

To get from to we subtracted 2 to red, added 2 to green, and subtracted 2 from blue.

To get the whole image, we started by colouring the top left pixel and then we chose a similar colour for the next pixel by adding or subtracting a small amount of each colour, and so on , , , until we coloured all the pixels, row by row, ending with the last one at the bottom right .

We randomly decide whether to subtract or add a bit of red, blue and green, to make the next pixel a random colour similar to the last one.

But that isn't quite the end of the story, is it. After all, the pixels generated by the buttons below are similar colours to the ones above and below themselves, not just beside. If we only did what I described, the results would look like this:

We fix this hideous behaviour by taking taking the average of two colours. After we have done the first row, we take our random choice of colour, and change it to the average of its own colour with that of the pixel in the row above.

[an error occurred while processing this directive]

We are almost done! You might have noticed that there are some wavy patterns that can't be created by merely taking the average with the pixel above. These are done by taking averages with pixels above left, or above right, depending on how far along the row we are. They are just details that don't really change the main idea.

Your Facebook Likes are very valuable.

Support GeoBurst!

with Paypal