p5.js mouseClicked() Function

The mouseClicked() function in p5.js works when mouse button pressed and released. The browsers may contain different default behaviors attached to various mouse events. To prevent the default behavior for this event, add “return false” to the end of the method.

Syntax:

mouseClicked(Event)

Below programs illustrate the mouseClicked() function in p5.js:

Example 1: This example illustrates the mouseClicked() function.

let valueX;
let valueY;

function setup() {

    // Create Canvas
    createCanvas(500, 500);
}

function draw() {

    // Set the background color
    background(200);

    // SEt the filled color
    fill('green');

    // Set the font size
    textSize(25);

    text('Click mouse to change color', 30, 30);

    // Fill color according to mouseClicked()
    fill(valueX, 255-valueY, 255-valueX);

    // Draw ellipse
    ellipse(mouseX, mouseY, 115, 115);
}

function mouseClicked() {
    valueX = mouseX%255;
    valueY = mouseY%255;
}

Output:

Example 2:

let valueX;
let valueY;

function setup() {

    // Create Canvas
    createCanvas(500, 500);
}

function draw() {

    // Set background color
    background(200);

    fill('green');

    // Set font size
    textSize(25);

    text('Click mouse to change color', 30, 30);

    // Fill color according to mouseMoved()
    fill(valueX, 255-valueY, 255-valueX);

    // Draw rectangle
    rect(mouseX, mouseY, 115, 115);

    fill(valueY, 255-valueX, 255-valueX);

    rect(mouseX, mouseY+115, 115, 115);
    fill(255-valueY, 255-valueX, 255-valueY);

    rect(mouseX-115, mouseY, 115, 115);
    fill(255-valueY, 255-valueY, 255-valueY);

    rect(mouseX-115, mouseY+115, 115, 115);
}

function mouseReleased() {
    valueX = mouseX%255;
    valueY = mouseY%255;
}

Output:

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