p5.js mouseClicked() Function

0 0 1 minute read

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, zambiatek 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!