Changing colors and randomizing

One of the things that’s really cool about using computers to make art is that you can rely on randomness instead of having to intentionally place things. This lets you create art that can surprise you even though you made it!

That’s why we’re introducing randomness almost immediately in this class!

The main source of randomness in P5 is going to be the random function, which takes two numbers as arguments, and then returns a number between the lower and upper ranges.

Now we’re going to show you something that is going to be kinda silly but it’s important to talk about why it doesn’t work.

Make your draw code look like this:

function draw() {
  background(200,200);
  square(random(10,50),random(10,50),random(10,20));
}

Now, if you look at this code but haven’t hit play yet, what do you think it will do? Clearly, it’s going to be putting a square down at a point whose x and y coordinates are between 10 and 50, with a size between 10 and 20 pixels.

If you hit play, though, you’ll see the square just bouncing around wildly! Why? Because the draw function runs once per frame! You’re picking a different random point and a different random size every single frame! That might be what you want to do in some cases but it’s not what I intended for us.

So, instead, what do you need to do? You need to choose a position and a size during setup and then draw the square like normally in the draw function. That means we’re going to need to introduce a new technique to choose a number in one place and use it in another: variables.

Variables are places to store information in a program. You can make a new variable with a special word called let. Add the following up above the setup function so that your program looks like this;

let sqX,sqY,sqS;

function setup() {
  createCanvas(400, 400);
  sqX = random(10,50);
  sqY = random(10,50);
  sqS = random(10,20);
}

function draw() {
  background(200,200);
  square(sqX,sqY,sqS);
}

Now, if you hit the play button repeatedly you’ll see that the position and size of the square is different each time but it stays in place until you hit play again.

What we’ve done is make variables to store the position and size and we had to make them at the beginning of the program so that the rest of the program can use these names for storage.

Now the next step is to add a color to the square, which we’ll do similarly, by adding a new variable to hold the color, using the color function to create an actual color, and then the fill function to set the color for the square when we put it down.

let sqX,sqY,sqS,sqC;

function setup() {
  createCanvas(400, 400);
  sqX = random(10,50);
  sqY = random(10,50);
  sqS = random(10,20);
  sqC = color(random(0,255),random(0,255),random(0,255));
}

function draw() {
  background(200,200);
  fill(sqC);
  square(sqX,sqY,sqS);
}

The thing I want to say about the color function is that it takes three numbers between 0 and 255, which represent the amount of red, green, and blue in the color. color(0,0,0) is black and color(255,255,255) is white.

If you test out this code, you’ll now see a random color picked as well as position and size.

In the next section, we’re going to introduce loops in order to make many different shapes at once!