↔️ 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
strokeandstrokeWeight
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:
windowWidthwindowHeightmouseXmouseY
Push yourself for a 4!
Can you make your fill() or stroke() as you move the mouse?