↔️ Interaction

Do Now (In Google Classroom)

What is a variable?
How did we create variables in Python?
How did we create variables in JavaScript?
Why do we user variables in code?

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:

Push yourself for a 4!

Can you make your fill() or stroke() as you move the mouse?