5.6 La función dist()

Processing nos proporciona la función  dist() para poder calcular la distancia entre dos puntos. La función precisa de cuatro parámetros para poder funcionar. El valor que devuelve en un número decimal (float) que debemos asignar a una nueva variable, vamos a ver como funciona en el siguiente ejemplo.

El código 5_5 que muestra la imagen hace lo siguiente:

Creamos una ventana de 580 por 580 pixeles dentro del bloque void setup() y lo cerramos. Abrimos void draw() y le decimos a nuestro programa que queremos que el fondo sea de color negro con la función background(0);


Creamos una nueva variable dentro de draw(), ya que queremos que los datos sean leídos cada frame. La variable es float d, ya que como ya hemos dicho, dist() devuelve decimales. dentro de dist(), le marcamos el centro de nuestra ventana, que lo calculamos con width/2. Es decir, la mitad del ancho, y height/2, la mitad de la altura. Ese es el primer punto desde el cual calcularemos la distancia.

Los dos siguientes parámetros son, mouseX, la posición del ratón en el eje X, y mouseY,  la posición del ratón en el eje Y. Datos que se actualizarán a 60 frames por segundo.

El último paso es asignar el valor del cálculo de la distancia que hemos guardado en la variable d  como diámetro de una elipse. Se posiciona el centro de nuestra elipse en el centro de la ventana con width/2 y height/2 de nuevo y multiplicamos el valor de d*2  para obtener el diámetro de nuestra elipse, que en este caso, variará dependiendo de donde esté posicionado el ratón.

El código 5_6 utiliza la función dist() del  siguiente modo:

Abrimos void setup() y asignamos un tamaño de pantalla de 580 por 580 pixeles y establecemos el color de los trazos en negro con una transparencia de 102. Cerramos void setup().

Abrimos draw() y creamos una variable para guardar números decimales (float) y la llamamos grosor. Utilizamos la función dist, para que nos calcule la distancia, entre la posición el ratón en el frame actual y la posición del ratón en el frame anterior. Lo que nos ofrece datos sobre la velocidad a la que se mueve el ratón por la pantalla.

Asignamos el valor guardado en grosor al grosor de los trazos con strokeWeight(). Y para finalizar, usamos line() con mouseX, mouseY y pmouseX y pmouseY, para dibujar una línea en nuestra ventana.

Dependiendo de la velocidad a la que movamos el ratón, mayor será el grosor de nuestra línea.

La función dist() es muy útil y la utilizaremos constantemente en nuestros programas. Recuerda que los valores devueltos los podemos usar para modificar el color, las dimensiones, el volumen de un archivo mp3 o determinar si nuestro ratón está situado encima de un botón o no. Volveremos a ver esta función integrada en nuestros programas durante este capítulo y los siguientes.