↔️ Variables & Interaction

Part 1

Do Now

What’s a variable?

Built-in Variables in p5

We’ve actually seen a few variables in p5 already.

Look at the code below:

What are mouseX and mouseY equal to? If you said “it keeps changing!” you’re absolutely right. These are variables.

Take a closer look at my code. How big is my canvas? If you said “it keeps changing!” you…get the idea. Also variables.

Exploring variables

✱ Create a canvas that is the width and height of the window.

✱ Draw a line() from the top middle of your screen (just below the camera) to your mouse cursor.

Hint: you will need variables to create the canvas. How could use those same variables to find half your screen?

It should look something like this:

Extend yourself! Give the line a different stroke and strokeWeight
Are you seeing a whole bunch of lines? How can you draw only one?
Can you “hang” a rectangle off the end of the line?

Back to the Drawing board Canvas

Go back to either your snowman or your own drawing, and add variables. But sure to use:

• windowWidth
• windowHeight
• mouseX
• mouseY

---

Part 2

🗣 User-defined variables

Steps to make a variable @ the top of your code:

1. Declare (ex. var xpos)
2. Initialize (ex. var xpos = 50)
3. Use (ex. ellipse(xpos, 100, 50, 50);)