p5.js Element mouseOut() Method

The mouseOut() method of p5.Element in p5.js is invoked whenever the user moves the mouse pointer out of the element. It can be used to attach event listeners to an element.

Syntax:

mouseOut( fxn )

Parameters: This function accepts a single parameter as mentioned above and described below:

fxn: It is a function to be fired whenever the mouse is moved off the element. A value of false can also be passed to it for preventing the previous function to fire.

The example below illustrates the mouseOut() method in p5.js:

Example:

Javascript

function setup() { 
    canv = createCanvas(550, 300); 
    textSize(20); 
  
    text("Move the mouse over the canvas " + 
        "to change its color", 20, 20); 
  
    canv.mouseOver(changeColor); 
  
    // Specify the callback function 
    // when the mouse is moved out of 
    // an element 
    canv.mouseOut(origColor); 
} 
  
function changeColor() { 
    background("green"); 
  
    text("The mouse has been moved over " + 
        "the canvas!", 20, 60); 
  
    text("Move the mouse over the canvas " + 
        "to change its color", 20, 20); 
} 
  
function origColor() { 
    background("white"); 
  
    text("The mouse has been moved off " + 
        "the canvas!", 20, 60); 
  
    text("Move the mouse over the canvas to " + 
        "change its color", 20, 20); 
} 

Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.w3wiki.net/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Element/mouseOut

Tags:

#JavaScript-p5.js #JavaScript #Web Technologies

Express.js Tutorial

HTML5 MathML framespacing Attribute

p5.js Element mouseOut() Method

Javascript

Contact Us