p5.js | función rueda del ratón()

La función mouseWheel() se invoca cada vez que el desplazamiento del mouse o del panel táctil provoca un evento de rueda vertical del mouse. Se puede acceder a este evento para determinar las propiedades del pergamino. La propiedad delta devuelve la cantidad de desplazamiento que tuvo lugar. Este valor puede ser positivo o negativo dependiendo de la dirección del desplazamiento.

La función de devolución de llamada puede tener que terminar con «return false»; declaración para evitar cualquier comportamiento predeterminado que pueda estar asociado con el desplazamiento en diferentes navegadores.

Sintaxis:

mouseWheel( event )

Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:

• event: este es un argumento de devolución de llamada WheelEvent opcional, que se puede usar para acceder a los detalles de desplazamiento.

Los siguientes ejemplos ilustran la función mouseWheel() en p5.js:

Ejemplo 1: usar el evento de desplazamiento para cambiar el color cuando se desplaza

let red = 0;
   
function setup() {
    createCanvas(750, 300);
    textSize(24);
}
   
function draw() {
    clear();
   
    // Apply fill based on the
    // red component
    fill(red, 0, 0)
   
    text("Scroll the mouse wheel to "
            + "change the red component"
            + " of the color", 20, 20);
      
    circle(150, 150, 200);
}
   
function mouseWheel(event) {
    
    // Change the red value according
    // to the scroll delta value
  red += event.delta;
}

Producción:

Ejemplo 2: Mostrar las propiedades de desplazamiento

let scrollDelta = 0;
   
function setup() {
    createCanvas(500, 200);
    textSize(24);
    text("Scroll the mouse to see the"
        + " scroll details.", 10, 20);
}
   
function mouseWheel(event) {
    scrollDelta = event.delta;
   
    clear();
    deltaString = "Current mouse delta is: "
                    + scrollDelta;
    
    text(deltaString, 10, 20);
   
    if (scrollDelta > 0) {
        text("You are scrolling downwards", 10, 40);
    } 
    else {
        text("You are scrolling upwards", 10, 40);
    }
}

Producción:

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Referencia: https://p5js.org/reference/#/p5/mouseWheel