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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
