When I was a kid I received a basic hobby microscope as a birthday present. I think I spent a whole summer where I would look at anything I could get my hands on. Pond water? Sure let’s check it out. A splinter? Yes. How about sand? Yes I did that too, and while it sounds boring sand is actually pretty interesting under the microscope.

Watch: A Grain of Sand - By Dr. Gary Greenberg - Sandgrains.com

With that said the movement of pond water really left an impression on me. Everything was kinda moving around, alive, a whole world that I never knew was so active (especially because I thought of ponds as stinky and stagnant). It turns out what I was so intrigued with as a child was something called Brownian motion. Here’s a vid about it:

Watch: Random Force & Brownian Motion - Sixty Symbols

A bit more about it (taken from Wikipedia). This motion is named after the botanist Robert Brown, who first described the phenomenon in 1827, while looking through a microscope at pollen of the plant Clarkia pulchella immersed in water.

A quick and dirty recreation of Browian movement in Javascript

Long story short I had some fun playing with the incredible PixiJs and trying to recreate Brownian motion. I consider this a “bar napkin doodle” but the effect is pretty convincing.

Check out the live demo on CodePen: Brownian motion (PixiJS) by Andy Sciro (@spssciro)

The key take away here is just randomizing the x and y values for each tick. The line to really watch is simply this:

X = (Math.random() > 0.5 ? 1 : -1) * Math.random() * amp;

And voila, we get the right wiggle!