Rowan

This was a wander into the subject of Brownian motion - link to the drawing animation here.

Brownian Motion is the random and erratic-looking movement of microscopic particles in a fluid, caused by the collisions of the fluid's molecules with the particles. (First observed by Robert Brown in 1827 with pollen grains jiggling in water under a microscope).

It's another beautiful example of a stochastic process that shows underlying patterns and behaviours when you simulate it many times - i.e. a Monte Carlo simulation.

The underlying characteristic behavior is:

Average distance from the starting point $\propto \sqrt{n}$, where n is the number of steps.

Getting started

The maths is extremely straight-forward to code up if we take the discrete version - a random walk. Just add some random distances for x and y after each timestep. And it's a fun example to use when learning about how to implement animations in javascript.

I initially created a fullscreen 2d canvas in JavaScript (and a event listener to check for any window resizing, in which case, everything starts again). A single particle is placed in the middle, after which its position is repeatedly updated and we draw its current location and trail. The trail also has a fade effect. Link here.

From here, a set of configuration parameters were integrated to allow for adjustment of: number of particles, start locations, trail fade effects and other appearance features. Link here.

Drawing art

With the fun effects created by multiple moving particles and their trails, I extended it further as I wanted to ultimately include more complicated movement behaviours to create larger effects. The idea: create evolving particle art that reveals and gradually draws an image over time. This involved taking an image and adjusting using brightness levels as an attraction map for the particles to move towards.

An image is loaded and is matched to the canvas where the particles move. In this case, we've gone with the famous Vermeer 'Girl with a Pearl Earring' painting. Particles' movement, whilst still random, has an added bias to move towards a location on the image which has the brightest spot within a fixed radius of the particle. Other additions to tune were to encourage particles to explore areas of the image which weren't visited. And also to teleport to a new area if they ended up in a dark area of the iamge for too long.

There remain limitations and further additions which would make the overall effect better. These include but are not limited to: tools for adjusting to different screen sizes, tools to make the effect work for a range of different images which have different contrast and detail levels.

For the time being, easier to see the picture if you squint! ¯\_(ツ)_/¯

Side notes

A water molecule is roughly 0.1nm. The particle (the pollen grain) would be 1,000 to 100,000 times bigger - roughly 100nm to 10µm. So the tiny molecular collisions are imperceptible. But when millions of molecules bombard a much larger, lightweight particle unevenly, it causes the random jiggling.

Another example seen in the everyday could be a dust particle moving in the air. There are many other physical and biological examples. In finance, Brownian motion also models randomness in interest rates and stock prices.