p5.js mousePressed() Function
Last Updated :
04 Mar, 2021
The mousePressed() function in p5.js works when mouse clicked on the document. The mouseButton variable is used to specify which button is pressed. The touchStarted() function is used instead of mousePressed() function if mousePressed() function is not defined.
Syntax:
mousePressed(Event)
Below programs illustrate the mousePressed() function in p5.js:
Example 1: This example uses mousePressed() function.
function setup() {
createCanvas(500, 500);
}
let value = 0;
function draw() {
background(200);
fill(value, value-50, value-100);
rect(25, 25, 460, 440);
fill( 'lightgreen' );
textSize(15);
text( 'Keep on Clicking the Mouse Across'
+ 'the page \nto change Canvas Color.' ,
windowHeight/10, windowWidth/4);
}
function mousePressed() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
|
Output:
Example 2:
let valueX;
let valueY;
function setup() {
createCanvas(500, 500);
}
function draw() {
background(200);
fill( 'green' );
textSize(25);
text( 'Drag mouse to change color' , 30, 30);
fill(valueX, 255-valueY, 255-valueX);
ellipse(mouseX, mouseY, 115, 115);
}
function mousePressed() {
valueX = mouseX%255;
valueY = mouseY%255;
}
|
Output:
Reference: https://p5js.org/reference/#/p5/mousePressed
Share your thoughts in the comments
Please Login to comment...