Skip to content
Related Articles
Open in App
Not now

Related Articles

p5.js | Mouse | mouseButton

Improve Article
Save Article
  • Last Updated : 16 Apr, 2019
Improve Article
Save Article

The mouseButton variable in p5.js is used to get automatically which kind of key is pressed on mouse. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last.

Syntax:

mouseButton

Below programs illustrate the mouseButton variable in p5.js:

Example 1: This example uses mouseButton variable to detect the mouse button.




function setup() {
      
    // Create canvas
    createCanvas(500, 500);
}
   
function draw() {
      
    // Set background color
    background(237, 34, 93);
      
    // Fill color
    fill(0);
   
    if (mouseIsPressed) {
        if (mouseButton === LEFT) {
            ellipse(height/2, width/2, 100, 100);
        }
        if (mouseButton === RIGHT) {
            rect(height/2, width/2, 100, 100);
        }
    }
}

Output:

Example 2: This example uses mouseButton variable to detect the mouse button.




function setup() {
      
    // Create canvas
    createCanvas(500, 500);
      
    // Set the text size
    textSize(40); 
}
   
function draw() {
      
    // Set background color
    background(237, 34, 93);
      
    // Set the text color
    fill(255);
      
    // Check the status of the mouse
    if (mouseIsPressed) {
        text(mouseButton, height/2, width/2);
    }
}

Output:

Reference: https://p5js.org/reference/#/p5/mouseButton


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!