How would I apply randomSeed( )

Page 221 - 223 - Example 8-9: Move Shapes Randomly

At the end of the example, there’s a NOTE about randomSeed( ). I checked out the Reference at https://p5js.org/reference/#/p5/randomSeed

I’m trying to figure out how to apply randomSeed( ) to Example 8-9: Move Shapes Randomly? I added randomSeed( ) to example (including the example with constrain( )) and can’t get to work in a way that seems appropriate.

Code example without constrain( ):

var speed = 2.5;
var diameter = 20;
var x;
var y;

function setup() {
  createCanvas(240, 120);
  x = width/2;
  y = height/2;
  background(204);
}

function draw() {
  randomSeed(20)
  x += random(-speed, speed);
  y += random(-speed, speed);
  ellipse(x, y, diameter, diameter);
}

Code example with constrain( )

const diameter = 20;
let speed = 2.5;
let x;
let y;

function setup() {
  createCanvas(240, 120);
  x = width/2;
  y = height/2;
  background(204);
}

function draw() {
  // randomSeed(10);
  x += random(-speed, speed);
  y += random(-speed, speed);
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
  ellipse(x, y, diameter, diameter);
}

How would I apply randomSeed( ) to either of these examples - in such a way that would demonstrate the function’s behavior?

1 Like

the second example is easier to see exactly what’s going on.

The code here is ‘correct’ in so much as to say that it’s generating a random number based on the seed and then using it

I think the misunderstanding is not so much how to use the randomSeed() but what it actually does.

Consider these scenarios :slight_smile:

We know that the random function works as following: Every time you’re generating an x value (without the random seed) it’s like taking a range of numbers, in this case (-speed, speed), and adding those numbers to a bucket, shake up the bucket, pull a number out and presto, chango, you’ve got a new X value.

Next example; we’re going to seed the randomness. To do this, before putting the numbers in the bucket, we can add some randomly placed glue to the bucket (the seed) and then drop our numbers in. The numbers stick to the glue, but we still had the numbers stick in a random places to the glue in a random order. As we reach in to pull the number out (and we are forced to always reach in the same way), we’re always going to get the same number which happened to stick to the glue at the point we can reach into the bucket. So it’s random, but seeded random.

in the case of your second example, the random number for the Brownian motion gets generated based on the seed ‘sticks’ and then carries out it’s animation, that’s why you always get the diagonal line. you’re reaching into the bucket and grabbing the randomly seeded number every frame.

The random seed is incredibly useful when you want randomness, but not pure randomness, or you want to have randomness you can ‘save’ since you could use the same seed to achieve the same effect. In this way, I often use it as a setting or to let the sketch make initial decisions.

hopefully that make some sense :upside_down_face:

3 Likes

here’s a super basic sketch to play with

let diameter = 0;

function setup() {
  createCanvas(240, 240);
  background(204);
  
  randomSeed(110); //change the seed and look at the diameter of the ellipse
  
  
  diameter = random(0,width);
  console.log(diameter) // see that this is always the same with the same seed, but the seed is random
}

function draw() {
  ellipse(width/2, height/2, diameter, diameter);
}
3 Likes

Thank you for taking the time to really explain.

I added randomSeed( ) to the second example; the behavior was the diagonal line as you say: https://www.screencast.com/t/0t30mcZ2

I did run your example and got the same result every page refresh: https://www.screencast.com/t/vksF3DRo1xyL I suppose this is the behavior I should expect; as you say, “we’re always going to get the same number which happened to stick to the glue at the point we can reach into the bucket. So it’s random, but seeded random.”

This is the part where things get fuzzy: “we can add some randomly placed glue to the bucket (the seed) and then drop our numbers in.” (Very good analogy by the way.)

Maybe you could try and explain this glue (seed) and randomness within the context of the example on reference page:

randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}

Appreciate your help very much.

1 Like

sure!

notice how every time you run that sketch the ‘barcode’ is always the same. it’s because it’s all drawing from the same seed ( in a sense, picking the numbers up one by one from the glue, it’s still generating 100 random numbers, but they are the random numbers that got shaken up and stuck down at the beginning of the sketch. and if we try to shake up the bucket again, we’ll get the same barcode.

for proof of this, compare to this alternative example which is in the draw loop and has no seed, essentially we’ve got no glue so each time we draw the random number the bucket gets shaken up and we get a random one each frame:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  
  for (let i = 0; i < 100; i++) {
    let r = random(0, 255);
    // console.log(r)
    stroke(r);
    line(i, 0, i, 100);
  }
}

compare to the reference example where we first set the seed (glue down the randomness) then grab numbers out of the bucket in the way they are oriented from the start. we can put the same code in the draw loop with a seed where it’s trying to ‘shake the bucket’ each frame, but since everything is already glued down it wont really matter. We’ve got an initial randomness, but not randomness on each frame.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  
  randomSeed(99);

  for (let i = 0; i < 100; i++) {
    let r = random(0, 255);
    // console.log(r)
    stroke(r);
    line(i, 0, i, 100);
  }
}

another way to think about it:

you’ve got a wall and you’re going to throw a dart at it and try to hit a number written on a piece of paper. lucky for you, you’ve got perfect aim and you’ll always hit the same spot.

generating a random number is like having a friend thrown a handful of paper slips into the air which the dart hits and pins to the wall, this is a random number.

random seed would be like asking a friend to randomly pin them to the wall ahead of time, and then when you throw the dart, it hits one of the slips that you’re friend happened to pin up.

You move (generate another random number) each time you thrown the dart, and it hits another slip, but every time you throw the dart from the same location you get the same number. Behind the scened p5 is keeping track of where the slips are and where you throw the dart from.

It’s random from the start, but the results are repeatable as long as your seed (friend pinning up the slips) is the same. you can think of this like each of your friends always pins up the slips the same way, so you might get Tera to pin up the slips for one outcome or you might want the seed that Jeff pins up.

2 Likes

Gracias!

I noticed that the barcode generated on randomSeed() Example was exactly the same as the barcode on my browser when I ran the code.

I thought this might be because I was using the same browser so I loaded randomSeed() Example in Safari; got the same barcode result.

Maybe the memory allocation superseded the browser? Supersede may not be best word for what I’m trying to say.

this is whats going on behind the scenes, so it would be browser independent:

you can see the underlying code in p5 here: p5.js/src/math/random.js at 0.7.3 · processing/p5.js · GitHub

the real random number generation happens here:

my understanding of this generator (which is quite rudimentary) is that since the root primes and period are always the same, if you use the same seed it will always generate the same number, it’s a calculation. It’s also worth noting that p5 cannot generate a true random number, but only a simulated one.

https://www.random.org/

3 Likes

It’s interesting that the video on randomness (thanks for sharing!) discussed “seeds”. But, I’m not seeing the correlation between how PRNGs use seeds and the p5.js randomSeed() function. My intuition say’s there is one, but my mind does not yet have sufficient grasp of subject to connect the dots; maybe I just need to “give it a rest” :slight_smile:

Wait a minute, is the 99 in randomSeed(99) the actual “seed”!? If so, is random() using this seed to create the list of random numbers? If so, I think I get it now! Or mostly get it.

AFAIK, each seed value generates its own pre-determined sequence of pseudo-random values. :nerd_face:

What comprises a “seed value”? The 99 in randomSeed(99)?

YES! this is it! you’ve got it!

You are doing a great job!

Okay, now that I understand (more the most part) what the seed is; what are the range options when choosing the seed? For instance, if I have random(0, 255) in my code, and want to employee randomSeed() to provide “consistent randomness” would my seed need to be between 0 and 255?

from a quick test a sextillion number is the max. you might be able to go to a negative sextillion number, but you’d have to test it. in any case, hopefully plenty of head room there!

//this works!
randomSeed(11044490823482304889234);

So, does it really matter what number goes in there? randomSeed(123927562) vs randomSeed(35)?

only in so much as that they will generate different seeds, and thus, different random numbers. but what seed you use is sort of irrelevant (but something you might want to track later on if you want to ‘recall’ your sketch)

Roger that.

Now I have a much better understanding of computer programs generate a “pre-determined sequence of pseudo-random values”.

Muchas gracias!

1 Like