La función mousePressed() en p5.js funciona cuando se hace clic con el mouse en el documento. La variable mouseButton se usa para especificar qué botón se presiona. La función touchStarted() se usa en lugar de la función mousePressed() si la función mousePressed() no está definida.
Sintaxis:
mousePressed(Event)
Los siguientes programas ilustran la función mousePressed() en p5.js:
Ejemplo 1: Este ejemplo usa la función mousePressed().
function setup() {
// Create Canvas
createCanvas(500, 500);
}
let value = 0;
function draw() {
// Set background color
background(200);
// Fill the color
fill(value, value-50, value-100);
// Create rectangle
rect(25, 25, 460, 440);
// Set the color of text
fill('lightgreen');
// Set font size
textSize(15);
// Display content
text('Keep on Clicking the Mouse Across'
+ 'the page \nto change Canvas Color.',
windowHeight/10, windowWidth/4);
}
function mousePressed() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
Producción:
Ejemplo 2:
let valueX;
let valueY;
function setup() {
// Create Canvas
createCanvas(500, 500);
}
function draw() {
// Set background color
background(200);
// Set the text color
fill('green');
// Set text size
textSize(25);
text('Drag mouse to change color', 30, 30);
// Fill color according to mouseMoved()
fill(valueX, 255-valueY, 255-valueX);
// Draw ellipse
ellipse(mouseX, mouseY, 115, 115);
}
function mousePressed() {
valueX = mouseX%255;
valueY = mouseY%255;
}
Producción:
Referencia: https://p5js.org/reference/#/p5/mousePressed
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