I've been aware of the concept of random walk for a while. I remember reading about it in The Fractal Geometry of Nature by Benoit B. Mandelbrot and reacting: -Boring! To simple! I thought back then, but it's not boring at all as you will soon see...

What is it?

Mandelbrot refers to it as Brownian Motion, named after the botanist Robert Brown who discovered this physical phenomenon of particles that move at random. Assume we have a particle that moves step by step. Each step can be in any direction and the step size is random but with an upper limit. That's basically it. Simple, I told you.

This is what it looks like if we draw a line between each step in the walk.

Simple Brownian Motion

However simple the concept might be, I recently decided to explore it a bit and now I am going to take you on an erratic stroll through the Pens I made on this journey. It started with this Pen, it has many particles and after each step for each particle I draw a line between the previous position and the current one. Click the canvas to clear it and set a new random max step size. Can you notice the different patterns it causes?

Brownian Motion

Next I did this Pen where I only changed background to black and line color to greenish. Same thing here as with the first one: click to set a new max step size.

Moss by Brownian Motion

Then I did Fireflies. No lines this time, instead glowing dots. Totally different thing with just a few simple changes.


Next up was Brownian Gnats. Also here some simple changes: I added a history to each particle, a list with old positions. (A concept borrowed from the awesome Daniel Shiffman on Coding Train. He explains it in the episode 9.4: Drawing Object Trails - p5.js Tutorial.) And when drawing a particle I draw lines from the current position to all old positions. This thing looks living.

Brownian Gnats

Back to drawing lines again, what if I change the max step size depending where on the canvas the particle is? First I made it smaller in the upper left corner. That didn't turn out that exciting. Brownian Walk With Dense Corner

Hmmm... Maybe let text influence the step size?

Text by Brownian Motion

Yes, that is cool! Now we're getting somewhere. This is how it works:

  • Render a text on the canvas.
  • Store the pixels in an array.
  • Clear canvas.
  • Start moving particles around according to Brownian Motion.
  • Draw a line between the current and the previous position for each particle.
  • After each move, check in the pixel array if the particle is on the text or not.
  • When a particle is on the text, set the step size small - otherwise big.

It gets better. Here's the best one according to me, the peak of our erratic stroll.

Portrait by Brownian Motion

Same concept as the previous Pen but with a few tweaks:

  • Pick a b/w image.
  • Create a canvas with the same size.
  • Render the image on the canvas.
  • Store the pixels in an array.
  • Clear canvas.
  • Start moving particles around according to Brownian Motion.
  • Draw a line between the current and the previous position for each particle.
  • After each particle move, check the corresponding position in the pixel array how dark it is.
  • The darker pixel - the smaller step size is used -> the lines get tighter together.

I used the same code to process an image of Johnny Cash. Johnny Cash by Brownian Motion

This is how it looks when you let the history points form a shape and fill it with a semi transparent color:

Shapes by Brownian Motion

Random Walk vs. Brownian Motion

At this point I started reading about Brownian Motion and realized that it is one of several variants of the more general concept of Random Walk. Brownian Motion is about the physical phenomenon of particles moving in a fluid. Only if you are moving physical particles around you should use the term Brownian Motion, but people seem to use the two terms interchangeably. The last two Pens below use a constant step size which, to me, is more suitable to call Random Walk.

Reading the section again in Mandelbrot's book I noticed that he says that Brownian Motion is a fractal. That struck me as odd, how can such a simple thing be a fractal?

Brownian Motion

But Wikipedia also classifies it as such. A random fractal to be precise. Fractals info box from Wikipedia Even better, I love fractals!

In the Wikipedia article I saw an image of a walker moving around in a grid which inspired me to make this animation:

Wayward Walker Worms

Since the walk direction is random a worm crosses itself alot. In this Pen I made the worm try to avoid to cross itself. Sometimes it has to though in order to not get stuck.



Even a simple concept can lead to some interesting results. Just use your imagination and creativity. And don't be afraid of throwing away things that don't turn out the way you wanted. Experiment, tweak, repeat.

Say after me: ⚗️ Experiment, ⚙ Tweak, 🔁 Repeat!

I want MOAR

Other people have created Brownian Motion Pens as well:

EDIT, 2017-04-06: Daniel Shiffman has two videos about random walk: