Randomness in p5JS

clayton k
RE: Write
Published in
2 min readApr 7, 2020

For my independent study project, I’ve ended up down a rabbit hole, exploring space colonizing algorithms. The starting point for most of these explorations is a random or pseudo-random assortment of points in space.

I wanted to quickly run through three different techniques for achieving random-ish distributions of things in p5JS.

random()

https://editor.p5js.org/claytonk/present/kks951bv

This seems to be a direct port of the Math.random javascript function. The result is a random distribution across the entire specified range that is passed into the function. Technically this is a pseudo-random number and with a large enough data set, a pattern might begin to emerge.

randomGaussian()

https://editor.p5js.org/claytonk/full/V1-TNqms

Random gaussian produces a ‘normal’ distribution of values. I was never very good at stats, but imagine the numbers clustering around the middle or average, just like on a bell curve. Most of the lines will be in this middle chunk, however, there will be outliers. This function allows you to define both the mean(middle point) and standard deviation or how far away from the middle the lines will likely stray. I have found this function useful for moving from high to low densities of objects. This begins to look a little less chaotic than random().

noise()

https://editor.p5js.org/claytonk/full/gHBn9W5v

noise() makes use of Perlin noise and results in a more natural-looking noise pattern. You can think of noise as a smoother, groovier version of gaussian noise.

Previous post: Looking Outwards [3]: CNC Milled Products

Originally published at https://blog.claytonk.com.

--

--

clayton k
RE: Write

denver, co. studying experience design at cmci studio(boulder)