La función mouseDragged() en p5.js se usa para verificar los arrastres del mouse (movimientos del mouse y botón del mouse presionado). Se invoca cada vez que se arrastra el ratón. Si la función mouseDragged() no está definida, se utilizará la función touchMoved() en lugar de la función mouseDragged().
Sintaxis:
mouseDragged(Event)
Los siguientes programas ilustran la función mouseDragged() en p5.js:
Ejemplo 1: Este ejemplo usa la función mouseDragged() para cambiar el color de fondo.
function setup() {
// Create Canvas
createCanvas(500, 500);
}
let value = 0;
function draw() {
// Set background color
background(200);
// Set filled color
fill(value);
// Create rectangle
rect(25, 25, 460, 440);
// Set text color
fill('lightgreen');
// Set font size
textSize(15);
// Display result
text('Drag Mouse Across the page to change its value.',
windowHeight/6, windowWidth/4);
}
function mouseDragged() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
Producción:
Ejemplo 2: Este ejemplo usa la función mouseDragged() para cambiar el color del círculo del cursor del mouse.
let value;
function setup() {
// Create Canvas
createCanvas(500, 500);
}
function draw() {
// Set background color
background(200);
// Set filled color
fill('green');
// Set text and text size
textSize(25);
text('Drag mouse to change color', 30, 30);
// Fill color according to
// mouseMoved() function
fill(value, 255-value, 255-value);
// Draw ellipse
ellipse(mouseX, mouseY, 115, 115);
}
function mouseDragged() {
value = mouseX%255;
}
Producción:
Referencia: https://p5js.org/reference/#/p5/mouseDragged
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