p5.js mouseReleased() Function
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.
function setup() {
createCanvas(500, 500);
}
let value = 0;
function draw() {
background(200);
fill(value, value-50, value-100);
rect(25, 25, 460, 440);
fill( 'lightgreen' );
textSize(15);
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.
let valueX;
let valueY;
function setup() {
createCanvas(500, 500);
}
function draw() {
background(200);
fill( 'green' );
textSize(25);
text( 'Drag mouse to change color' , 30, 30);
fill(valueX, 255-valueY, 255-valueX);
ellipse(mouseX, mouseY, 115, 115);
}
function mouseReleased() {
valueX = mouseX%255;
valueY = mouseY%255;
}
|
Output:
Reference: https://p5js.org/reference/#/p5/mouseReleased
Last Updated :
04 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...