p5.js doubleClicked() Function
Last Updated :
18 Aug, 2023
The doubleClicked() function is invoked whenever a mouse or pointing device causes a dblclick event. This happens when the pointing device is clicked twice in quick succession on a single element. The MouseEvent callback argument could be used to access the details of the click.
Syntax:
doubleClicked([event])
Parameters: This function accepts a single parameter as mentioned above and described below:
- event: This is an optional MouseEvent callback argument. It can be used to access the click details.
The program below illustrate the doubleClicked() function in p5.js:
Example 1: Using double click to change the fill color.
let colorVal = 0;
function setup() {
createCanvas(500, 300);
textSize(24);
}
function draw() {
clear();
fill(colorVal, 128, 255 - colorVal)
text( "Double click to change the color" , 20, 20);
circle(150, 150, 200);
}
function doubleClicked() {
if (colorVal < 255)
colorVal += 50;
else
colorVal = 0;
}
|
Output:
Example 2: Accessing the details of the MouseEvent object.
let y = 60;
function setup() {
createCanvas(500, 200);
textSize(16);
text( "Double click the mouse to see doubleClicked() function fire" , 10, 20);
}
function doubleClicked(event) {
locationX = event.x;
locationY = event.y;
locString = "Mouse was double clicked at location: "
+ locationX + ", " + locationY;
text(locString, 10, y);
y = y + 20;
console.log(event);
}
|
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/doubleClicked
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...