Tutorial Processing...

En este tutorial explican lo básico de lo que es el lenguaje Processing haciendo una clara comparación con Flash de Adobe que nos ayuda a las personas que ya hemos venido trabajando con este software y con ActionScript. Durante el tutorial aprendemos de que las variaciones son significativas pero al mismo tiempo se entiende como se trabaja el lenguaje. Aqui igual voy a explicar por encima de que se trata con mis palabras:



En esta imagen se puede observar como se van a trabajar las coordenadas X y Y en el plano. Es importante saber esto ya que no se van a ubicar manualmente con la interfaz como se solia hacer con Flash sino que todo se le hara un llamado externo con ubicacion Y,X.



// La funcion de "size" le dictara al computador
// el tamaño en pixeles de la ventana. Si no defines esto
// al inicio quedará determinado como 100x100.

size(300, 200);


// La funcion de "background" le dictara al computador
// el color de lienzo en RGB. (si no se especifica color el
// predeterminado sera gris)

background(250,250,250);


// Funciones conocidas como "If , Then"

int a = 1;
int b = 2;

if(a==b){
println("IGUALES");
}else{
println("DIFERENTES");
}


// Funcion "for" para repetir bucles

for(int i=0 ; i<5 color="#000000">; i++){
println(i);
}

// Con esta funcion se creara un punto de color
// rojo en las coordenadas x=50 , y=50

// Llamar la función de trazo (stroke) te permite
// cambiar el color del dibujo actual de tal manera
// que cada comando de color llamado luego será
// dibujado usando ese color. Si nunca llamas
// trazo en Processing, por definición será negro.

stroke(255,0,0);
point(50,50);

// En la línea de funciones, los dos primeros parámetros
// son las primeras coordenadas (punto de salida) y los últimos
// dos parámetros son las segundas coordenadas x,y (puntos de terminado).
// La línea se dibuja desde la primera coordenada a la segunda.

stroke(255,255,255);
line(0,0,60,40);
line(30,50,100,100);

// Otras formas predeterminadas son:

// triangle (triángulo) dibujará un polígono de tres puntas.
// Tiene seis parámetros. Parámetros 1 y 2 son los primeras coordenadas X,Y.
// Parámetros 3 y 4 son las segundas coordenadas X,Y.
// Los parámetros 5 y 6 son las terceras coordenadas X,Y.

triangle(x1, y1, x2, y2, x3, y3);

// quad (cuadrado) dibujará un polígono de 4 puntas.
// La estructura de los parámetros es similar a las del triángulo,
// pero esta vez un cuarto par de parámetros se agregan para
// especificar una cuarta coordenada X,Y.

quad(x1, y1, x2, y2, x3, y3, x4, y4);

// rect dibujará un rectángulo. El primer y segundo parámetro
// especificarán la posición, mientras que el tercero y el cuarto
// lo harán con la altura y el ancho.

rect( x, y, width, height);

// ellipse dibujará un óvalo. Sus parámetros trabajan de la
// misma manera que los de rect.

ellipse( x, y, width, height);

// Fill (llenar) se introduce como un primo del trazo.
// Fill es lo que hace que el polígono verde, mientras que
// el trazo es lo que hace que los bordes sean rojos.
// Los parámetros de fill especifican el color, como el trazo.
// Está predeterminado como blanco. Pero qué pasa si no quieres llenar?
// Existe otro metodo que es noFill( ); que hara que el elemento no tenga fondo.
// Tambien existe noStroke (no trazo), que deshabilita los bordes de ser dibujados . Para habilitar el trazo o el llenar una vez más debes llamar el trazo o el llenar especificando un color.

size(150,100);
fill(#CC6600);
stroke(#FFFFFF);
quad(61,60, 94,60, 99,83, 81,90);


Esto es lo basico para empezar con Processing ya partes mas complicadas las pueden encontrar en el tutorial que deje arriba. Descarga el software gratuito aqui: