Introduccion a Processing, creando un corazón.

Anteriormente hablamos de Processing y de algunas de sus aplicaciones, como sabemos es util para la generacion de graficos e interaccion con el usuario.
En esta ocasion se hara una pequeña introduccion a su lenguaje de programación, con un singular y diferente ejemplo, hablamos de la creación de un corazon a partir de su ecuacion parametrica.
¿De que nos sirve?
Bueno… realmente no es un codigo muy util que digamos, sin embargo nos ayudara a conocer el lenguaje, algunos comandos, y ¿por que no? tambien pueden regalarselo a alguien.
Comencemos:

Para la programacion en processing se pueden usar alguno de los 3 modos de programación:
Modo basico.
Modo continuo.
Modo Java.

Puedes consultar acerca de estos modos en la pagina:

http://processing.org/reference/environment/

Para comentarizar codigo se utiliza la tradicional doble diagonal “//” para comentarizar varias lineas se puede utilizar “/*” para indicar desde donde se inicia la comentarizacion y para indicar donde se termina se utiliza “*/”
Utilizaremos el modo continuo el cual se conforma de una estructura como la siguiente:

//Al inicio se declara el tipo de variable y su valor inicial.
 
void setup(){
//Aqui va codigo de "configuracion"
}
 
void draw(){
//Aqui va codigo para "dibujar".
}

La ecuación parametrica de una figura en forma de  corazon es la siguiente:

Donde la variable “t” debe adquirir valores desde -pi a +pi.

El corazon se va formado de la evaluacion de valores desde -pi a +pi en las ecuaciones de x(t) & y(t) donde los resultados obtenidos indican la ubicacion de varios puntos en el plano, si reunimos todos esos puntos, nuestro corazon tomara forma.

Estamos acostumbrados a un plano cartesiano como el siguiente:

Donde el punto (0,0) se encuentra en el centro del “cuadro”.
Sin embargo para Processing la ubicacion cambia como se muestra la figura:

La esquina superior izquierda es el origen, el punto (0,0) y en direccion a la derecha se encuentra el eje X+ y en direccion hacia abajo se encuentra el eje Y+ , tambien cuenta con un eje Z pero ese lo dejaremos abandonado de momento.

Hay que tener en consideración siempre esto, despues de algun tiempo uno se logra acostumbrar, resulta algo complicado de entender al inicio, pero animo

Una vez que conocemos la orientacion en el plano de Processing, procedemos a escribir nuestro primer codigo, el cual consiste en dibujar un circulo en el centro del plano.

Lo primero que hay que definir es el tamaño del plano o “lienzo” las medidas se manejan en pixeles, los pixeles pueden tener valores enteros (int) eso indica que no lleven valores decimales, y tambien pueden ser valores flotantes (float) los cuales pueden tener punto decimal.

El tamaño del lienzo se define mediante el comando “size();”:

size(ancho,alto);

Para el ejemplo usaremos un ancho=500 pixeles y un alto=500 pixeles.
Dicho comando se introduce dentro los corchetes de void setup() quedando como resultado:

void setup(){
size(500,500);
}
 
void draw(){
 
}

Para la creacion del circulo utilizaremos el comando “ellipse();”

ellipse(x,y,d1,d2);

Donde x,y son los valores para ubicar la elipse en el lienzo, d1 y d2 son los diametros a lo ancho y alto, si d1=d2 entonces se forma un circulo, debemos recordar lo referente a la ubicacion dentro del lienzo, por lo cual el centro se encuentra a la mitad de lo ancho del lienzo y a la mitad de lo alto del lienzo, podemos poner los valores:

x=250 & y=250

Sin embargo si por algun motivo decidieramos cambiar el ancho o alto del lienzo esto afectaria a todo el codigo y por conveniencia utilizaremos las variables predefinidas “width”(ancho) & “height”(alto) estas variables se encuentran disponibles una vez que hayamos utilizado el comando “size();” la cual ya habiamos utilizado por lo cual podemos establecer el centro del lienzo como:

x=width/2 & y=height/2

Estableceremos un d1 y d2 de valor de 50 pixeles, un tamaño adecuado para hacer nuestro circulo visible, quedando nuestro comando de la siguiente manera:

ellipse(width/2,height/2,50,50);

Ubicando esto dentro del codigo de Processing obtenemos:

void setup(){
size(500,500);
}
 
void draw(){
ellipse(width/2,height/2,50,50);
}

Presionamos el boton “RUN” y podemos apreciar la ubicacion de nuestro circulo como aparece en la figura:

Hemos creado nuestro primer codigo, ubicando un ciruclo en el centro del “plano”, procederemos a crear el corazon, para ello requeriremos de las ecuaciones parametricas que anteriormente mencionamos:

Donde X, Y sera la ubicacion de nuestros puntos, para ello requerimos de 2 variables “x” “y” las cuales se declaran antes de void setup(){} estas variables deben de ser del tipo flotante, pues son el resultado de evaluar la variable “t” la cual como mencionamos tomara valores de -pi a +pi por lo tanto la variable “t” debe ser del mismo modo del tipo flotante.

Existe la variable “PI” la cual ya esta definica y tiene el valor de pi (3.141…), para hacer que PI vaya de -pi a +pi ponemos un t=t+0.05 para que de este modo t incremente y ponemos un if() de modo que si t>=PI regrese el valor de t a -pi, de este modo se logra crear un ciclo haciendo que -PI incremente gradualmente hasta llegar a +PI y luego regresandolo a -PI.
Del mismo modo existen operadores de cos & sin, los cuales evaluan valores de cosenos y senos, facilitandonos la realizacion del corazon.
Las ecuaciones parametricas se introducen dentro de void draw(){}  pues es ahi donde se realiza todo el codigo de “dibujo”. quedando nuestro codigo de la siguiente manera:

float x, y;
float t=-1*PI;
 
void setup() {
  size(500, 500) ;
}
void draw() {
  x1= ((16* pow(sin(t), 3)))+250;
  y1= (-1*((13* cos(t))-(5*cos(2*t))-(2*cos(3*t))-(cos(4*t))))+250;
  ellipse(x, y, 20, 20);
  t=t+0.05;
  if (t>=PI) {
    t=-1*PI; 
  }
}

Hemos incluido a las ecuaciones parametricas un “+250″ en ambos x(t) & y(t) esto con el fin de ubicar el corazon en el centro del plano y hemos reducido el diametro del circulo que se encarga de darle forma al corazon. Al presionar el boton “RUN” obtenemos como resultado lo siguiente:

De momento no tiene la forma de un corazon como tal, esto debido a que el tamaño es muy pequeño, procedemos a incrementarlo, esto mediante una multiplicacion:

x(t)=10*(ecuacion)+250;
y(t)=10*(ecuacion)+250;

Elegimos el número 10 debido a que era un tamaño adecuado dicho valor lo pueden variar y de ese modo el tamaño del corazon disminuye o incremente.
Obteniendose como resultado:

Ahora nuestro corazon tiene forma y un diseño bonito, para terminar solo queda darle color, quitar el contorno y hacerle lo que queramos, se pueden encontrar comandos de referencia en :
http://processing.org/reference/

El resto se queda al gusto de ustedes, la programación es bastante sencilla y se logra a base de pruebas y como uno guste, les compartimos el corazón final que hemos realizado junto con el código fuente del mismo.

ENLACE:

SOLOQUIERO.COM/CORAZON/

RESULTADO:

Fuente:

http://pachypodio.wordpress.com/2011/02/14/un-corazon-matematico/

Con algunas modificaciones para nuestro lenguaje
http://processing.org/reference/