p5.js | doubleClicked() Function

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

let colorVal = 0;
  
function setup() {
  createCanvas(500, 300);
  textSize(24);
}
  
function draw() {
  clear();
  
  // apply fill based on the red component
  fill(colorVal, 128, 255 - colorVal)
  
  text("Double click to change the color", 20, 20);
  circle(150, 150, 200);
}
  
function doubleClicked() {
  // change the value if
  // the event occurs
  if (colorVal < 255)
    colorVal += 50;
  else
    colorVal = 0;
}

chevron_right


Output:

Example 2: Accessing the details of the MouseEvent object.

filter_none

edit
close

play_arrow

link
brightness_4
code

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) {
  // get the x and y location
  // of the double click
  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);
}

chevron_right


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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.