La función mouseClicked() en p5.js funciona cuando se presiona y suelta el botón del mouse. Los navegadores pueden contener diferentes comportamientos predeterminados adjuntos a varios eventos del mouse. Para evitar el comportamiento predeterminado de este evento, agregue «return false» al final del método.
Sintaxis:
mouseClicked(Event)
Los siguientes programas ilustran la función mouseClicked() en p5.js:
Ejemplo 1: Este ejemplo ilustra la función mouseClicked().
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;
}
Producción:
Ejemplo 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;
}
Producción:
Referencia: https://p5js.org/reference/#/p5/mouseReleased
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