Embedded Files
Con P5js podemos usar el mouse en una variedad de maneras.
Seguir cursor del mouse
Como el código está ejecutándose continuamente, podemos seguir la posición del ratón y usar estos números para mover elementos en la pantalla.
Como el código está ejecutándose continuamente, podemos seguir la posición del ratón y usar estos números para mover elementos en la pantalla.
En este ejemplo, cada vez que se ejecuta el código del bloque draw(), se añade un nuevo círculo al lienzo. Los dos primeros parámetros se completan con mouseX y mouseY para que el centro se dibuje en las coordenadas del cursor. Esta imagen fue hecha moviendo el ratón para controlar la posición del círculo.
Como la función de relleno está configurada para ser parcialmente transparente, las áreas negras más densas muestran dónde el ratón estuvo más tiempo o se movió más lento. Los círculos que están más separados muestran dónde el ratón estuvo moviéndose más rápido
Las variables pmouseX y pmouseY también pueden ser usadas para calcular la velocidad del mouse. Esto se hace midiendo la distancia entre la posición actual y la más reciente del mouse.
Si el mouse se mueve lentamente, la distancia es pequeña, pero si se empieza a mover más rápido, la distancia se incrementa. Una función llamada dist() simplifica este cálculo, como se muestra en el ejemplo.
Aquí, la velocidad del ratón es usada para definir el grosor de la línea dibujada.
Click
Click
Sin presionar
Presionando
Además de la ubicación del ratón, p5.js también mantiene registro de si el botón del ratón es presionado o no. La variable mouseIsPressed es una variable booleana, tiene un valor distinto cuando el botón del ratón está presionado = true (verdadero) y cuando no = false (falso) .
p5.js también lleva registro de qué botón del ratón es presionado, si es que tienes más de uno en tu ratón. La variable mouseButton puede tener uno de estos tres valores: LEFT (izquierdo), CENTER (centro), o RIGHT (derecho)
Sin presionar
Presionando la tecla izquierda
Presionando la tecla derecha
Detección de no hacer click
Detección de no hacer click
Un bloque if te da la oportunidad de ejecutar una porción de código o de ignorarla. Puedes extender la funcionalidad del bloque if con un bloque else, permitiendo que tu programa escoja entre dos opciones. El código dentro del bloque else se ejecuta cuando el valor de la prueba del bloque if es false. Por ejemplo, el color de trazado de un programa puede ser blanco cuando el botón del ratón no es presionado y puede cambiar a negro cuando sí es presionado:
Sin presionar
Presionando
Page updated
Google Sites
Report abuse