✖ = Variables
Unit 1 – Algorithms and p5 | September 25Part 1
Do Now
What’s a variable?
From the AP:
Program instructions may involve variables that are initialized and updated, read, and written
Meaningful names for variables and procedures help people better understand programs.
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
andstrokeWeight
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:
- Declare (ex.
var xpos
) - Initialize (ex.
var xpos = 50
) - Use (ex.
ellipse(xpos, 100, 50, 50);
)