p5.js mouseClicked() Function

Last Updated : 4 Mar, 2021
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. javascript 
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: javascript 
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
Comment

Explore