Original PromptI need a step by step guide for using mouse function in javascript for the p5.js program. Please include a project for a formative assessment
This resource focuses on utilizing p5.js mouse functions to create an interactive drawing application. It covers essential concepts such as the built-in variables mouseX and mouseY, which store the cursor's position on the canvas, and how these variables update in the draw() function. Students learn about p5.js's unique coordinate system where (0,0) is in the top-left corner, contrasting it with the traditional Cartesian grid. The document also explores the different types of mouse interactions, specifically distinguishing between 'mouseIsPressed' for continuous actions and 'mouseClicked()' for single events. Through practical activities, students will apply their understanding to build features like a square that changes size based on mouse input and ultimately create an interactive brush tool, demonstrating their mastery of mouse functions in p5.js and the importance of dynamic updates within the draw loop.