Week 5 - Variables, Objects, and Interaction == Week 5 @ Material ITP1 Notes - Ali Gunduz. pdf V Lesson 3.1 - Interaction with built in variables and events Variables : In P5.js, variables are useful if we want to start adding animations and interactions to the program. · Variables are placeholders that save and store information in areas computer's memory. v mousex : . The system variable mousex always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. // Move the mouse across the canvas function draw( ) { background (244, 248, 252); Line(mousex, 0, mousex, 100); describe('horizontal black line moves left and right with mouse x-position' ) ; } mouseY : · The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. // Move the mouse across the canvas function draw( ) { background (244, 248, 252); Line(0, mouseY, 100, mouseY) ; Week 5 - Variables, Objects, and Interaction 1
} describe('vertical black line moves up and down with mouse y-position' ) ; V width : . System variable that stores the width of the drawing canvas. v height : . System variable that stores the height of the drawing canvas . Events . Events are built-in functions that terminate the draw() function once to run the block of code inside it. V mousePressed ( ) : · Function is called once after every time a mouse button is pressed. // Click within the image to change // the value of the rectangle let value = 0; function draw( ) { fill(value); rect(25, 25, 50, 50); describe('black 50-by-50 rect turns white with mouse click/press. ') ; } function mousePressed( ) { if (value === 0) { value = 255; } else { value = 0; } } V mouseReleased ( ) : . It is a function called every time a mouse button is released. // Click within the image to change // the value of the rectangle // after the mouse has been clicked let value = 0; function draw( ) { fill(value); rect(25, 25, 50, 50); describe('black 50-by-50 rect turns white with mouse click/press. ') ; Week 5 - Variables, Objects, and Interaction 2
} function mouseReleased( ) { if (value === 0) { value = 255; } else { value = 0; } } v mouseMoved ( ) : . A function that is called every time the mouse is moved and a button is not pressed. // Move the mouse across the page // to change its value let value = 0; function draw( ) { fill(value); rect(25, 25, 50, 50); describe( black 50-by-50 rect becomes lighter with mouse movements until white then resets no image displayed ) ; } function mouseMoved ( ) { value = value + 5; if (value > 255) { value = 0; } } mouseDragged ( ) ; . A function that is called every time the mouse is moved and a