MouseX MouseY

In this lesson we will take our first look at variables. Think of a variable as a location in the computer’s memory where you can store and retrieve information.

Example

Move your mouse over the screen. What happens?

Video Explanation

mouseX mouseY

The system variables mouseX and mouseY always contains the current horizontal and vertical position of the mouse, relative to (0, 0) of the canvas.

pmouseX pmouseY

The system variable pmouseX and pmouseY always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.

mousePressed()

The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined.

Comprehension Check

Assignment

Create a simple drawing program using p5.js. Your program should allow the user to interactively draw on a digital canvas with their mouse. Things to consider:

• How will you clear the screen?
• How will the mark that the user makes be drawn continuously or will they be able to tell the computer when they want to draw and when they don’t want to draw?
• Can the user choose more than one colors?
• EXTRA CREDIT Can you make it so that you can draw a continuous line instead of a series of dots?

In order to receive full credit, you must write a well formatted sketch that calls setup() draw() mouseX mouseY and at least two event functions. The complete list of event functions and variables can be found here

Submit a link to your p5.js sketch on Google Classroom

---