Dibujando con Matemáticas

Las funciones matemáticas son muy útiles para dibujar en programación o para crear simulaciones muy cercanas al comportamiento físico de los objetos en la realidad. Si conoces el dibujo que describen las funciones matemáticas comunes puedes hacerte una idea de como utilizarlas en tus propios dibujos, para eso te recomendamos herramientas en línea como fooPlot. Intenta dibujar allí las siguientes funciones:

Función

Lineal
Segunda potencia
Tercera potencia
Raiz cuadrada
Logarítimica
Exponencial
Seno
Coseno
Tangente

Formula en fooPlot :: y(x)=

m*x + b (reemplazar m y b por números que varían la pendiente y el origen)
x^2
x^3
x^(1/2) o sqrt(x)
ln(x)
e^x
sin(x)
cos(x)
tan(x)

Una vez encontramos una gráfica que se ajusta al dibujo que queremos realizar hay una instrucción en Processing que nos ayuda a pasar los valores de un determinado rango de la ecuación (aquellos puntos de x entre los cuales aparece el dibujo que nos sirve) a valores de coordenadas en la pantalla de Processing. Esa instrucción es map(), pues este proceso de conversión de un rango de valores a otro se conoce como mapear. La sintaxis es:

map(value, low1, high1, low2, high2)

A la función ingresa un valor (value) que está entre los valores extremos del rango inicial (de low1 a high1 ) y que la función convertirá en un valor entre los valores extremos del nuevo rango (que ahora iría entre low2 y high2)

Un ejemplo. Esta es la gráfica de la función y(x) = x^4

Para poner un poco más complejo el ejemplo, nos interesa dibujar una boca sonriente en vez de una lengua así que haremos un acercamiento en fooPlot (zoom)

Nos interesa entonces el dibujo que va entre x = −1 y x = 1. En processing vamos a dibujar esta parte de la función, remapeando el valor de x al rango entre 10 y el ancho menos 10. Así: 

 // un bucle for para recorrer el espacio de las x en Processing
 for (int x = 10; x < width - 10; x++) {
     // convertido al rango −1 a 1
     float XenZoom = map(x, 10, width - 10, - 1, 1);
     // para evaluar su resultado y en la funcion x^4
     float YenZoom = pow(XenZoom, 4);
     // y ese resultado lo remapeamos a valores de y en Processing
     // arbitrariamente escogimos un rango entre 20 y 40
     float y =  map(YenZoom, 0, 1, 20, 40); 
     // y dibujamos el resultado                            
     point(x, y);  
 }

Una pregunta fácil: ¿cómo voltearla?


Processing /Mapeando