La función mouseMoved() en p5.js se llama cada vez que el mouse se mueve y no se presiona un botón del mouse.
Sintaxis:
mouseMoved(Event)
Parámetros: esta función acepta un evento de parámetro único, que es opcional.
Los siguientes programas ilustran la función mouseMoved() en p5.js:
Ejemplo 1: Este ejemplo usa la función mouseMoved() para cambiar el color del rectángulo cuando el mouse se mueve.
function setup() {
// Create Canvas of size 500*500
createCanvas(500, 500);
}
let value = 0;
function draw() {
// SEt background color
background(200);
// Set the filled color
fill(value);
// Create rectangle of given size
rect(25, 25, 460, 440);
// Set the text color
fill('lightgreen');
// Set font size
textSize(15);
// Display the text
text('Move Mouse Across the page to change its value.',
windowHeight/6, windowWidth/4);
}
function mouseMoved() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
Producción:
Ejemplo 2: Este ejemplo usa la función mouseMoved() para cambiar el color de la elipse.
// Declare a variable
let value;
function setup() {
// Create Canvas of size 500*500
createCanvas(500, 500);
}
function draw() {
// Set background color
background(200);
// fill color according to
// mouseMoved() function
// Set the color
fill(value, value, value);
// Draw ellipse
ellipse(mouseX, mouseY, 115, 115);
}
function mouseMoved() {
value = mouseX%255;
}
Producción:
Referencia: https://p5js.org/reference/#/p5/mouseMoved
Publicación traducida automáticamente
Artículo escrito por sarthak_ishu11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA