4.11 Matemáticas: curvas

Las ecuaciones matemáticas básicas pueden utilizarse para dibujar formas a la pantalla y modificar sus atributos. Estas ecuaciones aumentan las funciones de dibujo discutidos hasta ahora.

Nos permite controlar el movimiento y la forma en que los elementos responder al cursor. Estas matemáticas se utilizan para acelerar y desacelerar formas en movimientos y mover los objetos a lo largo de trayectorias curvas.

Exponentes y Raíces

La función sq() se utiliza para elevar al cuadrado un número y devolver el resultado. El resultado es siempre un número positivo, porque la multiplicación de dos números negativos incluso da un resultado positivo. Por ejemplo, -1 * -1 = 1.

Esta función tiene un parámetro:

sq(value)

Cuando se utiliza sq(), el resultado se puede asignar a una variable:

float a = sq(1); // Asigna 1 a “a”: Equivale a 1*1

float b = sq(-5); // Asigna 25 a “b”: Equivale a -5 * -5

float c = sq(9); // Asigna 81 a “c”: Equivale a 9 * 9

La función sqrt() se utiliza para calcular la raíz cuadrada de un número y devolver el resultado. Es lo opuesto de sq().

La raíz cuadrada de un número es siempre positivo, a pesar de que puede haber una raíz cuadrada del número satisface la ecuación s * s = a.

Esta función tiene un parámetro que debe ser un número positivo:

sqrt(value)

Como en la función de sq(), el parámetro de valor puede ser cualquier número, y cuando la función se utiliza el resultado puede ser asignado a una variable:

float a = sqrt(6561); // Asigna 81 a “a”

float b = sqrt(625); // Asigna 25 “b”

float c = sqrt(1); // Asigna 1 a “c”

La función pow() calcula un número elevado a un exponente. Tiene dos parámetros:

pow(num, exponente)

El parámetro número es el número a multiplicar, y el parámetro exponente es el número de veces para hacer el cálculo. El siguiente ejemplo muestra cómo se utiliza:

float a = pow(1, 3); // Asigna 1.0 a “a”: Equivale a 1*1*1

float b = pow(3, 4); // Asigna 81.0 a “b”: Equivalente a 3*3*3

float c = pow(3, -2); // Asigna 0.11 a “c”: Equivalente 1/3*3

float d = pow(-3, 3); // Asigna -27.0 a “d”: Equivale a -3*-3*-3*-3

Cualquier número (excepto 0) elevado a la potencia cero es igual a 1. Cualquier número elevado elevado a la potencia de uno es igual a sí mismo.

float a = pow(8, 0); // Asigna 1 a “a”

float b = pow(3, 1); // Asigna 3 a “b”

float c = pow(4, 1); // Asigna 4 a “c”

Normalización, Mapeo

Los números se convierten a menudo a el rango de 0.0 a 1.0 para realizar los cálculos. Esto se conoce como la normalización de los valores.

Cuando los números entre 0.0 y 1.0 se multiplican entre sí, el resultado nunca es inferior a 0.0 o superior 1.0.

Esto permite que cualquier número que se multiplica por otro o por sí mismo muchas veces sin salir a esta gama.

Por ejemplo, multiplicando el valor 0.2 por sí mismo 5 veces (0.2 * 0.2 * 0.2 * 0.2) produce el resultado 0.00032.

Debido a que los números normalizados tienen un punto decimal, todos los cálculos se deben hacer con el tipo de datos float.

Para normalizar un número, se divide por el valor máximo que representa. Por ejemplo, para normalizar una serie de valores entre 0.0 y 255.0. 255.0 dividir cada por:

Esto también se puede lograr a través de la función norm(). Tiene tres parametros:

norm(value, low, hight)

El número utilizado como parámetro de valor se convierte a un valor entre 0.0 y 1.0

Los parámetros de bajas y altas establecen los respectivos valores mínimos y máximos de los números de rango actual de número.

Si el valor está fuera del rango, el resultado puede ser menor que 0 o mayor que 1.

El siguiente ejemplo muestra cómo utilizar la función de hacer los mismos cálculos que la tabla anterior.

float x = norm(0.0, 0.0, 255.0); // Asigna 0.0 a x

float y = norm(102.0, 0.0, 255.0); // Asigna 0.4 a y

float z = norm(255.0, 0.0, 255.0); // Assign 1.0 a z

Después de la normalización, un número se puede convertir en otro rango a través de la aritmética.

Para convertir números entre 0.0 y 1.0 en un rango entre 0.0 y 500.0, multiplica por 500.0.

Para poner los números de entre 0.0 y 1.0 para los números entre 200.0 y 250.0, se multiplica por 50 y luego añadir 200. La siguiente tabla presenta algunas conversiones de muestra:

Los paréntesis se utilizan para mejorar la legibilidad.

La función lerp() se puede utilizar para llevar a cabo estos cálculos. El nombre “lerp” es una contracción de la función “interpolación lineal” y tiene tres parámetros.

lerp(valor1, valor2, amt)

Los parteros valor1 y valor2 definen los valores mínimo y máximo, y el parámetro amt siempre lee un valor entre 0.0 y 1.0. El siguiente ejemplo muestra cómo utilizar lerp() para realizar las conversiones de valor en la última línea de la tabla anterior.

float x = lerp(-20, 60, 0.0); // Asigna -20.0 a x

float y = lerp(-20, 60, 0.5); // Asigna 20.0 a y

float z = lerp(-20, 60.0, 1.0); // Asigna 60.0 a z

La función map() es útil para convertir directamente de un rango de números a otro. Cuenta con cinco parámetros.

map(value, low, hight1, low2, hight2)

El parametro valor es el número de re-map. Similar a la función norma, los parámetros  low1 y hight1 son los valores mínimo y máximo del rango actual del número.

Los parámetros low2 y hight2 son los valores mínimos y máximos de la nueva gama.

El siguiente ejemplo muestra cómo utilizar el map() para convertir los valores de la gama de 0 a 255 en el rango de -1 a 1. Este es el mismo que el primero normaliza el valor, a continuación, multiplicando y sumando para moverlo de la gama de 0 a 1 en el rango de -1 a 1.

float x = map(20.0, 0.0, 255.0, -1.0, 1.0); // Asignar -84 a “x”

float y = map(0.0, 0.0, 255.0, -1.0, 1.0); // Asignar -1.0 a “y”

float z = map(255.0, 0.0, 255.0, -1.0, 1.0); // Asignar 1.0 a “z”

Curvas simples

Las funciones exponenciales son útiles para crear curvas simples. Los valores normalizados se utilizan con la función pow() para producir de manera exponencial aumento a disminución de los números que nunca exceder el valor 1.

Estas ecuaciones tienen la forma:

y = x²

Donde el valor de x está entre 0.0 y 1.0 y el valor de n es cualquier número entero. En estas ecuaciones, como el valor de x aumenta linealmente los resultados aumentan de valor y de manera exponencial. 

El siguiente ejemplo muestra cómo poner esta ecuación en código. se itera sobre los números de 0 a 100 y normaliza los valores antes de hacer el cálculo de la curva.

for(int x = 0; x < 100; x++){

float n = norm(x, 0.0, 100.0); // Rango de 0.0 a 1.0

float y = pow(n, 4); // Calcular curva

y *= 100;

point(x, y);

}

Otras curvas puedes crear modificando los parteros de pow() en la línea 3.

for(int x = 0; x < 100; x++){

float n = norm(x, 0.0, 100.0);

float y = pow(n, 0.4);

y *= 100;

point(x, y);

}

Los siguientes tres ejemplos demuestran cómo la misma curva es usada para dibujar diferentes formas y patrones.

Dibuja círculos en los puntos a lo largo de la curva y = x^4

noFill();

for(int x = 0; x < 100; x+=5){

float n = norm(x, 0.0, 100.0); // Rango de 0.0 a 1.0

float y = pow(n, 4); // Calcular curva

y *= 100;

strokeWeight(n*5);

ellipse(x, y, 120, 120)

}

________________

for(int x = 5; x < 100; x += 5){

float n = map(x, 5, 95, -1, 1);

float p = pow(n, 4);

float pos = lerp(20, 80, p);

line(x, 0, x, ypos);

}

_______________

for(int x = 0; x < 100; x++){

float n = norm(x, 0.0, 100.0) /7 Rango 0.0 a 1.0

float val = n * 255.0;

stroke(val);

line(x, 0, x, 50);

float valSquare = pow(n, 4) * 255.0;

stroke(valSquare);

line(x, 50, x, 100);

}