Intro a Processing v43-01 - Act2015 - 13

1

Punto 13 – Otras funciones matemáticas

Función sq() – Cuadrado

Para calcular el cuadrado de un número usamos la función sq(). La misma nos regresa el resultado,el cual será siempre un número positivo aunque usemos un valor negativo.

sq(valor)

float x = sq(1); // Asigna 1.0 a x: equivalente a 1 * 1float y = sq(5); // Asigna 25.0 a y: equivalente a 5 * 5float z = sq(9); // Asigna 81.0 a z: equivalente a 9 * 9

Función sqrt() – Raíz cuadrada

La función sqrt() es usada para calcular la raíz cuadrada de un número. La misma regresa elresultado.

sqrt(valor)

Recordemos que también lo podemos expresar de la siguiente manera: (√a) == (a1/2)

float r = sqrt(6561); // asigna 81.0 a rfloat s = sqrt(625); // asigna 25.0 a sfloat t = sqrt(1); // asigna 1.0 a t

Función pow() – Potenciación

La función pow() calcula la potencia en función de dos términos: base y exponente. La mismaregresa el resultado.

pow(base, exponente)

Recordemos que, cuando el exponente es una fracción irreducible, también lo podemos expresar dela siguiente manera: (m√an) == (an/m)

float d = pow(1, 3); // Asigna 1.0 a d: equivalente a 1*1*1float e = pow(3, 4); // Asigna 81.0 a e: equivalente a 3*3*3*3float f = pow(3, 2); // Asigna 0.11 a f: equivalente a 1 / (3*3)float g = pow(3, 3); // Asigna 27.0 a g: equivalente a 3*3*3

Función norm() – Normalización

Muchas veces se vuelve conveniente convertir un rango de números dados al rango 0.0 a 1.0. A esteprocedimiento se lo llama normalización.

Entornos de desarrollo de imagen generativa Universidad Nacional de QuilmesDocente: Raúl F. Lacabanne | URL: http://raullacabanne.com.ar/

2

Cuando multiplicamos números entre 0.0 y 1.0, el resultado nunca será menor a 0.0 ni mayor a 1.0.Esto permite no salir de un rango determinado.Desde luego que todas las operaciones de normalización deben ser realizadas con el tipo de datofloat. Para normalizar un número debemos dividirlo por el valor máximo que este represente. Porejemplo: para normalizar una serie de valores entre 0.0 y 255.0, divida cada uno por 255.0:

Valor inicial Cálculo Valor normalizado

0.0 0.0 / 255.0 0.0

102.0 102.0 / 255.0 0.4

255.0 255.0 / 255.0 1.0

Para simplificar esta tarea podemos utilizar la función norm():

norm(valor_a_convertir, valor_mínimo, valor_máximo)

Si el valor a convertir se encuentra fuera del rango, el resultado podrá ser menor a 0.0 o mayor a 1.0de acuerdo al caso.

float x = norm(0.0, 0.0, 255.0); // Asigna 0.0 a xfloat y = norm(102.0, 0.0, 255.0); // Asigna 0.4 a yfloat z = norm(255.0, 0.0, 255.0); // Asigna 1.0 a z

Función lerp() – Interpolación lineal

Luego de analizar la función de normalización, veamos que es la interpolación lineal. Por ejemplo,para pasar de un rango entre 0.0 y 1.0 al rango entre 0.0 y 500.0, simplemente podemos multiplicarpor 500.0. Para convertir números entre 0.0 y 1.0 al rango que se extiende entre 200.0 y 500.0,multiplicamos por 300 y luego sumamos 200.

Veamos a continuación algunos ejemplos de conversión:

Rango inicial de x Rango de destino de x Conversión

0.0 a 1.0 0.0 a 255.0 x * 255.0

0.0 a 1.0 -1.0 a 1.0 (x * 2.0) - 1.0

0.0 a 1.0 -20.0 a 60.0 (x * 80.0) - 20.0

Para simplificar esta tarea en Processing podemos utilizar la función lerp(). La misma presentatres parámetros:

lerp(min, max, valor)

Donde min = valor mínimo del rango a interpolar, max = valor máximo del rango a interpolar, yvalor = valor a interpolar. El tercer parámetro (valor) debe ser siempre un valor entre 0.0 y 1.0.


3

Veamos algunos ejemplos:float r = lerp(20.0, 60.0, 0.0); // Asigna 20.0 a rfloat s = lerp(20.0, 60.0, 0.5); // Asigna 20.0 a sfloat t = lerp(20.0, 60.0, 1.0); // Asigna 60.0 a t

Función map() – Mapeo

Existe otra función muy útil vinculada a las dos anteriores: hablamos de la función map(). Condicha función podemos convertir directamente un valor correspondiente a un rango de números aotro correspondiente a otro rango de números.

Posee cinco parámetros:

map(valor, mínimo1, máximo1, mínimo2, máximo2)

Donde valor corresponde al número de origen a mapear, mínimo1 y máximo1 a los números delrango origen, y mínimo2 y máximo2 a los números del rango de destino.

El próximo ejemplo muestra el uso de map() para convertir valores del rango de origen 0 a 255 al rango de destino -1 a 1. Este proceso equivale a, primero, normalizar el valor, y luego a multiplicar y sumar para desplazar el rango de 0 a 1 al rango -1 a 1:float x = map(20.0, 0.0, 255.0, 1.0, 1.0); // Asigna 0.84 a xfloat y = map(0.0, 0.0, 255.0, 1.0, 1.0); // Asigna 1.0 a yfloat z = map(255.0, 0.0, 255.0, 1.0, 1.0); // Asigna 1.0 a z

Función constrain() – Limitación de rangos

La función constrain() permite limitar un número a un rango determinado. Trabaja con enteros odecimales. Posee tres parámetros:

constrain(valor, mínimo, máximo)

Donde valor corresponde al número a limitar, mínimo al valor mínimo posible y máximo al valormáximo posible. Esta función regresa el número mínimo si el parámetro valor es menor oequivalente al antedicho, regresa el número máximo si el mismo es mayor o equivalente, y regresavalor si se encuentra en el rango previsto:int x = constrain(35, 15, 90); // Asigna 35 a xint y = constrain(10, 15, 90); // Asigna 15 a yint z = constrain(91, 15, 90); // Asigna 90 a z

Veamos otro ejemplo:// Limitar la posición de una elipse a una región determinada

void setup() {


4

size(100, 100); smooth(); noStroke();}

void draw() { background(0);

// Limita mx entre 35 y 65 float mx = constrain(mouseX, 35, 65);

// Limita my entre 40 y 60 float my = constrain(mouseY, 40, 60);

fill(102); rect(20, 25, 60, 50); fill(255); ellipse(mx, my, 30, 30);}

Función dist() – Distancia entre coordenadas

La función dist() calcula la distancia entre dos coordenadas. Trabaja con enteros o decimales,pero regresa decimales. Posee cuatro parámetros:

dist(x1, y1, x2, y2)

El primer par de parámetros corresponde a la primera coordenada y el segundo par a la segunda.

Veamos algunos ejemplos:float r = dist(0, 0, 50, 0); // Asigna 50.0 a rfloat s = dist(50, 0, 50, 90); // Asigna 90.0 a sfloat t = dist(30, 20, 80, 90); // Asigna 86.023254 a t

Y a continuación dos ejemplos más desarrollados:// La distancia entre el centro de la ventana de representación// y el puntero determina el diámetro del círculo

void setup() { size(100, 100); smooth();}

void draw() { background(0); float d = dist(width/2, height/2, mouseX, mouseY); ellipse(width/2, height/2, d*2, d*2);}

// Dibujo de una grilla de círculos y cálculo de la


5

// distancia de cada uno de ellos para determinar el tamaño

float distanciaMax;

void setup() { size(100, 100); noStroke(); smooth(); fill(0); distanciaMax = dist(0, 0, width, height);}

void draw() { background(204); for (int i = 0; i <= width; i += 20) { for (int j = 0; j <= height; j += 20) { float distanciaMouse = dist(mouseX, mouseY, i, j); float diametro = (distanciaMouse / distanciaMax) * 66.0; ellipse(i, j, diametro, diametro); } }}

Técnica de aligeramiento (easing)

La técnica de animación llamada easing, es en realidad una técnica de interpolación entre dospuntos. Al mover en cada cuadro una fracción de la distancia total de una figura, el movimiento deesta parece desacelerarse (o acelerarse) al acercarse a la ubicación de destino.El siguiente diagrama muestra qué ocurre cuando un punto siempre se mueve la mitad del recorridoentre su posición actual y la posición de destino:

A medida que la figura se acerca a la posición de destino, la distancia recorrida disminuye en cadafotograma, por lo tanto el movimiento de la misma parece "ralentizarse".

En el siguiente ejemplo la variable x corresponde a la posición horizontal actual del círculo y lavarible destinoX corresponde a la posición de destino. La variable easing dispone la fracción de ladistancia entre la posición actual del círculo y la posición del ratón que el círculo se mueve en cadacuadro. El valor de esta variable cambia la velocidad con que el círculo llega al destino. El valor deeasing debe estar siempre entre 0.0 y 1.0, y los números cercanos a 0.0 causan que el movimientose ralentice más. Un valor de easing de 0.5 hará que el círculo se mueva la mitad de la distancia en


6

cada cuadro, mientras que un valor de 0.01 hará que el círculo se mueva una centésima de ladistancia en cada cuadro. El círculo superior es dibujado de acuerdo a la posición destinoX,mientras que el círculo inferior es dibujado de acuerdo a la posición interpolada.Ahora sí veamos el ejemplo:float x = 0.0; // Distancia actual en xfloat easing = 0.05; // Números 0.0 a 1.0


void draw() { background(0); float destinoX = mouseX; x += (destinoX x) * easing; ellipse(mouseX, 30, 40, 40); ellipse(x, 70, 40, 40);}

En el siguiente ejemplo utilizamos dos variables para controlar la técnica easing en las dosdimensiones. Observe que estructuralmente es igual al anterior:float x = 0; // Distancia actual en xfloat y = 0; // Distancia actual en yfloat easing = 0.05; // Números 0.0 a 1.0

void setup() { size(100, 100); smooth(); noStroke();}

void draw() { background(0); float destinoX = mouseX; float destinoY = mouseY; x += (destinoX x) * easing; y += (destinoY y) * easing; fill(255); ellipse(x, y, 40, 40); //Círculo blanco grande interpolado fill(153); ellipse(mouseX, mouseY, 20, 20); //Círculo gris pequeño destino}

Los dos ejemplo previos continúan realizando el cálculo para la posición del círculo incluso luegode haber alcanzado su destino. Desde el punto de vista informático resulta ineficiente, y si hubierancientos de círculos todos aligerando las posiciones, esto ralentizaría el programa en general.Para detener los cálculos cuando estos no son necesarios, evalúe que la posición de destino y laposición actual sean equivalentes y detenga el cálculo si esta condición resulta verdadera.El siguiente ejemplo presenta el uso de la función abs() la cual devuelve el valor absoluto de unnúmero.


7

Esta es necesaria ya que los valores resultantes de la técnica easing pueden ser tanto negativoscomo positivos dependiendo de si la posición se encuentra a la izquierda o a la derecha del destino.float x = 0.0; // Distancia actual en xfloat easing = 0.05; // Números 0.0 a 1.0


void draw() { background(0); float destinoX = mouseX;

// Distancia desde l posición hasta el destino float dx = destinoX x;

// Si la distancia entre la posición actual y el destino // es mayor a 1.0, actualizo la posición if (abs(dx) > 1.0) { x += dx * easing; println(dx); } ellipse(mouseX, 30, 40, 40); ellipse(x, 70, 40, 40);}

Cálculo de velocidad

A continuación calcularemos la velocidad del ratón mediante la comparación de la posición actualcon la posición anterior. Esto lo haremos usando la función dist() con los valores de parámetrosde las variables mouseX, mouseY, pmouseX y pmouseY.Entonces, el siguiente ejemplo calcula la velocidad del ratón y convierte este valor en el diámetrode una elipse:void setup() { size(100, 100); noStroke(); smooth();}void draw() { background(0); float velocidad = dist(mouseX, mouseY, pmouseX, pmouseY); float diametro = velocidad * 3.0; ellipse(50, 50, diametro, diametro);}

El ejemplo previo muestra la velocidad instantánea del ratón. Los números producidos son extremos–saltan constantemente entre cero y otros valores más grandes de un cuadro al otro.Se puede utilizar la técnica easing para incrementar o mermar la velocidad de forma suavizada.

El siguiente ejemplo muestra cómo aplicar la técnica Easing en dicho contexto. La barra superior


8

representa la velocidad instantánea mientras que la inferior representa la velocidad aligerada:float velocidad = 0.0;float easing = 0.05; // Números 0.0 al 1.0

void setup() { size(400, 400); noStroke(); smooth();}void draw() { background(0); float destino = dist(mouseX, mouseY, pmouseX, pmouseY); velocidad += (destino velocidad) * easing; rect(0, 33, destino, 17); rect(0, 50, velocidad, 17);}

Orientación

La función atan2() es usada para calcular el ángulo desde cualquier punto del área derepresentación a la coordenada de origen (0, 0). Tiene dos parámetros:

atan2(y, x)

Donde los parámetro x e y corresponden a la coordenada de interés. Note que la posición de ambosparámetros se presentan en reverso comparado a cómo las usa otras funciones tales como point().Los valores de ángulo son regresados en radianes dentro del rango π a –π.Recordemos que un circulo mide 2*π radianes, lo cual equivale en grados a 360º. Por lo tanto, unángulo de 90º corresponde a π/2 (1.5707964). Para convertir una medida de radianes a gradosutilizamos la función degrees().

Veamos un ejemplo donde aplicamos estas dos funciones:// El ángulo se incrementa a medida de que el ratón// se mueve desde la esquina superiorderecha de la// pantalla a la esquina inferiorizquierda

void setup() { size(100, 100); frameRate(15); fill(0);}

void draw() { float angulo = atan2(mouseY, mouseX); float grados = degrees(angulo); println(grados + "º"); background(204); ellipse(mouseX, mouseY, 8, 8); rotate(angulo); line(0, 0, 150, 0);}


9

Por último, para calcular la orientación relativa a otro punto de referencia que no sea la coordenada de origen (0, 0), utilizamos la función atan2() cuyos parámetros son substraídos por los valores correspondientes al otro punto de referencia que se desea fijar.

Veamos lo antedicho en el siguiente ejemplo:// Rota el triángulo apuntando siempre a la posición del punterofloat x = 50;float y = 50;

void setup() { size(100, 100); noStroke(); smooth();}

void draw() { background(0); float angulo = atan2(mouseY y, mouseX x); pushMatrix(); translate(x, y); rotate(angulo); triangle(20, 8, 20, 0, 20, 8); popMatrix();}

Lectura recomendada

• Buioli, I. & Pérez Marín, J. "Processing: un lenguaje al alcance de todos", Autoedición,2013, Unidad 7 "Formas: Vértices" (pag. 36), Unidad 8 "Matemáticas: Curvas" (pag. 43),Unidad 14 "Matemáticas: Trigonometría" (pag. 69), Unidad 16 "Transformaciones: Matricesy Traslaciones" (pag. 81), Unidad 17 "Transformaciones: Rotación y Escala" (pag. 84),Unidad 20 "Formas: Parámetros y Recursión" (pag. 105) y Unidad 25 "Valores de Entrada:Mouse II" (pag. 128).

• Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers andArtists”, MIT Press, 2007, Capítulo "Shape 2: Vertices" (pag. 69), Capítulo "Math 2:Curves" (pag. 79), Capítulo "Math 3: Trigonometry" (pag. 117), Capítulo "Transform 1:Translate, Matrices" (pag. 133), Capítulo "Transform 2: Rotate, Scale" (pag. 137), Capítulo"Shape 3: Parameters, Recursion" (pag. 197) y Capítulo "Input 4: Mouse II" (pag. 237).


Documents

Intro a Processing v43-01 - Act2015 - 13