Some p5 building blocks

Today’s starting point sketch is a solution to the starred challenge from the previous in-class activity. Open today’s sketch, click the play button, study the code, and notice what does and doesn’t make sense to you.

Once you’re ready for some new experiments, find this line:

var sides = 6

…and change it to:

var sides = random(3, 8)

Click the play button and note the results. Click the play button again, multiple times. What’s happening? Why?

What do the 3 and 8 mean in random(3, 8)? Why are there two numbers, and what does each of them mean? Form a theory. What are some experiments that could test your theory? Do those experiments!

Try making size random as well.

Can you make strokeWeight random? What about the background color? Tinker and see if you can figure it out.

At the end of the sketch, add this text:

function draw() {
  
}

(It is OK to copy and paste that; you don’t need to retype it by hand.)

Notice how the curly braces { group lines of code together }. Each of those groups is called a block of code. Notice that there are two blocks of code in the file, and each block is a function.

Notice how some of the lines of code are indented: the line starts with a few spaces. This indentation is there to help our human eyes see where the blocks of code begin and end. In some languages, you must to indent code correctly for the computer’s sake, but in p5 the indentation is only there to help you. Notice how the indentation helps you see at a glance how the code is grouped into blocks: there is a setup function full of code, and a draw function that is empty.

Using cut and paste, move all of the code from var size = … all the way down to the last turtle.draw(…) out of the setup function and inside the draw function.

What happens? Why?

Again: form a theory about what’s happening. Is there a way you can test that theory? Puzzle over it, and then here’s a partial answer:

The code in setup runs just once when you first press the play button. The code in draw runs over and over, many times per second. You can use draw to create animation.

This division of labor between setup and draw is the foundation of Processing / p5 programs.

What if you move just some of the code into draw? What error messages do you get? Do any of those errors make any sense? Even when they don’t make sense, can you form some guesses about why some things work and other things break? Try breaking the code on purpose by moving the lines of code between blocks.

Get your code back to the point where everything from var size onward is inside of draw, so that your setup looks like this:

function setup() {
  createCanvas(600, 600)
  strokeWeight(2)
  background(240)
}

In the following line of code, what are the two numbers?

var turtle = new Turtle(300, 300)

Try changing them. Do some experiments. For a theory, then check your answer:

Those numbers specify the starting position of the turle on the screen. The first number is the x position (horizontal), and the second number is the y position (vertical). Because the canvas size is (600, 600), the position (300, 300) is in the middle of the canvas.

In the draw function, p5 gives you two magic variables named mouseX and mouseY. Change the x and y starting position of the turtle to use those two variables instead of 300. Run it.

Now move this line inside of draw too, as the very first line of the block:

background(240)

What happens? Why?

What happens if you move that to the end of draw? To the middle, in between the lines that make the turtle draw and turn? Puzzle over it. Form some theories.

Now try using mouseX and mouseY to change size and sides (or angle). Have some fun playing with that.

Move the line that sets the background color back to the top of draw.

Alter that line so that it takes three numbers:

background(240, 105, 72)

Here is an online color picker you can play with to see what those three numbers mean, and how they create colors: RGB Color Picker.

Try playing with some combinations of random numbers and mouse values to animate the background color.

Now add a fourth number:

background(240, 105, 72, 80)

What happens? Why? (The RGB Color Picker web site I gave you may provide a hint…but will also mislead you. Trust your own observations and experiments.)

Play with that number. Play with the combinations of everything you’ve encountered today. Make something cool!