Funciones.

Las funciones, en los lenguajes de programación son bloques de instrucciones que pueden ser llamadas para obtener ciertos resultados requeridos en nuestro programa cuantas veces sea necesario. Por otro lado escribir funciones en nuestro software nos ayuda a implementar una estructura más organizada en nuestro código y a permitirnos leerlo posteriormente con más claridad, y, eventualmente, facilita encontrar pulgas en el código que interrumpan el funcionamiento correcto del programa.

Para utilizar una función esta debe ser definida previo a su llamada. Las funciones en Processing de definen así.

tipoDeRetorno nombreDeLaFuncion(argumentos) {
//código ejecutable de la función o;
llamadasAOtrasFunciones();
}

Todas las funciones retornan al programa algún un tipo de datos (tipo de Retorno). Podemos tener funciones que retornan números int con una definición como:

int calcular(int pre) {
pre = pre * pre;
return pre;
}

Lo que esto significa es que esta función al ser llamada a esta función retorna al programa un número entero igual al cuadrado del número que se le pasó a la funcion en la llamada. Para comprobar que la funcion sirve la ejecutamos en Processing:

//crea una variable
int num = 5;

void setup() {
//introduce el valor de num en la funcion calcular() y luego le agisna el resultado a num
num = calcular(num);
//al final imprime en la consola el valor nuevo en num
println(num);
}

//la funcion calcular recibe un argumento de tipo int
int calcular(int pre) {
//luego lo multiplica por si mismo y lo asigna a pre
pre = pre * pre;
//la funcion retorna el valor almacenado en pre
return pre;
}

Este ejemplo en particular no presenta mayir utilidada a nuestros propósitos por ahora pero muy posiblemente utilizaremos funciones propias parecidas a esta en el futuro, muy probablemente mas complejas que esta.

Podemos definir funciones que devuelvan datos float, String, char, int o Boolean, sólo hay que cuidar que utilizamos adecuadamente cada tipo de función según su tipo de datos de retorno.

En Processing hay aún un tipo de datos de retorno más importante para nosotros como programadores de gráficos: void. cuando ponemos void setup() { ... } en nuestro sketch no estamos haciendo nada más que llamar una función que no devuelve datos como las funciones normales, sino que influye más globalmente ahí donde se la llama. Podemos declarar tantas funciones void, int, float o cualquier otro tipo de retorno como queramos, siempre y cuando estas sean únicas.y con una cantidad de argumentos que recibe establke y no cambiante en cada función.

Los argumentos que recibe una función es lo que está en medio de los paréntesis en la definición de la función. La definición int calcular(int pre) { ... } define una función llamada calcular que recibe un argumento y retorna un número entero al final de su ejecución. Posibles usos de calcular() son: calcular(5); calcular(100); calcular(347);
Calcular no puede recibir dos argumentos: calcular(27,34); no es una expresión válida y Processing lo indicará como un error en el área de mensajes. para poder usar calcular(27,34); es necesario hacer una nueva definición:

//la funcion calcular recibe dos argumentos de tipo int
int calcular(int pre1, int pre2) {
//luego los multiplica entre sí
pre1 = pre1 * pre2;
//y la funcion retorna el valor almacenado en pre1
return pre1;
}

¡De hecho, las dos definiciones diferentes de la función calcular() pueden coexistir en el mismo sketch sin provocar el más mínimo problema!

//crea una variable
int num = 5;

void setup() {
//introduce el valor de num en la funcion calcular() y luego le agisna el resultado a num
num = calcular(num);
//al final imprime en la consola el valor nuevo en num
println(num);
num = calcular(num,20);
println(num);
}

//la funcion calcular recibe un argumento de tipo int
int calcular(int pre) {
//luego lo multiplica por si mismo y lo asigna a pre
pre = pre * pre;
//la funcion retorna el valor almacenado en pre
return pre;
}

//la funcion calcular recibe dos argumentos de tipo int
int calcular(int pre1, int pre2) {
//luego los multiplica entre sí
pre1 = pre1 * pre2;
//y la funcion retorna el valor almacenado en pre1
return pre1;
}

Esta modificación del sketch nos lanzará los valores 25 y 500 en el área de la consola de texto, comprobando que dos funciones con el mismo nombre pueden estar en el mismo sketch sin presentar problemas, siempre y cuando la cantidad de argumentos que reciba cada definición sea diferente

size(300,200); es una llamada a la función size() de Processing que recibe dos argumentos, uno para el ancho de la ventana y uno para el alto. De igual forma que en el ejemplo anterior, Processing tiene en su biblioteca central funciones que reciben diferentes cantidades de argumentos. Por ejemplo fill() puede recibir uno, dos, tres, y cuatro argumentos, y en cada llamado diferente hace cosas diferentes.

fill(Gr); con un argumento, hace escalas de grises.

fill(Gr,A); con dos argumentos, controla el relleno gris y la transparencia del color o Alfa.

fill(#RGB,A); con dos argumentos, el primero de estos en RGB-HEX, controla el color RGB más el canal Alfa

fill(R,G,B); con tres argumentos, controla cada color por separado en modo estándar de color (R,G,B)

fill(R,G,B,A); con cuatro argumentos, controla cada color de relleno por separado en el modo estándar RGB y el canal Alfa o transparencia.

Nuestras funciones pueden aprovechar esta funcionalidad nativa de Processing para tener variantes de la misma función que responden diferente según la cantidad de argumentos que se ingresan en las llamadas a esta.

Ejemplo práctico.

El ejemplo del capítulo anterior reescrito con funciones. Nótese el reducido tamaño de draw(). Las diferentes secciones del programa están definidos más abajo. draw() entonces se dedica a hacer llamadas más complejas. limpiando mucho el área de trabajo. Si pasa que la bola no se mueve, sólo tenemos que buscar la función que realiza el cálculo de las posiciones nuevas en cada ciclo y revisar si tiene una pulga que deba ser eliminada.

La bola rebota correctamente con el código fuente correctamente modularizado.

//variables:
int diam = 30;
float posX = 100;
float posY = 0;
float velX = 3;
float velY = 0;
int voltea = -1;
int tope = -10000;
float friccion = 0.95;
float gravedad = 1;
void setup() {
size(300,300);
frameRate(30);
smooth();
ellipseMode(CENTER);
background(50);
}

/*un muy reducido draw()*/
void draw() {
background(50);
//llamadas a funciones "custom"
dibujaBola();
movimiento();
pngexp();
}

/*transformamos todos los comandos que dibujan
la bolita en una funcion modular fuera de draw()*/
void dibujaBola() {
posX = constrain(posX, diam/2, width-diam/2);
posY = constrain(posY, -1000, height-diam/2);
stroke(255);
fill(abs(velY*15),abs(velY*3),0);
ellipse(posX, posY, diam, diam);
}

/*La funcion que controla el movimiento
de la bolita está también fuera de draw()*/
void movimiento() {
//llamada a la funcion posicion()
//desde dentro de otra funcion:
posicion();
//control de colisiones con los bordes:
if (posX > width-diam/2 || posX < diam/2) {
 velX = velX * -friccion;
}
else if (posY > height-diam/2 || posY < tope) {
 velY = velY * -friccion;
 velX = velX * friccion;
 }
}

//La funcion que calcula la siguiente posicion de la bola
//es llamada desde movimiento() para realizar su tarea.
void posicion() {
posX = posX + velX;
velY = velY + gravedad;
posY = posY + velY;
}

/*El exportador de imagenes esta fuera tambien
conservando su declaracion condicional este se ejecuta
solo cuando se presiona el mouse dentro de la ventana del sketch*/
void pngexp() {
if (mousePressed) {
saveFrame("Capitulo_8_1.png");
}
}

Este programa es extenso visualmente, pero no es mucho más largo que el proyecto progenitor del capítulo anterior. Sin embargo, a pesar de ser más extenso en más legible, y los comentarios en cada sección del código clarifican lo que hace esa sección muy bien.

Podemos llevar el ejemplo aún más allá demostrando una característica de Processing que nos ayuda a dividir más claramente nuestros programas en módulos: las perstañas del editor.

Como vimos en el paseo por la interfaz de Processing, en la barra de pestañas hay un pequeño icono con una flecha. Al hacer click sobre esta aparece un menú de edición de pestañas. Si seleccionamos “New Tab” el área de mensajes se tornará amarilla y nos presentará un diálogo donde introduciremos el nombre de la nueva pestaña; acto seguido hacemos click en ok o presionamos ENTER y, así de simple, nuestra pestaña está creada. Si presionamos Ctrl + K, Processing nos mostrará la carpeta del proyecto y dentro de ella ahora veremos dos documentos .pde, cada uno con el nombre de una pestaña. Cada uno de estos documentos contiene el código de una pestaña y solamente ese código. Cuando entremos a estudiar Classes, la utilidad de esta característica saltará a la vista. Por ahora podemos copiar todas nuestras funciones en otra pestaña o varias de ellas, separándolas por tipo de funciones que es precisamente lo que yo he hecho. Cuando Processing ejecuta el sketch todo es juntado como si lo hubiésemos escrito en un solo .pde sin importar la separación del código. Podemos aumentar la legibilidad del código con pocos pasos, separando unas cosas de otras.

Suma:

Partiendo el programa en módulos logramos una claridad insospechada, y, aún más importante que la legibilidad es el ailamiento de fallas a secciones pequeñas, de revisión rápida en caso de que ocurra un error en una parte del código. La modularización de los programas facilita las tareas de despulgue y revisión de errores de todo tipo Sumado a esto, la posibilidad de partir nuestro código en diferentes documentos permite la portabilidad de cada trozo de código por separado. Veremos mucho más sobre reciclaje de código más adelante cuando entremos en el mundo de los Classes.

¡Descarga el código fuente de este tutorial!
[download id="6" format="1"]

Déjanos feedback, preguntas o infórmanos de cualquier error en este post dejando un comentario

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

En los últimos capítulo hemos visto el empleo de una estructura de control que requiere de una condición para ejecutarse. Acá estudiaremos esta estructura con más detenimiento. Probando algunas posibilidades creativas que se pueden lograr con tres instrucciones simples.

Condiciones:

Puede que ahora cada uno quiera crear su propio mundillo en la computadora, y esto es muy comprensible; una vez que vimos que el movimiento es relativamente simple de lograr nuestro impulso será quere más movimiento, más objetos, y, tal vez, más realismo.

Nuestro ejemplo de este capítulo es simple, pero requiere comprender el funcionamiento del mundo físico para traducirlo en un modelo que la computadora entienda y ejecute como nosotros mismos lo esperamos.

Sin embargo antes de sumergirnos en el mundo ‘condicionado’ debemos entender unas cuantas operaciones lógicas que nos ayudarán cuando creemos nuestras propias condiciones a cumplirse:

Operadores Relacionales:

En el ejemplo del capítulo anterior la declaración condicional que verificaba el valor de posX lo hacía esperando a que este alcanzara un valor mayor o igual al ancho de la ventana del sketch:

if ( posX >= width ) {
posX = 0;
}

Esta es una declaración condicional muy simple que se repite en cada ciclo del programa y su funcionamiento puede ser descrito como sigue: “Al entrar en este bloque de código primero compara el valor de posX con el del ancho de la ventana; si el valor de posX es mayor o igual que el ancho de la ventana, ejecutar el código dentro de los corchetes; de lo contrario, si el valor de posX es menor que el ancho de la ventana, saltar el código por ejecutar”.

La lógica de estas declaraciones es simple y directa, el código dentro de los corchetes no se ejecuta hasta que la condición se cumple. Como en nuestro ejemplo del capítulo anterior el valor de posX aumentaba invariablemente en 1 con cada ciclo del draw(), era de espoerarse que después de 300 cuadros este llegaría a ser igual al ancho de la ventana, cuando el cuadrado alcanzaba el lado derecho de esta. La condición se cumplía entonces y el código dentro de los corchetes se ejecutaba, devolviendo la variable posX a su valor inicial.

En esta declaración utilizamos un operador relacional; esto es que analiza la relación entre dos valores diferentes, en ese caso, el valor en aumento de posX con el valor constante del ancho de la ventana. En profundidad la declaración condicional es una verificación de verdad o falsedad: Cuando el programa llega a la declaración condicional checa el contenido de los paréntesis ( posX >= width ) para comprobar si la condición puesta ahí se cumple de acuerdo con el valor que el programa almacenó en la variable posX; cuando la condición se cumple la condición retorna true (verdadera) y el código entre los corchetes se ejecuta; cuando la condición no se cumple la expresión retorna false (falso) y el código entre los corchetes es ignorado. Estas evaluaciones son efectuadas por la computadora una y otra vez, en cada vuelta de draw() sin importar si la condición se cumple o no.

Los operadores relacionales son casi siempre necesarios en las declaraciones condicionales, aunque estas se pueden verificar con variables tipo Boolean que cambien de estado a partir de interacciones en el programa o desde fuera de este. En un sentido estricto Las declaraciones condicionales son declaraciones Boolean en el que el resultado de la expresión busca un resultado no numérico sino de verdadero o falso. Esto es, que cada vez que la función del ejemplo se ejecutaba

Los operadores relacionales son los siguientes:

• < menor que

• > mayor que

• <= menor o igual que

• >= mayor o igual que

• == igual que

• != diferente de (en sentido literal “no igual”)

Estos operadores se usan según los requerimientos de nuestro programa o según nos convenga a nosotros y la forma en que resolvamos el problema, porque como veremos más adelante las declaraciones condicionales se pueden escribir de diferentes formas.

Operadores Lógicos:

Un tipo más de operadores que nos ahorrarán trabajo son los operadores lógicos. Estos funcionan para encadenar varias operaciones relacionales en las que se comparan variables o eventos diferentes en una sola línea de código, podemos, por ejemplo unir dos condiciones diferentes para tener nuevas condiciones que puedan cumplirse para que el cuadrado sea reiniciado a cero. Remplace la declaración condicional del ejemplo del capítulo anterior con esta y además de esperar a que el cuadrado llegue al lado derecho de la ventana, de clicks antojadizos sobre la ventana del sketch cuando se esté ejecuando:

if (posX >= width || mousePresssed) {
posX = 0;
}

Lo que hicimos en esta variación del código fue encademar a la condición de evaluar posX, la condición de evaluar si el mouse ha sido presionado durante cualquier momento de la ejecución. El operador || , que significa OR (“O” disyuntivo: [esto O esto...]), y el programa lo interpreta, en palabras simples, como “Si el valor de posX es mayor o igual que el ancho de la ventana Ó el mouse es presionado, reiniciar posX a 0″. El operador OR busca por cualquiera de las dos condiciones para reiniciar el valor en la variable posX; cuando cualquiera de las dos condiciones se cumple, la variable posX es reiniciada, sea que el cuadrado llegue al lado derecho de la ventana depués de 300 ciclos, o que en cualquier momento uno presione el mouse. Nótese que combinamos dos tipos diferentes de datos, una operación matemástica comparativa con un dato boolean que es true cuando el mouse es presionado, Estas declaraciones son tan válidas como deseables, sobre todo si el objetivo es hacer programas interactivos e interesantes.

Los operadores lógicos son tres:

• ||    OR    "O"    esto o aquello

busca que cualquiera de las condiciones se cumplan, sin importar el orden o el moemento en que lo hagan. Cualquier condición se puede cumplir, separadamente en el tiempo. cuando al menos una se cumple, if retorna true y el código se ejecuta

• &&    AND:    "Y"    esto y aquello

busca que las dos condiciones a ambos lados del operador se cumplan al mismo tiempo, si una no se cumple el código entre los corchetes no se ejecuta. Cuando las dos condiciones se cumplen if retorna true y el código se ejecuta.

• !     NOT:    "NO"    esto no se cumple

Se usa de manera que el no cumplimiento de una condición retorna true, esto puede parecer confuso pero en el futuro ahondaremos en algún ejemplo que use esta lógica. Su uso es más claro con datos de tipo Boolean como argumentos condicionales.

De aquí en adelante seguiremos isando estos dos grupos de operadores, Relacionales y Lógicos, para ir añadiendo complejidad y autonoomía y automatización a los objetos en pantalla.

if () {} else if () {} else {}

La esturctura if busca entre la condiciones dadas por el cumplimiento de estas para ejecutar el código entre los corchetes y como veremos a continuación puede contener varias declaraciones de diferentes condiciones. Una estructura if completa se ve así:

if (condicionesACumplir) {
//si estas condiciones se cumplen
//ejecuta este código
} else if (otrasCondiciones) {
//si las primeras condiciones no se cumplen
//pero estas nuevas condiciones se cumplen
//ejecuta este otro código
} else {
//si nada de lo anterior se cumplió
//entonces ejecuta este código
}

En nuestra declaración condicional del ejemplo anterior no utilizamos else, puesto que no era necesario, sin embargo pudimos escribir el aumento y el reinicio de posX de esta otra forma y habría sucedido exactamente lo mismo:

if (posX >= width) {
posX = 0;
} else {
posX = posX + 1;
}

“Si el valor almacenado en posX es mayor o igual al ancho de la ventana, reinicia posX a 0; si no, suma 1 a posX”

La claridad del código aumenta, ya que tenemos en la misma declaración condicional todo el código necesario para mover el cuadrado de un lado a otro. Podemos reescribir muestro ejemplo de más arriba con la interacción del mouse así:

if (posX >= width) {
posX = 0;
} else if (mousePressed) {
posX = 0;
} else {
posX = posX + 1;
}

Con cada evaluación aparte. El problema es que nos complica un poco el código y es mejor como lo hicimos a la primera; evaluando dos posibilidades al mismo tiempo, unidas en la misma línea por un OR.

Actividad:
Reescriba el ejemplo con interacción del mouse para que posX sea reiniciada cuando el valor en esta sólo sea mayor que el ancho de la pantalla Y el mouse sea presionado. Las dos condiciones deben cumplirse al mismo tiempo para que posX sea reiniciado.

Gravedad simulada:

En este capítulo utilizaremos todo lo que hemos aprendido hasta ahora para simular un sistema simple con gravedad simulada. Pondremos una bolita en nuestro pequeño universo bidimensional y la lanzaremos para que se detenga por su propia interacción con el medio.

Cuando estamos ante la simulación de la realidad las cosas se pueden poner un poco más complicadas, pero con orden en nuestro código todo se vuelve más fácil. Primero necesitamos un ambiente y un par de variables para comenzar. Utilizaremos sobre todo variables tipo float, porque los cálculos requieren más precisión que en los ejemplos anteriores.

Nuestro sketch teminado luce así:

La nola cae acelerando y sube desacelerando.

//variables:
int diam = 30;          //diametro de la bola
float posX = 100;
float posY = 0;
float velX = 3;
float velY = 0;
int voltea = -1;
//el tope de la ventana
int tope = -10000;//variables de la física de nuestro mundillo
float friccion = 0.95;
float gravedad = 1;
void setup() {
size(300,300);
frameRate(30);
smooth();
ellipseMode(CENTER);
background(50);
}
void draw() {
posX = constrain(posX, diam/2, width-diam/2);
posY = constrain(posY, -1000, height-diam/2);
//refresca el fondo
background(50);
stroke(255);
fill(120,posX/2,posY);
ellipse(posX, posY, diam, diam);
//mueve la bola horizontalmente
posX = posX + velX;

//aumenta la velocidad vertical en cada ciclo de draw
velY = velY + gravedad;
posY = posY + velY;//Condicional:
//si la bolita toca cualquiera de los bordes de la ventana
//invertir la velocidad para que se mueva en sentido contrario
if (posX > width-diam/2 || posX < diam/2) {
velX = velX * -friccion;
}
//además, si la bola toca el fondo de la ventana
//invertir el valor de la velocidad
else if (posY > height-diam/2 || posY < tope) {
velY = velY * -friccion;
velX = velX * friccion;
}
}

Este sketch puede parecer un poco intimidante pero si miran el código detenidamente verán que sólo hay una función nueva al comienzo de draw() la cual todo lo que hace es evitar que la bola se dibuje fuera de la ventana; esto para que el rebote sea fiel al borde de la ventana.

En profundidad lo que hicimos fue dibujar una elipse en las posiciones posX y posY con diámentro diam y luego de esto empezamos a operar posX y posY para que nos den la posición que se usará en el próximo ciclo de draw() La nueva posición resulta de sumar la posición actual con la velocidad en cada círculo. Pero recordemos que la gravedad acelera las cosas, entonces se usa la variable gravedad para calcular la velocidad en aumento de la bolita antes de pasarle este valor al cálculo de la posición.

La declaración condicional, que ocupa la segunda mitad de nuestro loop draw() se encarga de asegurar que las colisiones con los bordes de la ventana sucedan.

if (posX > width-diam/2 || posX < diam/2) {
velX = velX * -friccion;
}
else if (posY > height-diam/2 || posY < tope) {
velY = velY * -friccion;
velX = velX * friccion;
}

Esto significa: “si el valor en posX es mayor o igual que el ancho de la ventana menos el radio de la bola, O, si el valor en posX es menor que el radio de la bola, invertir el valor de la velX sustrayendo el 5% de la velocidad por concepto de fricción; hacer esto si cualquiera de las dos condiciones se cumple; sin importar si alguno se cumple o no pasar al siguiente paso: si el valor en posY es mayor que la altura de la ventana, invertir el valor de velY y sustraer 5% de la velocidad por concepto de fricción y hacer lo mismo con velX, si ninguna de las condiciones anteriores se cumple, ignorar los contenidos de los corchetes y seguir con el resto del programa”.

La sustracción de 5% de la velocidad al multiplicar velX y velY por friccion (0.95) garantiza que la bola se detendrá.

Actividad:
- Pruebe este ejemplo con un valor de friccion de 1.
- Pruebe este ejemplo quitando la actualización del fondo para que la bola deje un rastro.
- Pruebe con diferentes valores de inicializacion en las variables al inicio de sketch. Es posible hacer arrancar la bola a gan velocidad y obtener resultados muy diferentes.

De acuerdo a la variable int tope = -10000; la expresión:

else if (posY > height-diam/2 || posY < tope) {
velY = velY * -friccion;
velX = velX * friccion;
}

establece que el tope donde la bola rebotará hacia abajo está 10000 píxeles por encima del borde superior de la ventana. ¿Recuerdan que las coordenadas negativas podrían ser útiles? Bueno aquí tienen el primer ejemplo, le ponemos un tope bien alto a la bola para que esta pueda rebotar fuera de la ventana pero sólo en sentido vertical y por encima de esta. Aún si la bola está en este espacio fuera de la ventana, las condiciones que posimos para el comportamiento de posX no dejarán que la bola avance en sentido horizontan más allá de el amcho de la ventana.

Actividad:
Intente inicializando la variable velY en un valor negativo alto como -50 y vea los resultados del experimento

Suma:

Las declaraciones condicionales agregan funcionalidad automatizada a nuestro software, esta y otras estructuras que veremos más adelante aportan funcionalidad extendida y mejores prestaciones para generar programas interactivos y con mayores cantidades de datos, objetos y comandos.

¡Descarga el código fuente de este tutorial!
[download id="5" format="1"]

Déjanos feedback, preguntas o infórmanos de cualquier error en este post dejando un comentario

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

Movimiento:

Para una computadora No existen las leyes de la física en su mundo virtual, hay que traducirlas a este dominio, para que la máquina pueda calcular el comportamiento de los objetos a partir de modelos matemáticos definidos por nosotros en el mundillo que estamos por crear. En ese sentido, la animación puede volverse un poco cansada de lograr, pero sus resultados son un premio a nuestro esfuerzo mucho más satisfactorio que simplemente dibujar círculos y rectángulos en pantalla.

Comenzaremos con un ejemplo muy simple pero gracioso: dibujar un círculo que sigue los movimientos del mouse. Para que este ejemplo funcione, debemos introducir nuevas funciones y estructura a nuestro código.

void setup() {…}

setup() es nuestra función de inicialización para sketches que realizan tareas de animación, prepara todo el ambiente para lo que está por ocurrir. Hasta esta lección todo el código que hemos visto se ejecuta una sola vez y luego el programa se detiene y nos muestra los resultados en una ventana aparte del editor. Ahora, lo que haremos será construir un sketch que repite cíclicamente cálculos para refrescar la pantalla varias veces por segundo. setup() para nuestro nuevo campo, la animación, es como los sketches que hemos hecho hasta ahora, esta sección del sketch correrá una sola y nada más, sin más oportunidades de volverl a ejecutar su código una vez que ha comenzado la animación. La mayor ventaja que presenta setup() es que da estructura a nuestro código diciéndonos a nosotros ya la máquina que en efecto nos estamos preparando para una carga más fuerte de consumo de procesador que la exigida hasta ahora. dentro de setup() pondremos todas las inicializaciones necesarias (u opcionales) para entrar en la siguente etapa del sketch: el Loop draw().

void draw() {…}

draw() es nuestra máquina de animación real, es una función que se llama una vez y se ejecuta cíclicamente sin fin, una y otra vez, hasta que le indiquemos que se detenga (con código o presionando el botón cerrar de la ventana del sketch). El código que pongamos dentro de draw() se ejecutará repetidamente, y entregará en pantalla actualizaciones de lo que sucede en el código a la velocidad suficiente como para hacernos creer que existe un movimiento real. La función draw() se ejecutará, predeterminadamente, 60 veces por segundo; esto quiere decir que veremos una animación muy fluida, ya que draw() nos entrega 60 cuadros por segundo, el doble de rápido que la televisión estándar en occidente. Esta rapidez también significa que draw() requiere bastante poder de procesador y que alguna computadora viejita podría verse en problemas para dibujar nuestras figuras. sin embargo esto no es problema para sistemas más nuevos, y por otra parte has opciones para resolver la carencia de un procesador poderoso.

Entonces nuestro código para animaciones lucirá más o menos así:

//espacio para las variables

void setup() {
 //código de inicialización
 //del ambiente del sketch
}

void draw() {
 //código que anima las figuras;
 //lo que esté aquí adentro
 //se repite 60 veces por segundo
}

Los corchetes ( {} ) son estrictamente necesarios, ya que dentro de ellos se encierran bloques de código con funciones muy diferentes entre sí. Arriba en el sketch, por convención y por amor a la claridad en el código de nuestros programas, pondremos las variables que necesite el programa para ejecutarse. Podemos ponerlas ahí o en el fondo del programa, después de todo el código ejecutable, el orden no es importante, lo importante es que escojamos un lugar y nos apeguemos a él manteniendo el orden por el bien de la legibilidad de nuestro código.

Persiguiendo un ratón:

Por regla general, no obligatoria, pero sí buena costumbre, los programadores experimentados (yo no soy uno de ellos) recomiendan que todo dato una vez nombrado sea convertido en una variable, así que comenzaremos por declarar las variables que necesitaremos en nuestro sketch de una vez.

Variables:

int diametro = 30, posX = 0, posY = 0;

En una sola línea he inicializado tres variables. Esto es posible porque las tres variables son del mismo tipo de datos: int, si necesitara una o más variables de tipo float necesitaría una línea más para declararla e inicializarla. Esta declaración es quivalente a esta:

int dimetro = 30;
int posX = 0;
int posY = 0;

Pero me ahorra el problema de tener que escribir unas cuantas palabra, lo cual es más cómodo que las tyres declaraciones separadas.

setup()

Una vez inicializadas estas variables pasamos al setup, donde pondremos las condiciones bajo las que se ejecutará nuestro código:

//variables globales
int diametro = 30, posX = 0,posY = 0;

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
}

draw()

Alcanzado este punto estamos listos para escribir nuestro loop draw() y en este caso todo lo que le indicaremos es que nos dibuje una y otra vez un círculo según los valores que le introduzcamos a la función ellipse()

Círculo estático en (0,0)

//variables globales
int diametro = 30, posX = 0,posY = 0;

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
}

void draw() {
 //código que anima las figuras;
 ellipse(posX,posY,diametro,diametro);
}

Si corremos este sketch efectivamente tenemos un círculo dibujado donde lo estipulamos según las variables que declaramos al principio del sketch… pero no sucede nada, ni siquiera cuando pasamos el mouse encima de la ventana.

Eso es porque los valores que efectivamente pasa el mouse a las variables mouseX y mouseY no están siendo pasados a ninguna función u operación en el sketch. No tenemos que preocuparnos por declarar estas variables, Processing lo hace de gratis por nosotros, sólo tenemos que usarlas. Entonces haremos un par de operaciones donde se asigne el valor de mouseX a posX al inicio del loop, alterando el valor de posición horizontal y una operación similar para pasar el valor de mouseY a posY para controlar la posición vertical del círculo:

Círculo persigue-raton con rastro en ventana.

//variables globales
int diametro = 30, posX = 0,posY = 0;

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
}

void draw() {
 //código que anima las figuras;
 //asigna los valores de posicion del mouse
 //a las variables que utiliza el circulo para ubicarse
 posX = mouseX;
 posY = mouseY;
 //dibuja el círculo en la pisicion actual del mouse
 ellipse(posX,posY,diametro,diametro);
}

background() en el loop draw()

Finalmente tenemos nuestro circulo moviéndose por la pantalla, pero hay algo inesperado: el rastro del círculo persiguiendo el mouse permanece en pantalla. Este puede ser un efecto artístico muy interesante, pero fuera de lo deseable o indeseable que pueda resultar: ¿Por qué sucede esto?

Porque nuestra computadora es una máquina, sin intuición y hay que pensar como máquina para descifrar el problema, y el problema es que nosotros no fuimos específicos en indicarle a la computadora que cada vez que draw se repita lo primero que debe hacer es rellenar el fondo para crear un cuadro completamente nuevo:

El fondo se actualiza constantemente creando una animación y no una "pintura".

//variables globales
int diametro = 30, posX = 0,posY = 0;

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
}

void draw() {
 //refresca el fondo en cada ciclo
 background(255);
 //código que anima las figuras;
 //asigna los valores de posicion del mouse
 //a las variables que utiliza el circulo para ubicarse
 posX = mouseX;
 posY = mouseY;
 //dibuja el círculo en la pisicion actual del mouse
 ellipse(posX,posY,diametro,diametro);
}

De hecho podemos simplificar más el programa quitando del medio las dos variables int para la posición del círculo enla ventana y tener un programa más corto y, posiblemente, eficiente:

//variables globales
int diametro = 30;

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
}

void draw() {
 //refresca el fondo en cada ciclo
 background(255);
 //código que anima las figuras;
 //dibuja el círculo en la pisicion actual del mouse
 ellipse(mouseX,mouseY,diametro,diametro);
}

Las variables del sistema son accesibles desde cualquier parete del programa puesto que son variables globales. Hablaremos en un capítulo futuro sobre el alcance o disponibilidad de variables a través de programas más extensos que este y con mayor cantidad de partes, pero por ahora sólo diremos que hay variables que pueden ser vistas sólo en ciertos lugares de un programa dependiendo de su uso y/o lugar de declaración.

Movimiento automatizado:

Nuestro pequeño círculo responde al movimiento del ratón, pero: ¿Qué tal si tenemos dos o más objetos en pantalla que queremos animar de diferentes formas? Usando el ejemplo con operaciones de asignación de variables reescribiremos el código para que incluya un cuadrado que se mueva por su propia cuenta y le daremos también un giro al color de las figuras.

Círculo controlado por el mouse y cuadrado autómata.

//variables globales
int diametro = 30, posX;   //re-declaramos posX para reutilizarla

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 rectMode(CENTER);    //dibuja los rectangulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
}

void draw() {
 //refresca el fondo en cada ciclo
 background(255);
 //código que anima las figuras;
 //modifica el color de relleno seun la posicion del mouse
 fill(mouseX,mouseY,100);
 ellipse(mouseX,mouseY,diametro,diametro);
 //modifica el color de relleno segun la posX
 fill(posX);
 rect(posX,height/2,diametro,diametro);
 //añade 1 cada vez que el ciclo finaliza
 posX = posX +1;
}

Nótese la operación matemática realizada sobre la variable de sistema height la cual ha sido dividida entre dos para colocar el cuadrado en el medio de la ventana, estas declaraciones son totalmente válidas (de hecho, deseables).

Lo que resulta es bastante curioso. Una vez que el loop draw() comienza, nada fuera de él se ejecuta (pronto veremos que esto puede cambiar) por lo tanto si al final de cada ciclo añadimos 1 a posX, cuando inicie el siguiente nuestro cuadrado debería dibujarse un píxel más a la derecha en la ventana puesto que el valor de posX va de 0 a 1, a 2, a 3, a 4, a 5, a 6… etc. A 60 cuadros por segundo nuestro cuadradito abandona la pantalla muy rápidamente, así que utilizaremos una función para ralentizar la frecuencia de los cuadros (lo cual nos ahorrará ciclos de processador también ). Finalmente incluímos una verificación condicional al final del sketch para regresar nuestro cuadrito a donde empezó en 0 en posX.

//variables globales
int diametro = 30, posX;

void setup() {
 //código de inicialización
 size(300,300);      //ventana de 300x300 px
 ellipseMode(CENTER);//dibuja los circulos desde el centro
 smooth();           //gráficos suavizados
 background(255);    //fondo de la ventana blanco
 frameRate(30);      //refresca la ventana 30 veces por segundo
}

void draw() {
 //refresca el fondo en cada ciclo
 background(255);
 //código que anima las figuras;
 fill(mouseX,mouseY,100);
 ellipse(mouseX,mouseY,diametro,diametro);
 fill(posX);
 rect(posX,height/2,diametro,diametro);
 //si posX en mayor o igual que el ancho de la ventana...
 if (posX >= width) {
 posX = 0;  //resetear posX a 0
 }
 else {  //si posX es cualquier otra cosa diferente...
 posX = posX +1;  //sumarle 1 a posX
 }
}

Nuestro verificador condicional se ejecuta en cada vuelta de draw() en busca de que la condición puesta entre los paréntesis se cumpla, si esta no se cumple, ejecuta lo que está entre los conrchetes de else, y si se cumple ejecuta sus propios corchetes, lo cual en este ejemplo es resetear la variable posX a 0 si esta alcanza un valor mayor o igual que el del ancho de la ventana.

Actividad:

Intente alterar el número que espera if para que el cuadro se mueva diferentes distancias. Puede también alterar el valor de reset para reiniciar el cuadrado en otras partes de la ventana.

Aplique operaciones similares sobre el eje Y del cuadrado con nuevas variables y operaciones condicionadas.

Suma:

Estos son sólo dos ejemplos simples de movimiento automatizado en Processing, más ejemplos más complejos serán tratados en próximos capítulos. En este capítulo hemos visto el poder de las matemásticas más simples para crear movimiento en Procesing con objetos simples y fáciles de dibujar. El movimiento en Processing siempre se atiene a modelos matemáticos para describir diferentes fenómenos, la aceleración puede hacerse con una suma doble al final del sketch y una variable más para lograrlo, le propongo como reto, escribir ese simple código para lograr que el cuadrado acelere hacia la derecha y se devuelva de nuevo a 0 cuando toque el borde derecho.

¡Descarga el código fuente de este tutorial!
[download id="4" format="1"]

Déjanos feedback, preguntas o infórmanos de cualquier error en este post dejando un comentario

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

Visten http://processing.org/download/revisions.txt para enterarse de las modificaciones, arreglos y nuevas cacacterísticas de cada actualización de Processing

Para las computadoras el mundo no se trata de interpretaciones, sino de datos crudos, altamente abstractos. Las variables nos ayudan a decirle a la máquina, punto por punto lo que deseamos que ocurra con nuestro skecth.

Variables.

Para funcionar, nuestro programa debe reservar en la memoria de la computadora espacio para todas las instrucciones que le vamos a dar. Hasta ahora, nuestros sketches han sido muy simples y directos, pero cuando nuestro deseo es empezar a crear ambientes complejos, movimiento e interacción, las cosas funcionan en una manera completamente diferente, y uno de los primeros pasos que tomaremos será reservar espacio en memoria para poner esas instrucciines y datos nuevos que harán moverse y vivir a nuestras creaciones.

Las variables son, en el sentido más simple, espacios que reservamos en la memoria de la computadora para guardar datos. Podemos pensar en una variable como una gaveta vacía, en la que ponemos una cosa a la vez. Esta cosa puede ser reemplazada por otra o por una alteración de la misma cosa. En una variable sólo cabe una cosa a la vez. Podemos también pensar en nuestro programa o sketch como nosotros mismos frente al gavetero, tomando la cosa que hay dentro, alterándola y devolviéndola a la gaveta para reutilizarala, reemplazarla, modificarla o mostrarla a otra persona en otro momento futuro.

Las variables vienen en tipos diferenciados, con prorósitos según nos convenga durante el desarrollo de nuestro programa. Volveríamos entonces al tema de los Tipos de Datos. Cada tipo diferente de variables nos puede servir para poner valores numéricos enteros, o con decimales, o letras, o cadenas de letras (básicamente). Podemos utilizar el poder de las variables para almacenar valores que son utilizados por instrucciones más complejas para lanzar un resultado o dibujar un círculo; por ejemplo:

Círculo dibujado con variables.

/*
Este programa utiliza variables tipo "int"
para dibujar un círculo en el centro de la
ventana del sketch
*/

//variables
int centro = 150;
int diametro = 98;

//inicializacion
size(300,300);
smooth();

//el circulo
ellipse(centro,centro,diametro,diametro);

El ejemplo anterior nos enseña el primer operador computacional que aprendemos en Diario de PDE: el operador de asignación [=] (un igual). Utilizamos este operador para asignar valores a variables del tipo que sean. El operador de asignación NO ES una declaración de igualdad. Las declaraciones o verificaciones de igualdad se hacen con el operador [==] (dos iguales seguidos). Esto puede parecer un poco confuso ahora, pero conforme uno se va acostumbrando a estar programando, la diferencia se vuelve natural. Las declaraciones de variables se pueden hacer de dos formas:

//EN UNA LINEA
int centro = 150; //la variable es creada e inicializada de una vez

//EN DOS LINEAS
int diametro;    //esta linea crea la variable
diametro = 98;   //esta la inicializa

Cualquiera de las dos maneras el válida y queda a criterio propio el uso de ellas. Es importante aclarar que una variable debe ser inicializada antes de ser usada en el programa. Inicializar la variable, como vimos arriba, se trata simplemente de asignarle un valor, aunque este vaya a cambiar en el programa luego. Una variable no se puede utilizar en otra función si no es rellenada previamente con algo.

Tipos de Datos en detalle:

Datos “int”:

las variables tipo int sólo almacenan números enteros, negativos o positivos. Estas no admiten que se les asignen valores numéricos con punto decimal. Un buen ejemplo del uso de este tipo de datos se hizo en el primer ejemplo de este capítulo con el dibujo de un círculo en el centro del sketch. Podemos hacerlo un poco más avanzado y reutilizar el ejemplo de una manera más sofisticada para producir coloraciones diferentes y otras formas en el mismo sketch a partir de unas pocas líneas más.

Variables utilizadas en los colores y el rectángulo.

//VARIABLES
//declaracion en una sola linea
int centro = 150; //la variable es creada e inicializada de una vez

//declaracion en dos lineas
int diametro; //esta linea crea la variable
diametro = 98;//esta la inicializa

int val = 10;

//EJECUCION
size(300,300);
background(val*10);
smooth();

fill(val*21,val*13,val*8);
ellipse(centro,centro,diametro,diametro);
fill(val*5,val*16,val*20);
rect(diametro/2,val*13,val,diametro);

Este ejemplo demuestra una habilidad más de Processing, la de operar matemásticamente las variables mientras dentro de las funciones. La llamada fill(val*21,val*13,val*8) es igual a fill(210,130,80). Esto implementa cierto nivel de modularización en el programa. para alterar el color del fondo sólo tendré que cambiar el valor de val y no el de todos los valores pasados a la función fill(val*21,val*13,val*8). Sin embargo esto también quiere decir que si cambio el valor de val, también cambiará el tamaño y color del rectángulo a la izquierda, ya que estas características de la fiigura dependen de val para darse.

Datos “float”:

Los datos float son valores numéricos con o sin punto decimal, lo cual les otorga una mayor precisión de cálculo que los valores int. Esto los hace aptos para tareas donde la precisión de los resultados es muy importante, como puede ser el cálculo de posiciones en 3D, en fractales, cambios situles y muy progresivos en la imagen y simulación de sistemas biológicos o caóticos, entre muchas otras aplicaciones. Los datos int, son más útiles cuando se quiere estableceruna posición absoluta, o para llevar cuentas exactas de eventos que nos sean informadas en pantalla o en la consola de texto.

Los datos float se declaran exactamente igual que los datos int:

float fibo = 1.618;

Utilizando una variable float podemos reescribir el ejemplo:

Rectángulo y fondo variado por fibo.

//VARIABLES
int centro = 150;
int diametro;
diametro = 98;
int val = 10;

//una variable tipo Float
float fibo = 1.618;

//EJECUCION
size(300,300);
background(val*10,val*fibo,diametro/fibo);
smooth();

fill(val*21.3,val*13.1,val*8.9);
ellipse(centro,centro,diametro,diametro);
fill(val*5,val*16,val*20);
rect(20*fibo,val*13,diametro/fibo,diametro);

Podemos emplear datos float para muchas de las funciones de Processing aún si estas sólo necesitan de in dato int para funcionar, ya que muchas de ellas convierten los valores a int automáticamente; cuando esto no sea así, el área de mensaje se pondrá roja y nos avisará que el tipo de datos que estamos tratando de pasar a la función no es válido para esta.

Datos “char” y “String”:

Los datos de texto se almacenan en variables tipo char y String; el primer tipo es para almacenar caracteres individuales y el segundo para almacenar cadenas de caracteres como oraciones completas o reordenamientos de caracteres. La declaración e inicialización de cada uno d eestos tipos es diferente a la de los datos numéricos y ligeramente diferentes entre sí:

//almacena el caracter "!"
char letra = '!';
//almacenar una oracion completa
String mensaje = "el programa se ejecuto correctamente";

Los datos char son muy útiles cuando se efectua análisis de texto, o cuando queremos generar arte ASCII, hay utilidades más sutiles que veremos en profundidad mucho más adelante. Los datos tipo String son muy útiles para almacenar cantidades de texto en pedazos relativamente grandes o muy grandes. Son especialmente útiles cuando realizamos revisiones activas de nuestro código al usar la función print o println() que pone texto en la consola de texto.

Por ejemplo, podemos usar una variable String y una char para verificar que nuestro programa se ejecuta completo y correctamente así:

Texto en la consola de texto con println()

//VARIABLES
int centro = 150;
int diametro;
diametro = 98;
int val = 10;
float fibo = 1.618;

//variable tipo char y String:
char letra = '!';
String mensaje = "el programa se ejecuto correctamente";

//EJECUCION
size(300,300);
background(val*10,val*fibo,diametro/fibo);
smooth();

fill(val*21.3,val*13.1,val*8.9);
ellipse(centro,centro,diametro,diametro);
fill(val*5,val*16,val*20);
rect(20*fibo,val*13,diametro/fibo,diametro);

//Imprime en la consola una mensaje de ejecucion correcta
println(mensaje + letra);

Es importante notar que cuando se declara una variable “String” esta siempre se escribe con la primera letra en mayúscula. Las variables String se inicializan poniendo siempre el valor asignado, la cadena de caracteres, entre comillas dobles ("cadena asignada a String"), y las variables char poniendo el caracter asignado entre comillas simples ('F').

//String siempre con mayúscula
string mensaje = 'b'; //invalido
String mensaje = 'b'; //legal

//String con comillas dobles (" ")
String mensaje = 'oracion asignada'  //invalido
String mensaje = "oracion asignada"  //legal

char con comillas simples (' ')
char letra = "F"   //invalido
char letra = 'F'   //legal

Datos “Boolean”:

Los datos Boolean son datos especiales usados en funciones o expresiones que requieren del cumplimiento de una condición para darse del todo. Los datos Boolean sólo tienen dos posibles valores, true (cierto) o false (falso); cualquier intento de introducir otro valor a una variable tipo Boolean resultará en un error. Podemos incluir en nuestro sketch un ejemplo simple que requiere de condiciones para la ejecución de los últimos pasos en el sketch.

Primero introduciremos la operación fibo = fibo / fibo; al final de la ejecución de los dibujos. Lo que esta línea quiere decir es “divide el valor fibo entre el valor de fibo y asigna el resultado a fibo“. Puede sonar extraño pero funcionará a la perfección. Con el tiempo, operar matemáticamente una variable para luego asignarla a sí misma se harán más comunes así que es bueno acostumbrarse a esta mecánica. El ejemplo terminado luce así:

Cuando la condición se cumple se imprime el mensaje.

int centro = 150;
int diametro;
diametro = 98;
int val = 10;
float fibo = 1.618;
char letra = '!';
String mensaje = "ejecucion correcta";

//VARIABLE BOOLEAN
//INICIA SIENDO FALSA!!!
Boolean boing = false;

//EJECUCION
size(300,300);
background(val*10,val*fibo,diametro/fibo);
smooth();

fill(val*21.3,val*13.1,val*8.9);
ellipse(centro,centro,diametro,diametro);
fill(val*5,val*16,val*20);
rect(20*fibo,val*13,diametro/fibo,diametro);


//OPERACION MATEMATICA SOBRE FIBO
fibo = fibo / fibo;

//PRIMERA CONDICION:
//si fibo es mayor o igual que uno...
if (fibo >= 1) {
  //volver boing verdadera
  boing = true;
}


println(mensaje + letra);
//mensajes extra
print("este mensaje ");
println("tambien es valido");


//SEGUNDA CONDICION
//si boing es verdadero...
if (boing) {
  //imprime todos estos mensajes en la consola!
  print("el valor de fibo es ");
  println(fibo);
}

En este ejemplo utilizamos una expresión if, que verifica el contenido de los paréntesis detrás de ella; si la condición es verdadera se ejecuta el código entre los corchetes ( {} ), de lo contrario no ocurre nada. Estudiaremos un poco más a fondo las declaraciones condicionales en un capítulo posterior

*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***

Existen más tipos de Datos empleados en Processing que tienen diferentes utilidades, sin embargo, por ahora, con estos 5 fundamentales tenemos para empezar a hacer sketches muy entretenidos. De hecho es posible que nunca utilicemos alguno de los otros tipos de Datos. con float, int, String, char y Boolean estamos muy bien equipados para los capítulos por venir.

Variables de sistema de Processing:

Processing viene además con una serie de variables internas que no nos tenemos que preocupar en declarar excepto algunos casos en los que estas pueden ser variadas. Existe una buena cantidad de ellas pero las principales son:

“width” y “height”

Variables int que almacenan el ancho y el alto de la ventana del sketch. Por defecto las dos tiene un valor de 100, pero cuando declaramos size(300,289) estamos asignando los valores 300 a width y 289 a height. Estas variables siempre están disponibles para todo el programa hayan sido modificadas en la función size() o no

“screen.width” y “screen.height”

Similares a las anteriores, pero estas guardan dentro de sí el ancho y el alto, en píxeles, del monitor de nuestra computadora. Desde la computadora en la que escribo este artículo tienen los valores 1280 y 800. estas variables no son modificables, por supuesto, pero se pueden utilizar desde cualquier parte del progra, incluso así: size(screen.width,screen.height).

“keyPressed”, “keyReleased”, “mousePressed”, “mouseButton”, mouseReleased

Variables Boolean que reaccionan a las acciones del teclado o el ratón como presionar una tecla o el ratón o soltarlos.

key

Variable char que almacena la última tecla del presionada en el teclado.

“mouseX” y “mouseY”

Variables tipo int que almacenan la posición del mouse cuando este está sobre la ventana del sketch en ejecución. Muy útiles para hacer modificaciones interactivas que sigan los movimientos del ratón o reaccionen a este.

Hay muchas más variables de sistema incluídas en Processing y que no hay que preocuparse por declarar porque ya son parte del lenguaje. Estas ofrecen una gran rapides de trabajo y se mantienen constantes a través de diferentes plataformas, lo cual aumenta la compatibilidad del software que escribimos.

print() y println()

Adicionalmente en este tutorial usamos la función println() y print() que imprimen mensajes y valores de variables intactas u operadas en la consola de texto. Ambas funciones imprimen el texto ligeramente diferente a la otra.

print() imprime el texto en una línea y deja a Processing esperando por la siguiente print() o prinln() para imprimirla justo después, en la misma línea de la consola.

En cambio println() porque imprime una línea completa y luego salta a la siguiente línea.

Estas dos funciones como vimos en el ejemplo de arriba son tremendamente útiles para confirmar la ejecución de otras líneas y ver si existen errores ne nuestro código durante la ejecución del mismo.

Para mostrar mensajes en la consola se puede hacer de varia formas:

//variable de texto
String mensaje = "_ejecucion correcta";
//variable char
char letra = '!';
//variable numerica
int numero = 5 ;
//variable boolean
Boolean boing = true;

//poniendo el mensaje dentro de la funcion
println("mensaje 'hardcoded'"); == mensaje ‘hardcoded’

//llamando una variable con texto
println(mensaje); == ejecucion correcta
println(letra); == !

//sumando dos o más variables con texto
println(mensaje + letra); == _ejecucion correcta!

//sumando variables de texto con variables numéricas
println(mensaje + numero); == _ejecucion correcta5
Círculo dibujado con variables
//sumando variables de texto con variables Boolean
println(mensaje + boing); == _ejecucion correctatrue

//Operando variables numéricas
println(numero * numero); == 25

//Cualquier combinación de las anteriores EXCEPTO:
//operar una variable numerica junto a una boolean
println(mensaje + numero + boing); == ¡ERROR!
println(boing + mensaje + numero); == true_ejecucion correcta 5

Los nombres de variables pueden ser cualquiera siempre que empiecen con una letra u un guión bajo ( _ ) . Un nombre para una variable puede ser “_tant”, “altur”, o “tocaLasPiezas”. El último ejemplo está escrito con una técnica llamada espalda de camello que consiste en identificar cada palabra que forma el nombre poniendo la primera letra en mayúscula, es muy útil para hacer legible el código y entende lo que almacena la variable. Lo último que queda por mencionar es que, por convención, los nombres de las variables (y de las funciones también) siempre deben comenzar con minúscula, para evitar confusiones con otros tipos de datos más complejos y que son identificados en el código porque sus nombres comienzan con mayúscula; esto lo entenderemos a fondo cuando estudiemos Classes, mucho más adelante.

Suma

Con el conocimiento de los tipos básicos de variables nos dirigimos hacia un nuevo momento de nuestro aprendizaje de Processing; llegaremos rápidamente a interactuar con nuestros sketches y a generar animaciones más interesantes que los dibujos planos que hemos hecho hasta ahora. Saber cómo utilizar los tipos de datos para generar variables que sirvan a nuestros propósitos es básico para poder avanzar en el mundo de la programación, del apropiado uso de los tipos de datos depende la resolución de problemas más avanzados y la disminución de errores y dolores de cabeza.

¡Descarga el código fuente de este tutorial!
[download id="3" format="1"]

Déjanos feedback, preguntas o infórmanos de cualquier error en este post dejando un comentario

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

El menú principal:

Menú “File”:

Menu "File"

Acá están situadas las funciones básicas de todo editor o programa para actuar sobre los archivos que genera, como abrir, cerrar o crear un nuevo sketch, además están las opciones para exportar el sketch como un applet Java o como una aplicación independiente para diferentes plataformas. Entre estos comandos se encuentran los dos submenúes que contienen los ejemplos incluídos con el programa y un acceso a todos los proyectos que se salven en su sketchbook. Predeterminadamente, al salvar un proyecto Processing ofrece una carpeta en Mis Documentos (diferente en otras plataformas) llamado “Processing/” que desde el programa es llamado sketchbook, lo mejor es seguir la sugerencia de Processing y guardar todos los proyectos ahí, donde estarán seguros y donde podemos ordenarlos arbitrariamente en diferentes carpetas; Processing lee cada subcarpeta y la presenta como un submenú en el sketchbook.

Árbol de carpetas del Sketchbook.

Ventana de preferencias de PDE

A continuación están las opciones de impresión en papel del contenido del Editor, y luego de este las muy importantes preferencias de Processing. La instalación predeterminada de PDE funciona perfectamente, sin embargo es posible que desee cambiar la ubicación de nuestro sketchbook, cambiar el tamaño de la fuente en el Editor, asignarle más memoria RAM a Processing o cambiar alguna de las opciones avanzadas. Estas opciones más avanzadas son para gente lo que sabe lo hace, así que si no tienen idea de los resultados de las opciones, no las toquen. como dije, Processing corre de maravilla en su instalación predeterminada y no es necesaria ninguna customización para mejorar el funcionamiento del programa.

El menú “Edit”

Menú "Edit".

El área del Editor funciona básicamente igual que un editor común de texto y en el menú “Edit” encontraremos los comando que tienen que ver precisamente con la edición del texto con comandos estándar como, copiar, cortar, pegar, repetir, deshacer, sleccionar todo; y otros comando propios de Processing, como aumentar o siminuir la sangría de la selección, o copiar la selección con un formato adecuado (BBCode) para postearlo en el foro de Processing (“Copy for Discourse”), finalmente está la opción para encontrar texto en el Editor si estamos en la situación de tener un sketch demasiado grande y no encontramos lo que buscamos.

El menú “Sketch”

Menú "Sketch".

El menu “Sketch” contene los comandos básicos para ejecutar, detener y presentar el sketch en el que estemos trabajando. Debajo de estos están tres comando avanzados y de gran utilidad. Import Library coloca el código necesario al rpincipio del sketch para usar las funciones adicionales de las bibliotecas de funciones incluídas con Processing o instaladas por nosotros mismos que aportan nuevas posibilidades y funciones a nuestro sketch. El siguiente es Show Sketch Folder, el cual nos abre una ventana de nustro explorador de carpetas mostrando el contenido del proyecto en el que estemos trabajando; esto es especialmente útil cuando queremos revisar lo archivos que puede exportar nuestro sketch como imágenes y películas, documentos PDF u otros tipos de archivo generados en la ejecución de nuestro código. Finalmente, en el fondo del menú está el comando Add File, con el que se puede importar, a una carpeta dentro del proyecto llamada “data/”, todos los archivos que nuestro sketch pueda necesitar, sean mp3, imágenes o películas.

El menú “Tools”.

Menú "Tools".

En el menú tools encontraremos comandos especiales que brindan funcionalidades especiales para operar nuestro sketch. La primera de estas es Auto Format, con la que Processing revisa el formato de nuestro sketch y pone todo en orden, aumentando la legibilidad de nuestro código con sangrías adecuadas.

Seguido está Create Font…, un pequeño diálogo con el que se convierten archivos de fuentes en nuestro sistema al formato utlizado por Processing para la representación de texto en la ventana del sketch cuando este se ejecuta.

Luego encontramos Color Selector, el cual abre una pequeña ventana independiente con el que podemos seleccionar gráficamente un color para su uso en el sketch editado. Esta pequeña ventana nos muestra los valores en RGB y RGB-HEX y nos facilitará enormemente la búsqueda de colores y, a los más novatos, la comprensión de los dos estándares de color más comunes en Processing.

Ventana de selección de color.

En la cuarta plaza está Archive Sketch; este comando guarda al sketch actual en formato Zip con todos los archivos contenidos en la carpeta data del proyecto para que los almacenemos o lo redistribuyamos por Internet. Así es como se han hecho los Zips descargables que contienen los códigos fuentes de nuestros tutoriales en Diario de PDE. En la última posición de este menú está un comando muy conveniente: Fix Encoding and Reload arregla los caracteres inválidos en el Editor salva el sketch y recarga el código fuente. Este comando debe usarse después de salvar el sketch para que los cambios realizados no se pierdan.

El menú “Help”.

Menú "Help".

El menú más útil, sobre todo para los que estamos comenzando en PDE, es el menú Help, en el encontraremos una cantidad de recursos extremadamente útiles para comenzar con el ambiente y para ir aprendiendo el lenguaje, investigando la referencia incluída con la descarga oficial de PDE (todo en inglés). En Diario de PDE alentamos a nuestros lectores a navegar a través de la documentación de referencia accesible desde este menú además de leer nuestros tutoriales, encontrarán todas las funciones nativas de Processing y podrán venir de vuelta a este sitio para contribuir con ejemplos, correcciones e ideas para compartir con los demás

Suma:

Processing es un ambiente de desarrollo y un lenguaje de programación más vasto de los que uno se imagina a primera vista, y sus funciones están desarrolladas para ayudarnos a agilizar nuestra labor en el ambiente del programa, pero sobre todo, las herramientas son intuitivas y van directo al punto, fomentando nuestra curiosidad y ansias de aprender más sobre el ambiente y sus posibilidades.

Adelante!

Déjanos feedback, preguntas o infórmanos de cualquier error en este post dejando un comentario

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

Datos de color.

fill() y stroke()

Todos los datos se tratan dentro de una computadora se tratan como cadenas de unos y ceros (1,0), y el color no es la excepción. Hoy se usa una resolución de 24 bits por píxel de pantalla como estándar de la industria computacional, lo cual nos puede ofrecer más de 16 millones de colores. Eso de 24 bits quiere decir que en RGB se usan 8 bits para cada componente; 8 bits para el rojo, 8 bits para el verde y 8 bits para el azul. La computadora recibe los datos de color de una forma muy diferente a como nosotros lo vemos en pantalla pero no ahondaremos en esto por ahora.

Existen diferentes formas de tratar el color en Processing, pero en este capítulo nos enfocaremos sólo en dos de ellas: RGB y HEX.

RGB es un acrónimo que significa Red – Green – Blue, o, en español, Rojo – Verde – Azul. RGB es el modo más simple de usar en Processing y todas las funciones que requieren de argumentos de color para entrar en acción lo entienden a la perfección.

La forma en que se usa el color en Processing es simple y llana, como hasta ahora ha sido todo:

Cuadrados coloreados.

//color en Processing
//la función fill() controla el color de relleno y
//la función stroke() el color del borde

size(300,300);
rectMode(CENTER);

fill(150,200,255);
stroke(80,255,0);
rect(100,100,100,100); //cuadrado AZUL con borde verde
fill(#ef8700);
stroke(#ff00ff);
rect(200,200,100,100); //cuadrado NARANJA con borde magenta

De este pequeño sketch se extrae que las funciones que modifican los colores de los objetos actúan sobre todo lo que haya después de ellas hasta que aparezca una nueva modificación del color. Por ejemplo podemos hacer dos círculos después de los dos cuadrados, uno sin modificar el color tras el cuadrado y otro que sí lo modifique para dejar claro esta acaracterística del tratamiento que da Processing al color:

Círculos añadidos.

//color en Processing
//la función fill() controla el color de relleno y
//la función stroke() el color del borde

size(300,300);
rectMode(CENTER);
ellipseMode(CENTER);

fill(150,200,255);
stroke(80,255,0);
rect(100,100,100,100); //cuadrado AZUL con borde verde
fill(#ef8700);
stroke(#ff00ff);
rect(200,200,100,100); //cuadrado NARANJA con borde MAGENTA

//sin modificar los colores dibujamos un círculo
ellipse(100,200,100,100); // ellipse NARANJA con borde MAGENTA

//modificando los colores un nuevo círculo
fill(255,0,255);
stroke(80,255,0);
ellipse(200,100,100,100); //círculo MAGENTA con borde VERDE

RGB estándar

La función fill() y stroke() que usamos más arriba toman el color en dos diferentes formas, la primera que empleamos es el RGB estándar de Processing que consiste de pasar a la función tres valores separados por comas así:

fill(R,G,B);
stroke(R,G,B);

Los valores que se les pasa a las funciones en RGB estándar deben estar entre 0 y 255, puesto que espacio de color de Processing está en 24 Bits y no permite mayor resolución que esta. Eso quiere decir que tenemos 256 valores para cada color y dependiendo de cómo los combinemos en nuestras instrucciones obtendremos todos los colores de la paleta de 24 bits, o sea, más de 16 millones de colores; muy por encima de lo que podemos distinguir.

fill(0);       //NEGRO
fill(100,0,0);     //ROJO MUY OSCURO
fill(255,0,0);     //100% ROJO
fill(20,200,200);  //TURQUESA
fill(100,100,100); //GRIS
fill(180,255,140); //VERDE CLARO
fill(255); //BLANCO

Como se ve esta corta lista de colores llamadas a fill(), una particularidad de estas funciones es que pueden tomar tres o un solo valor para aplicar el color. Al introducir tres valores, cada color es asignado por aparte para resultar en un color final para la figura, pero si se introduce un sólo valor entre 0 y 255, el resultado es igual a introducir el mismo valor para los tres colores RGB; el resultado es un tono de Gris debido a la igualdad entre los tres colores. de manera que fill(255,255,255); es lo mismo que fill(255);

RGB en modo HEX.

Las funciones que que modifican el color también pueden hacerlo por medio del estándar usado en el desarrollo web para HTML, CSS Y JavaScript, el cual será muy familiar para los diseñadores y programadores web. Para ingresar el valor del color en la función se hace tan simple como:

fill(#33af09);    //Verde
stroke(#fb8000);  //Naranja

El funcionamiento es similar al RGB estándar, sólo que los valores no están separados por comas, usando el estándar HTML para el color con valores HEX para cada par de dígitos. HEX quiere decir Hexadecimal, o sea, que los números introducidos están en base 16. Si queremos contar en HEX tendremos que carlo así:

00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f
10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f
...
...
...

En esta pequeña tabla de conteo se representan los primeros 32 números enteros en HEX, 0 sea, en base 16. el número entero 10 en HEX se escribe “0a“. el número que vemos escrito como “10” NO ES 10, sino “16″. Si seguimos la tabla hasta el final llegaremos hasta el valor “ff” que es equivalente a 255. Ya que el estándar de color HTM y CSS sólo permite dos dígitos por color no podemos avanzar más allá de “ff“, pero aún así obtenemos exacta,ente la misma cantidad de colores que con el RGB estándar de Processing. Tenemos entonces que fill(255,0,16); es exactamente lo mismo que fill(#ff0010). Nótese que siempre que se use RGB en modo HEX debe anteponerse un “#” a los tres valores, lo cuales van juntos, sin espacio entre ellos.

Ustedes pueden escoger el estándar que prefieran para establecer el color de sus figuras en sus sketches, pero con el tiempo veremos que algunas son más convenientes en un entorno de programación en el que desarrollemos prográmas más dinámicos y cambiantes.

background();

Finalmente tal vez deseen saber que el fondo del sketch puede ser coloreado como ustedes más gusten con la función background(), la cual usa, igualmente, cualquiera de los dos modos para funcionar y rellenar el fondo de la pantalla.

Fondo del sketch coloreado

//color en Processing
//la función fill() controla el color de relleno,
//la función stroke() el color del borde
//y la función background() colorea el fondo de la ventana

size(300,300);
rectMode(CENTER);
ellipseMode(CENTER);

background(0,0,0);

fill(150,200,255);
stroke(80,255,0);
rect(100,100,100,100); //cuadrado AZUL con borde verde
fill(#ef8700);
stroke(#ff00ff);
rect(200,200,100,100); //cuadrado NARANJA con borde MAGENTA

//sin modificar los colores dibujamos un círculo
ellipse(100,200,100,100); // ellipse NARANJA con borde MAGENTA

//modificando los colores un nuevo círculo
fill(255,0,255);
stroke(80,255,0);
ellipse(200,100,100,100); //círculo MAGENTA con borde AZUL

La función background() debe ser colocada justo antes de cualquier función ponga dibujos, imágenes o figuras en pantala; recuerde que Processing dibuja las últimas figuras por encima de las primeras que hizo durante la ejecución del sketch.

Suma:

El color es una de las funciones que se nos harán más agradables de usar en un entorno de programación de gráficos, y aunque podría requerir acostumbrarse al uso que se hace de este en Processing sin duda seguirá añadiendo una gran riqueza visual a nuestros sketches.

Actividad:

Intente ver qué sucede cuando se sobreponen formas, usando las funciones para colores con 2 y 4 parámetros; podría sorprenderse…

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

Tamaño de la ventana:

Processing crea gráficos en una ventana por defecto de 100×100 píxeles, la cual no es muy útil cuando estamos tratando de crear arte impresionante y diéfano. Es por ello que para alterar el tamaño de la ventana en la que dibujaremos haremos una llamada a una función para ese propósito. Llamar una función es básicamente escribirla en el Editor de texto de Procesing para que esta entre en acción.

size();

La función para alterar el tamaño de la ventana es size(int,int), donde size() es la función en sí y los dos int que aparecen dentro son parámetros que necesita la función para ejecutarse correctamente. En el caso de la función size() esta requiere dos números enteros, esto es, sin punto decimal (1 es un número entero pero 1.5 no es un número entero).

Para que nuestro sketch tenga un tamaño de 300 píxeles debemos escribir en el editor de Processing:

Después de size(300,300);

size(300,300);

Esta simple declaración cambia por completo el tamaño del sketch a 300×300 px. Hay otras variaciones que se usan con size() pero por ahora no es necesario verlas. Ya en el futuro las repasaremos. Es importante notar que tras cada final de línea de código, ahí donde hay que hacer un “punto y aparte” entre dos declaraciones, se cierra la línea con un “;“. Esto es parte de la sintaxis normal en Processing y debe hacerse obligatoriamente cada vez que un comando termina de enunciarse.

En estos primeros tutoriales veremos que las llamadas a funciones suelen ser muy simples y directas, sin muchas acrobacias en el código.

Primeras funciones de dibujo

Processing es un ambiente de programación de gráficos, y todas sus funciones nativas están hechas para simplificar la tarea de dibujar sin demasiadas complicaciones y sin preocuparnos por lo que sucede tras bambalinas en el programa.

point();

point(float,float) dibuja un punto en el sketch. Eso es todo lo que hace. es una de las funciones más simples de Processing y es sin duda muy fácil de entender. Su utilidad se extienede a que nos muestra cómo está construido el sistema de coordenadas de Processing en la práctica.

Render de point();

size(300,300);
point(50,50);

Al ejecutar este pequeño y simplísimo sketch obtenemos la ventana de 300×300 px con un pequeño punto en el lado superior izquierdo (un punto que sólo apreciarán si su monitor está bien limpio ).

El sistema de coordenadas para dibujo en Processing recorre la ventana de nuestro sketch de izquierda a derecha y de arriba a abajo, es muy importante comprender esto rápidamente y que quede impreso en nuestro subconsciente para poder tratar el sistema de coordenadas de forma intuitiva, sin que nos veamos sorprendidos por resultados inesperados. Nuestro primer puntito está a 50 px horizontalmente de (0,0) y a 50 px verticalemente de (0,0). Por eso aparece en la esquina superior izquierda, del otro lado de punto hay 250 px por recorrer hasta el borde derecho de la ventana y otros 250 px hasta el fondo de la esta.

line();

El siguiente paso sería dibujar una línea. Ello selogra con otra función muy simple y que usa los parámetros de forma similar a point(). La función que dibuja una línea es line(float,float,float,float). Esta función necesita, a diferencia de point de cuatro parámetros, dos para las coordenadas de origen y dos para las coordenadas del final de la línea

Render de line();

size(300,300);         //hace la ventana de 300x300px
point(50,50);          //dibuja un punto
line(80,50,100,180);   //dibuja una línea

En este último ejemplo hice uso de dos barras inclinadas (//). El texto que se pone detrás de estas es un comentario. Processing ignora los comentarios cuando el sketch se ejecuta. Los comentarios son importantes porque nos ayudan a identificar las partes de nuestro sketch y a aclarar su funcionamiento para otros que estén viendo el código fuente. De nuevo, comprender el sistema de coordenadas que emplea Processing para renderizar es elemental para no perderse al ir convirtiendo en código nuestras intenciones visules. En este ejemplo, los primeros dos valores son las coordenadas del punto más alto y los otros dos los del punto final de la línea en la parte más baja.

rect();

Subimos la complejidad con una función más atrevida. rect(float,float,float,float) dibuja un rectángulo que comienza en las coordenadas que se introducen en los primeros dos parámetros. El tercer y el cuarto parámetro son las extensiones horizontal y vertical respectivamente. Si los dos valores de extensión son iguales tendremos un cuadrado. En otras palabras, las dos coordenadas que se introducen actúan como el punto de origen del rectángulo. Los dos campos de extensión pueden contener números negativos para extender el rectángulo en diferentes direcciones.

Render con rect();

size(300,300);         //hace la ventana de 300x300px
point(50,50);          //dibuja un punto
line(80,50,100,180);   //dibuja una línea
rect(150,150,60,40);   //un rectángulo que empieza en 150,150
rect(150,150,-60,-40);   //un rectángulo que empieza en 150,15

Los dos rectángulos que resultan de este sketch empiezan ambor en el medio de la ventana pero se extienden en sentidos contrarios debido a sus valores opuestos de extensión, el segundo rectángulo es el que está más arriba, de hecho, y le pasa por encima a la línea que dibujamos antes; esto es porque Processing dibuja las figuras más recientes sobre las más antíguas. Los valores negativos para dibujar diferentes figuras, tanto en su extensión como en sus coordenadas, aunque usar coordenadas negativas en este moemnto no tiene mucho sentido, porque nunca veremos nuestras figuras dentro de la ventana. El uso de coordenadas negativas se hará más útil cuando empecemos a estudiar el movimiento de las figuras a través de la ventana del sketch, pero por ahora dejo a su criterio el uso de estas a ustedes para que exploren el sistema de coordenadas de Processing en profundidad.

ellipse();

El dibujo de ellipse y círculos en Processing está gobernado por una sola función para ambas figuras: ellipse(float,float,float,float).

La función dibuja un círculo o elipse en las coordenadas de los dos primeros parámetros ysu estensión horizontal y vertical en los últimos dos parámetros introducidos en las función.

Render con ellipse();

size(300,300);           //hace la ventana de 300x300px
point(50,50);            //dibuja un punto
line(80,50,100,180);     //dibuja una línea
rect(150,150,60,40);     //un rectángulo que empieza en 150,150
rect(150,150,-60,-40);   //un rectángulo que empieza en 150,15
ellipse(50,250,40,40);   //un círculo abajo a la izquierda
ellipse(250,250,40,60);  //una elipse abajo a la derecha

En este último ejemplo se dibujan dos nuevas formas: una círculo abajo a la izquierda y una ellipse abajo a la derecha. A diferencia de rect(), ellipse() utiliza las coordenadas de los dos primeros parámetros pasados a la función para poner el centro del círculo y no un vértices de origen lateral. Sin embargo es posible hacer que Processing la dibuje desde la esquina del rectángulo circunscrito de la elipse con la función ellipseMode() (seguir el link para más detalles).

Elipse extra modificada con ellipseMode();

size(300,300);           //hace la ventana de 300x300px
point(50,50);            //dibuja un punto
line(80,50,100,180);     //dibuja una línea
rect(150,150,60,40);     //un rectángulo que empieza en 150,150
rect(150,150,-60,-40);   //un rectángulo que empieza en 150,15
ellipse(50,250,40,40);   //un círculo abajo a la izquierda
ellipse(250,250,40,60);  //una elipse abajo a la derecha
ellipseMode(CORNER);     //cambia el modo de dibujo de las elipses
ellipse(50,250,40,40);   //un círculo abajo a la izquierda desde la "esquina"

Supongo que hasta ahora se han preguntado: ¿Por qué todo en Processing luce “pixelado”? ¿Hay alguna forma de hacer los gráficos más suaves y agradables a los ojos?

La respuesta es sí, hay una forma, y es tan simple como llamar una función que ni siquiera necesita parámetros para funcionar; hay algo más cómodo que eso?

Render con smooth();

size(300,300);           //hace la ventana de 300x300px
smooth();                //SUAVIZA LOS GRÁFICOS EN EL SKETCH
point(50,50);            //dibuja un punto
line(80,50,100,180);     //dibuja una línea
rect(150,150,60,40);     //un rectángulo que empieza en 150,150
rect(150,150,-60,-40);   //un rectángulo que empieza en 150,15
ellipse(50,250,40,40);   //un círculo abajo a la izquierda
ellipse(250,250,40,60);  //una elipse abajo a la derecha
ellipseMode(CORNER);     //cambia el modo de dibujo de las elipses
ellipse(50,250,40,40);   //un círculo desde la "esquina"

Queda a su criterio seguir explorando estas funciones de dibujo de figuras básicas hasta que aprendan a usarlas al 100%.

Suma:

Muy similar a lo que pasa al aprender inglés o cualquier otro lenguaje, la programación requiere de algo de práctica y repetición para que los nuevos conceptos entren en la cabeza, algunos de nosotros requerirán más repetición que otros pero lo importante es que cada uno haga tanto como sea necesario para que los conceptos vayan entrando en la cabeza a un ritmo bueno para cada uno por separado.

Déjanos feedback, preguntas o infórmanos de cualquier error en este post dejando un comentario

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

Desarrollo incremental.

Es importante, durante el proceso de aprendizaje de un lenguaje de programación, olvidarse de que la facilidad con que se pueda aprender es sinónimo de empezar a hacer realidad las más alocadas fantasías de inmediato. Normalmente, aprender un lenguaje es un proceso progresivo, tan rápido como uno puede permitirse. En ese sentido, uno debe ser consciente de que la realización de nuestros objetivos requiere de varios pasos uno detrás del otro, llenando poco a poco los vacíos en nuestro conocimiento hasta que podamos concretar realmente nuestra visión.

Igualmente, el desarrollo de software, proyecto por proyecto, requiere ser enfrentado de forma tal en que se minimicen las complicaciones que resultan de tratar de completar un proyecto grande. Y el primer paso que uno toma es ir rompiendo el proyecto en pequeñas partes o módulos para ir resolviendo cada módulo por separado y luego integrar todo en un todo. Esto es desarrollo incremental, resolver las partes para luego sumarlas, poco a poco hasta tener resuelto todo el proyecto.

Si nuestro objetivo es hacer un juego de Tetris entonces podríamos hacer un seudo-código de cómo funcionaría nuestro programa:

1. Crea las piezas.
2. Sortea las piezas aleatiramente.
3. Lanza una pieza hacia abajo hasta que la pieza se detiene al tocar el fondo u otra pieza.
4. Si una línea se rellena, quitarla de la pantalla.
5. Seleccionar una nueva pieza y ejecutar el paso 3 de nuevo.

Esto es seudo-código, una serie de líneas en lenguaje humano que luego serán traducidas al lenguaje de Processing.

Podemos romper aún más el programa y hacerlo más detallado.

1. Crear las piezas.
2. Sortear las piezas aleatoriamente.
3. Lanzar una pieza desde el tope de la ventana hacia abajo.
4. Verificar si la pieza toca alguna otra pieza o el fondo.
5. Si la pieza ha tocado otra pieza o el fondo, detenerla y dejarla en ese lugar. Saltar al paso 7.
6. Si la pieza no ha tocado otra pieza o el fondo, mover la pieza hacia abajo.
7. Verificar si la pieza rellena una fila de la pantalla.
8. Si la pieza rellena una fila, eliminar esa fila de la pantalla y mover todo lo que está encima hacia abajo.
9. Si la pieza no rellena una fila, ejecutar al paso 3.

Romper el programa en pedazos pequeños ayuda a ver cada parte y a solucionarla más rápidamente.

Modularidad:

Además de romper el programa en secciones que podamos programar una a la vez, es bueno modularizarlo para identificar perfectamente de dónde vienen las eventuales fallas en el código. La modularización se puede ilustrar así:

//Juego de Tetris ejemplo.
//¡Este código no es ejecutable!

//inicializa el programa
void setup() {
  creaYSorteaPiezas();
  lanzarPieza();
}

//Ejecución en loop
void draw() {
  dibujarPieza();
}

void dibujarPieza() {
  //código para dibujar la pieza activa
    moverPieza();
  if (hayContacto) {   //evalúa el contacto entre piezas
    detenerPieza();    //si hay contacto detiene la pieza
    if (rellenaFila) { //evalúa si rellena fila
      eliminaFila();   //si la rellena elimina esa fila
    }
  }
}

void moverPieza() {
  //código para mover la pieza activa
}

boolean hayContacto {
  //código de evaluación de contacto
  //si es cierto retorna true
  //si no retorna falso
}

boolean rellenaFila {
  //código de evaluación de relleno
  //si es cierto retorna true
  //si no retorna falso
}

En el ejemplo de arriba vemos que en draw(), la cual es la función que ejecuta el sketch sólo tiene una llamada a la función dibujarPieza(), esto se traduce en que la función se ejecuta. Como dibujarPieza() contiene una serie de llamadas a las demás funciones uno puede ver, a partir del comportamiento del programa de dónde viene algún eventual malfuncionamiento en el sketch.

El Desarrollo Incremental permite aislar las partes del programa para poder despulgar cada una de estas separadamente, sin perder tiempo en encontrar errores en las otras funciones. Entre más diferenciadas son las funciones, más fácil es localizar el problema incluso con sólo basarse en la salida en pantalla del sketch.

Algoritmos:

Los algoritmos, en el sentido más simple de entenderlos, son una serie de instrucciones ordenadas en una secuencia para cumplir una tarea u objetivo. esta idea está estrechamente relacionada con El desarrollo incremental.

En el ejemplo de seudo-código de más arriba presentaba una lista de pasos para tener un juego de tetris corriendo (al menos en el nivel imaginario). De igual manera podemos desarrollar un algoritmo para evaluar cuándo la pieza toca otra pieza desde arriba o el fondo de la ventana:

1. Luego de mover la pieza, obtener la distancia a todas las piezas.
2. Evaluar esa distancia respecto al tamaño de la pieza actual.
3. Si la distancia entre las dos piezas evaluadas es menor o igual al apotema de uno de los cuadritos de la pieza entonces detener la pieza.
4. Adicionalmente, si la distancia es menor a la del apotema de uno de los cuadritos de la pieza actual entonces llamar a la función que evalúa si la posición actual rellena una fila de cuadritos.
5. Si la distancia no es menor entonces salir de acá y repetir el movimiento hacia abajo de la pieza actual.

Así, se elaboran algoritmos para cada parte del programa y es más fácil atacar cada problema por separado, contribuyendo al Desarrollo incremental de nuestro programa. Estas prácticas se volverán necesarias conforme se avance en el conocimiento del ambiente Processing y en cuanto se entre a formas más sofisticadas de programación (Programación Orientada a Objetos [OOP en inglés]).

Sintaxis y Ortografía:

La sintaxis es el orden en que pondremos los comandos o instrucciones en el Editor de Processing.

A diferencia de los lenguajes humanos, en los que se permiten flexiones sintácticas para alterar el sentido de las palabras, la computadora necesita que se le diga cada cosa que debe hacer con algoritmos precisos y obedeciendo reglas sintácticas estrictas en las instrucciones que se le dan por medio de código.

La sintaxis en Processing es estricta, esto es, que debe escribirse cada instrucción en un orden lógico, correctamente, de lo contrario sucederán errores.

Tipos de datos:

Processing admite muchos diferentes tipos de datos que deben declararse, inicializarse y pasarse a funciones adecuadamente, el fallo en el cumplimiento de los requisitos de tipos de datos lleva a errores de ejcución en el software que escribamos.

Algunos de los tipos de tados que se utilizarán en nuestros programas son:

• int que corresponde a números enteros. 1, 5, y 5440 son número enteros sin decimales.
• float Todos los números con un punto flotante 1.0, 5.1 y 5440,8 son todos números de tipo float.
• String y char corresponde a cadenas de caracteres válidos y a caracteres individuales, respectivamente.
• Objetos:  los objetos son tipos de datos un poco más complicados que cubriremos en algún punto en el futuro.

Suma:

La programación en Processing puede ser una experiencia placentera y enriquecedora, sin embargo si no se siguen unas pocas pautas de orden y conociemiento del funcionamiento del lenguaje y el ambiente, la tarea del programador en Processing se puede hacer tediosa e insufrible. Con el cuidado necesario es posible aprender Processing o cualquier otro lenguaje de programación en una forma fluída y cómoda. Para el programador autodidacta existe la libertad de seguir el propio ritmo de lectura y práctica, pero siempre la disposición es más importante a la hora de definir la curva de aprendizaje que uno podrá seguir en su aprendizaje.

“Diario de Processing” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.

Primer tutorial introductorio sobre el ambiente de programación Processing, el contenido de la ventana y sus funciones más básicas, una introducción suave al programa. Si aún no ha conseguido Processing visite http://processing.org/download/ y obtenga su copia gratuita .

Algunas imágenes en este post se hacen grandes al clickar sobre ellas, busque las imágenes que contienen links para ver mayor detalle de estas

Processing Development Environment (PDE):

Processing es un ambiente de desarrollo y un lenguaje de programación dirigido a estudiantes y artistas sin un conocimiento vasto (o sin conocimiento alguno del todo) de los principios y esquemas básicos que se necesitan en el desarrollo de software, pero que están interesados en introducirse por iniciativa propia en el mundo del código y la programación desde el campo de la generación de gráficos por computadora, desde simples imágenes planas hasta tremendos espacios virtuales en 3D.

El ambiente de la ventana está dividido en diferentes secciones con funciones muy bien definidas que aportan información esencial cuando estamos editando nuestros sketches.

La ventana principal de Processing:

Nuestras tareas de programación se llevarán a cabo en la ventana principal de Processing; la cual se divide en diferentes áreas con diferentes funciones:

Barras Principales:

Dentro de la ventana tenemos, hasta arriba, el Menú Principal con los comandos y herramientas avanzadas de desarrollo. Debajo de este, está la Barra de Herramientas, donde los comandos básicos residen, identificables gráficamente como:

1. Botón “Ejecutar“, que compila el sketch y lo pone a correr en vivo.
2. Botón “Detener“, que detiene la ejecución del sketch.
3. Botón “Nuevo“, que abre una nueva instancia de processing para programar un nuevo sketch.
4. Botón “Abrir“, con el que buscamos un sketch para abrirlo.
5. Botón “Guardar“, con el que se salvan los cambios hechos al sketch que estemos editando.
6. Botón “Exportar“, el cual genera un applet Java y el código necesario para ponerlo en Internet.

Con estos botones se llevan acabo las operaciones básicas mientras se está editando nuestro sketch, aunque existen comandos de teclado para todos ellos, respectivamente:

1. Ctrl + R
2. Esc
3. Ctrl + N
4. Ctrl + O
5. Ctrl + S
6. Ctrl + E

Adicionalmente, existe un comando de teclado para ejecutar nuestro sketch en modo de presentación,  Ctrl + Mayús + R el cual pone a correr el sketch en su tamaño establecido pero con el resto de la pantalla vacío, relleno con un tono de gris.

Debajo de la Barra de Herramientas está la Barra de Pestañas,

Esta barra muestra cada uno de los documentos que ehemos creado en nuestro sketch como diferentes pestañas del mismo. En un sentido real, cada pestaña es un nuevo documento .pde en el que yace una parte de nuestro código. Más adelante, dentro de algunos capítulos más, veremos lo útil que es tener las cosas separadas de esta manera . La pequeña flecha en el extremo derecho de esta barra despliega un menú de tareas cuando es presionada. Estas tareas están relacionadas con la creación, renombrado y deleción de pestañas, además de la navegación a través de estas.

El Editor:

Debajo de lal barras principales encontramos el corazón de nuestra labor en Processing: el Editor.

Esta es el área donde la mayor parte de la acción sucede, donde pondremos nuestros comandos, llamaremos funciones y crearemos todas las piezas de nuestros sketches. Entre las particularidades del Editor de Processig está el resaltado de las funciones que están en la biblioteca central del programa con un color anaranjado, esto nos ayudará a ver qué funciones nativas de Processing estamos escribiendo bien y cuáles tienen errores de escritura.

El Área de Mensajes:

Debajo del editor de texto está un área reservada por Procesing para imprimir mensajes importantes, notificaciones de errores y anuncios que Processing nos hace después de completar algunas tareas simples como salvar un documento.

Cuando un error ocurre el Área de Mensajes se pone deun color rojizo, y en el editor de texto, en la mayoría de los casos, aparece resaltado en amarillo el área del error en el que incurrimos, o una zona cercana a este para que inspeccionemos nuestro código en busca de nuestro bug y lo aniquilemos con certeros teclazos.

La Consola de Texto:

Finalmente, en el fondo de la ventana, ese área negra es nuestra érea de texto de consola, en esta aparecen mensajes de errores con información técnica de lo ocurrido y nuestros propios comandos pueden aparecer en ella también. La consola de texto nos puede servir muy bien cuando estemos despulgando nuestro software imprimiendo mensajes que confirman la ejecución de nuestros comandos. Esta parte de la ventana cuenta con su propia barra de scroll para poder visualizar mensajes largos o impresos en ella previamente y en la esquina inferior izquierda nos muestra en qué línea estamos ubicados en el Editor.

Processing en vivo:

Sketch corriendo en vivo

Una vez que se ha editado un sketch y se presiona el botón Ejecutar o Ctrl + R, Processing hace aparecer sobre todas las ventanas nuestro sketch corriendo en vivo, calculado en tiempo real o no, pero siempre, el resultado de nuestras líneas introducidas en el Editor. Si uno vuelve al Editor cambia algo y vuelve a ejecutar el programa, la ventanita anterior se cerrará y será remplazada por la nueva versión.

Suma:

Estas son las características básicas del ambiente de programación Pocessing, pueden ver una referencia más completa en Inglés acá. Muchas de las funciones adicionales enueradas en esa página del sitio oficial serán tratadas en detalle en próximos posts.

Por favor infórmenos de cualquier error o actualización en este artículo dejando un comentario más abajo, apreciamos sus contribuciones.

“Diario de PDE” está licenciado bajo licencia de Creative Commons: Reconocimiento-Compartir bajo la misma licencia 3.0 Genérica.