Lost and Found

Randomness

Grade 6~8

Empty Variables

So far, we’ve been naming variables and storing data in them all in one go. But there’s actually a way to create a variable, name it, and not store data inside until later. This type of variable is called an empty variable.

let d; // create an empty variable

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

function draw() {
  background(220);
  d = 100; // assign 100 to d
  ellipse(200, 200, d, d);
  console.log(d); // print d
}

Why would we need to wait to store data inside of an empty variable? One possible reason is because we’re generating a random number, and that number won’t get created until function draw() runs.

Creating a Random Number

random() is a p5.js feature that generates a random number between a minimum value and a maximum value:

let d; // create an empty variable

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

function draw() {
  background(220);
  d = random(80, 100); // generates a random number between 80 and 100
  ellipse(200, 200, d, d);
  console.log(d); // print d
}

Because function draw() runs 60 times per second, the code above would generate 60 new random numbers between 0 and 3 every second.

Let’s keep playing with this idea. Below is an example of a circle that will generate a different circle size and a different stroke weight.

let circleSize;
let strokeWidth;

function setup() {
  createCanvas(400, 300);
  background(0);
  circleSize = random(5, 250);
  strokeWidth = random(4, 28);
}

function draw() {
  strokeWeight(strokeWidth);
  stroke(255, 109, 162);
  fill(247, 213, 17);
  ellipse(200, 150, circleSize);
}

What would happen if you put the circleSize and strokeWidth variables in the draw() function?