Open In App

p5.js Mouse mouseIsPressed

Last Updated : 03 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The mouseIsPressed system variable in p5.js is used to store the boolean value. If the mouse is pressed then it stores True otherwise stores False.

Syntax:

mouseIsPressed

CDN link: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>

Example 1: This example uses mouseIsPressed variable to check mouse is pressed or not.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>
</head>

<body>

</body>
<script>

    function setup() {

        // Create canvas of given size
        createCanvas(500, 250);

        // Set the text size
        textSize(30);
    }

    function draw() {

        // Set the background color
        background('green');

        fill('white');

        // If mouse is pressed then if part will 
        // execute otherwise else part will execute
        if (mouseIsPressed) {
            text("Mouse is Pressed", 120, 100);
        }
        else {
            text("Mouse is Released", 120, 100);
        }
    }


</script>

</html>

Output:

Example 2: This example uses mouseIsPressed variable to check mouse is pressed or not so that it can change the shape of the given canva.

javascript 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>
</head>

<body>

</body>
<script>

    function setup() {

        // Create Canvas of given size
        createCanvas(300, 150);
    }

    function draw() {

        // Set the background color
        background('green');

        fill('white');

        // Use mouseIsPressed variable
        if (mouseIsPressed) {
            ellipse(50, 50, 50, 50);
        }
        else {
            rect(25, 25, 50, 50);
        }
    }
</script>

</html>

Output:

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


Next Article
p5.js mouseMoved() Function
author
sarthak_ishu11
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox