All Sorts of Random!

Today in Creators, we took another look at our old friend Random and discovered that there are many kinds of random that can be used for different things (this wiki page has a surprisingly long list of other types of random people find useful!)

We dug into three of the most useful kinds of random – and especially focused on the last kind – Perlin noise which is really amazing!!  We finished by using perlin noise to generate a procedural ocean-like landscape.

Play with the completed project here!

First kind: Plain old Random Random!

The first kind of random we looked at is plain old random random!  This type of random means that you are just as likely to get any number in the range provided.  By default this is the range from 0 to 1.   This means that every time we call Random, we could get 0.01 or 0.999 as often as we get numbers near the middle – like 0.5.

function draw(){
 for(let x=0; x<width; x++){point(x, random(height))

When we created random star-scenes with this we ended up with an image that looked like this:


The longer we left it running, the more stars we got.  The interesting thing being that the stars were well spread evenly out all over the page.

We found that using a range in random could restrict it to a given zone – but even then they were evenly spread out in that range.


function draw(){
 for(let x=0; x<width; x++){
 point(x, random(200, 400))

This is all old-hat to us – we have been using random since our scratch days – random is great but you sometimes need something a bit different.

Second kind: Normal Gaussian Distribution!

The second type of random we looked at was Gaussian Distribution.  This is a kind of random that happens a lot in the real world.  It is where most items are close to a “target” (sometimes called mean) and how tight they are clustered to the mean is called the standard deviation.  To use Gaussian random in p5 you use the function randomGaussian(mean, standardDeviation).

If I say x = randomGaussian(100, 20) it means that 95% of the time, x will be between 80 and 120, and mostly it will be around 100.

For example, the star code with gaussian focusing things on the center of the screen with a 50 pixel standard deviation is per below:

function draw(){
for(let x=0; x<width; x++){
point(x, randomGaussian(height/2, 50))

This results in:


This is pretty cool and we played with some colors to see how neat it could be.  Lots of things might suit this better than pure “random” – imagine paint splats, enemies shooting bullets that nearly hit a target, drawing grass or plants which should be mostly around a certain height, etc.  One to bear in mind!!

Lastly – Perlin Noise

Perlin noise is a different kind of beast to the other randoms..  it is actually a random sequence generator in that the numbers it generates are related.  It was invented by Computer Science professor Ken Perlin to do the graphics for the movie Tron in the 1980s and he received an Oscar (Academy award) for it!


It is a procedure that lets you find similar random numbers that flow closely to each other. u can use Perlin noise for all sorts of things – including:

  • Textures
  • Enemy movement
  • Procedural landscapes
  • Wind, growth effects
  • Flowfields
  • Generating cool art
  • Making blobs and spheres
  • Water
  • Fire
  • etc!!

In p5, perlin noise can be done with the “noise” function.

Perlin noise can be viewed as a black box that if you give it a number, it will return a random number between 0 and 1.  The trick with Perlin noise is that if you give it a number close to that number, it will give you a similar random number.  Each number you pass to the noise function is called a dimension and you can pass up to 3 in p5!

We started by plotting Perlin noise.

for(let x=0; x<width; x++){
let y = noise(xOff) * height;
xOff = xOff + 0.006;

The above code drew a wiggly line below:


We saw that as we experimented with the offset change – 0.006, the smaller this number, the smoother the curve.  The larger this number, the spikier the curve – e.g. if I change it to 0.02:


You can view this as “zooming out” of the curve.

We then added a “start” variable and a speed that changed it – this gave the effect of a scrolling landscape – a demo is here!

Mark got himself in a twist trying to do this and thanks to Kieran for the dig out there 🙂

2D Perlin Noise

2D Perlin is like the 1d, but instead of imagining a line with bumps, imagine a similar 2d plane with bumps, like a mountain range.  We added a ySpeed which changed how fast the scene scrolls forward – this gave the effect of “waves” for the water.

I added a “spaceship” and some simple controls to speed up and slow down – I think you can all see the possibilities for awesome game effects here!!  Click to play with it!


All the code is up on the creators github site as usual!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s