jueves, 23 de febrero de 2012

Tutorial de processing


Un paseo por la interfaz   

La siguiente imagen fue sacada de www.processing.org. Para verla en contexto pinchaReference y luego Environment.

ide

Probablemente estás pensando: “Jo, qué simple esta interfaz. ¿Cómo puede ser tan potente como Director o Flash?” Ambos, Director y Flash, poseen todo tipo de interfases de importación y edición de medios, basados en funciones comunes de multimedia comercial. En Processing todo esto se hace o usando otro programa o programando en Java. Por ejemplo, Flash tiene su propio mini Ilustrator, mientras Director viene con su propio mini Photoshop. En consecuencia, un largo trozo del trabajo realizado en ambos programas ha asemejado las restricciones de sus editores integrados. En Processing (y en Java), tu provees tu propia lista de gráficas vectoriales o archivos GIF, y los interpretas usando programación. Eres libre para usar tus propias formas y estructuras, usando el lenguaje para controlar los píxeles en la pantalla más directamente. Para aquellos que gustan de experimentar y desean producir nuevas formas de manera independiente o delante del status quo y sus herramientas de automatización, Processing puede ser más conveniente.

Aquí hay una introducción de seis botones del costado izquierdo de la ventana.

El botón de reproducir (play) es el mismo que en Director y Flash. Cliquéalo para ver tu código ejecutado como un programa.
El botón de parar (stop) es el mismo que en Director o Flash. Cliquéalo para detener tu programa.
Crea un nuevo (new) archivo. Processing los llama sketches (bosquejos). los puedes llamar también Applets, programas o piezas interactivas. Director y Flash los llamanmovies ( películas).
Abre (open) un sketch preexistente. Un menú aparecerá y podrás  elegir dentro de tu propia colección, guardada en la carpeta  especial de Processing que te enseñaré más adelante. También puedes elegir dentro de una amplia gama de ejemplos de sketches realizados por famosos diseñadores/artistas de nuevos medios, para aprender de ellos y usarlos como código de referencia.
Guarda (save) en sketch actual dentro de la carpeta de sketches de Processing. Si quieres darle un nombre distinto vete a guardar como (save as) en el menú de archivo (File).
Exporta (export) el sketch a la carpeta de sketch de Processing, esta vez como un Applet de java, completo con su propio archivo html. Esta propiedad será tratada con más profundidad más adelante.
Para mayor y más detallada información acerca del entorno de Processing, ver la referencia de Entorno de Processing.


 
Manipulación de medios a bajo nivel   

En Director, uno importa o crea medios dentro de un reparto, luego lo arrastra hacia un escenario donde existirá como un actor. En Flash, uno también importa o crea medios dentro de una librería y luego los instancia como clips de películas a un escenario similar. En Processing (y en Java) esta importación de medias está realizada en código, de manera similar como trabaja HTML. Adicionalmente, cualquier medio personalizado que tu inventas (sistema de vectores, datos DNA, muestras de colores de una película) todos pueden ser insertados como parte del código Java. De hecho, no estás restringido a tener cualquier imagen externa o sonidos si quieres mantener todo en un archivo ordenado, porque el píxel de tu imagen también puede convertirse para ser parte de tu código, y los datos de sonidos también pueden ser almacenados como un largo array de datos. El beneficio de una librería o reparto es para tener mayor control sobre el formato, para ahorrar espacio en el disco / memoria, y también para agregar características apuntables&cliqueables hacia un metafórico sistema de archivo común. El beneficio del actor o de la película es que un objeto visible y tangible puede estar en la pantalla y ser una manera fácil para que la gente cree botones, video juegos, caracteres, elementos individuales gráficos y otros elementos visuales y controlables de espacio positivo. De todas maneras, creando grupos de cooperación de elementos y objetos que no son ni de espacio negativo ni positivo, esta metáfora se ha convertido en carga para algunos. En Processing, esta complicada capa no existe; hay solo teclado, ratón y una serie de eventos en conjunción con rutinas básicas de dibujo. Uno se ocupa de redibujar la escena repetidas veces para introducir cambios y tiempo. En esta materia, es tu responsabilidad el escribir tu propio sistema de actor o película, pero no te lo requerirán. Inventa otra metáfora que será más útil para ti como artista. También contribuirás para diversificar con profundidad la estética de aquellos trabajos en cuales usualmente vemos la influencia de Macromedia.

En las siguientes secciones de esta guía, introduciré métodos para renderizar la imaginería a la pantalla. Luego introduciré una animación. Finalmente, te mostrare como agregar animación con el ratón, teclado y el puerto serial. Estos son los pilares básicos para cualquier cosa que quieras hacer con las herramientas de mayor nivel. Serás capaz de hacerlos en Java si te focalizas en construirlos tu mismo.


 
Estructura sintáctica   

Para los que usan Flash MX esto es un repaso. Lo siguente se llama StatementsCommentsen los ejemplos.
// Statements & Comments
// by REAS

// Statements are the elements that make up programs.
// The ";" is used to end statements. It is called the "statement terminator."
// Comments are used for making notes to help people better understand programs.
// A comment begins with two forward slashes ("//").

// Created 1 September 2002
// The size function is a statement that tells the computer
// how large to make the window.
// Each function statement has zero or more parameters.
// Parameters are data passed into the method
// and used as values for specifying what the computer will do.
size(200, 200);

// The background function is a statement that tells the computer
// which color to make the background of the window
background(102);
Y las variables de Java son como a continuación:

int x = 0;
println(x);
x=x+1;
println(x);
x=x+1;
println(x);
Pincha reproducir (play) y ves eso:
0
1
2
3
Personas que usen Flash: No hay nada como var. Para mayor información de variables, consultar la guía oficial de lenguaje Java.
Aquí está la parte de la variables.

Qué ocurre con if-then? 

int a = 1;
int b = 2;

if(a==b){
   println("same");
}else{
   println("different");
}
Pincha reproducir (play) y ves eso:
different
Las cosas son un poco diferentes a Lingo si hay que comparar. El programador usa un sólo “=” para asignar a una variable un valor. Uno usa “==” (doble igual) cuando intenta determinar que si un número es igual a otro número o no. “No igual a “ no es más “<>”, ahora es “!=” y los demás son los mismos ("<" , ">" , ">=" , y "<="). Para información en condicionales, consulte a la autoridad.

¿Y repetir bucles?

for(int i=0 ; i<5 i++){
    println(i);
}
Pincha reproducir (play) y ves eso:
0
1
2
3
4
Usuarios de Lingo, esto es los mismos que “repeat with i=0 to 4”. Dentro de estos paréntesis hay tres declaraciones separadas por dos punto y coma. La primera declaración crea una variable temporal. La segunda declaración especifica la condición que permite al bucle continuar su repetición. A penas i no es más menor que 5, el bucle se detendrá. La tercera declaración te dará la posibilidad de incrementar i  como desees. “i++” es la abreviación de “i = i+1”. Sun podrá contarte más acerca de los bucles.

Mientras los bucles son similares a la estructura de un if-then.

while(6!=2){
    println("muhuhaha!");
}
No ejecutes este programa!
:)
Si estás curioso de saber más de la sintaxis de control de flujos, aquí hay un link del manual de lenguaje de Java. La parte de control de flujos.

Me meteré en funciones en un momento. Entrego estás instrucciones básicas de sintaxis no para ser cuidadoso sino para que comprendas las instrucciones que vienen a continuación.

Para una mayor introducción a las estructuras, mira la Comparación de Lenguaje Processingy los Ejemplos de Estructura de Processing.

No hay comentarios:

Publicar un comentario