p5.js mouseReleased() Function

Last Updated : 4 Mar, 2021
The mouseReleased() function in p5.js works when mouse button released. The touchEnded() function is used instead of mouseReleased() function when mouseReleased() function is not defined. Syntax: 
mouseReleased(Event)
Below programs illustrate the mouseReleased() function in p5.js: Example 1: This example uses mouseReleased() function to change the background color. javascript 
function setup() {
    
    // Create Canvas
    createCanvas(500, 500);
}
 
let value = 0;

function draw() {
    
    // Set the background color
    background(200);
    
    // Fill the color
    fill(value, value-50, value-100);
    
    // Create rectangle
    rect(25, 25, 460, 440);
    
    // Set the filled color
    fill('lightgreen');
    
    // Set the font size
    textSize(15);
    
    // Display result
    text('Keep on Clicking the Mouse Across'
        + ' the page \nto change Canvas Color.',
        windowHeight/10, windowWidth/4);
}

function mouseReleased() {
    value = value + 5;
    
    if (value > 255) {
        value = 0;
    }
}
Output: Example 2: This example uses mouseReleased() function to change the mouse pointer color. javascript 
let valueX;
let valueY;

function setup() {
    
    // Create Canvas
    createCanvas(500, 500);
}
 
function draw() {
    
    // Set background color
    background(200); 
    
    // Fill the color
    fill('green');
    
    // Set font size
    textSize(25);
    
    text('Drag mouse to change color', 30, 30);
    
    // Fill color according to mouseMoved() 
    fill(valueX, 255-valueY, 255-valueX);
    
    // Draw ellipse  
    ellipse(mouseX, mouseY, 115, 115);
}

function mouseReleased() {
    valueX = mouseX%255;
    valueY = mouseY%255;
}
Output: Reference: https://p5js.org/reference/#/p5/mouseReleased
Comment

Explore