Primeros pasos con Processing

Primeros pasos para programar con Processing.

Primeros dibujos
Interfície 2
Variables y tipos de datos
Void setup, void draw: Processing en movimiento
Condicionales: si P, entonces Q

Primeros dibujos

Llega el momento de hacer el "Hello World" gráfico:

Escribid: line(20,20,80,80);

en la interfície de Processing y presionar Run.

Y... voilà de nuevo! Veréis una línea negra en la ventana que antes era solo gris.

Una línea que va del punto 20,20, al punto 80,80 en una cuadrícula de 100 X 100 píxeles.

Si ponéis rect(20,20,60,60);

veréis, efectivamente, que se crea un rectángulo (cuadradro en este caso) a partir del punto 20,20, y de 60 píxeles de largo y ancho.

Y así succesivamente con las formas geométricas básicas siguientes:

point() ej.: point(30, 20);

line() ej.: line(30, 20, 85, 75);

rect() ej.: rect(30, 20, 55, 55);

ellipse() ej.: ellipse(56, 46, 55, 55);

triangle() ej.: triangle(30, 75, 58, 20, 86, 75);

Recordar: EN JAVA, CAL ACABAR CADA LÍNEA DE CÓDIGO CON UN PUNTO Y COMA. Esto quiere decir que hace falta ";" al final de cada instrucción, no necesariamente de cada línea tal y como lo escribimos en la interfície de Processing. Pero hace falta tener esto en cuenta siempre ya qye es un error muy común olvidarse de alguno.

SIZE:

Habréis visto que todos los ejemplos son acerca de una ventana de 100 X 100. Para cambiar esto hace falta usar la instrucción size();

size() tiene que ser la primera instrucción que se da cuando programamos cuando lo estamos haciendo ahora (para iniciados, me refiero sin void loop() ni void draw()).

size() puede recibir dos o bien tres parámetros. Si recibe dos (o los dos primeros si recibe tres), se refieren a la medida de la ven (El tercero, que por ahora podéis ignorar, se refiere al modo de "rendering", de dibujo).

Por ejemplo:

size(400,300);

size(423,67);

FILL:

como su nombre indica, esta instrucción especifica el color con el que se llenarán una forma geométrica cerrada. Los parámetros (valores entre paréntesis) especifican el color.

ej.:

fill(153);

fill(255,0,127);

Fill afectará a todos los dibujos que vengna DESPUÉS en el orden del código. Los parámetros (valores entre paréntesis) especifican el color.

STROKE:

Lo mismo que fill() pero afecta al contorno, el trazo de las formas cerradas y las líneas.

ej.:

stroke(153);

stroke(255,0,127);

Fill afectará a todos los dibujos que vengan DESPUÉS en el orden del código.

BACKGROUND:

Otro comando útil para los dibujos, y siempre, es background(), que le dice a Processing cual debe ser el color de fondo de una ventana.

background(127);

background(127,192,255);

Esta instrucción la tendremos que situar justo detrás de size() o, en todo caso, antes de hacer ningún dibujo ya que de hecho lo que hace es tapar todo lo que hay en la ventan con el color específico. Por defecto, el gris que hemos visto en los primeros ejemplos.

Visto todo esto, ya tenemos los elementos para entender código un poco más complejo. Como por ejemplo:

size(300,300);
background(255);

fill(127,255,0);
stroke(255,0,0);
rect(50,50,200,200);

o bien::

size(400,200);
background(0);

fill(0,0,255);
stroke(255,0,0);
ellipse(200,100,66,99);

y también:

size(200,200);
background(0);

fill(0,0,255);
stroke(255,0,0);
ellipse(100,100,110,50);
fill(0,255,0);
rect(100,100,40,35);

Interfície 2

FILE –> EXPORT APPLICATION:

Si export sirve para crear un applet (un programa que se ejecuta desde el navegador), export application sirve para tener una aplicación java que con un click se puede ejecutar en cualquier ordenador, prescindiendo del navegador, y por lo tanto las dificultades que esto puede provocar en algunos casos. Algo mucho más complicado de hacer con java convencional, por cierto.

FILE –> PREFERENCES:

Cuatro cosillas muy útiles: donde se guardan los sketchs, medida de la letra...

SKETCH –> PRESENT:

Ejecutar el programa tapando todo el escritorio excepto la ventana de Processing.

TOOLS –> AUTO FORMAT:

Da un formato al código que hace más fácil seguir la lógica, en cuanto que lo alinea verticalmente (no hay nada como comprobarlo para entender de que estoy hablando!). En versiones paleológicas de processing esta opción se llama "Beauty"!

TOOLS –> CREATE FONT:

Prepara un archivo fuente para ser utilizado, y nos ahorra tenerlo que buscar por nuestro ordenador o en la web.

TOOLS –> COLOR PICKER:

Un selector de color que permite visualizar, de cualquier color, los valores RGB (o HSB) con tal de utilizarlos en el código.

HELP–> REFERENCE:

Ir a la magnífica referencia de processing, donde se explica con detalle y con ejemplos que puede hacer cada función.

HELP–> FIND IN REFERENCE:

Ir al artículo de la referencia del término que tenemos seleccionado.

Variables y tipos de datos

Una variable es un espacio en la memoria dónde guardamos un valor. Cada variable tiene un nombre único que nos sirve para referirnos, y un valor que pude variar.

Si la distancia de un lápiz respecto a mi mano la llamo "dis", mientras lo tengo cogido "dis" tiene por valor 0. Si lo dejo caer, la distancia aumentará hasta que el lápiz esté en el suelo, entonces el valor de "dis" puede ser, por ejemplo 110 (centímetros).

El valor de una variable tiene que corresponder a un tipo de dato con que el progrma puede trabajar. Las más comunes en Processing son int (números enteros), float (número con decimales), boolean (cierto o falso), color i string (cadena de carácteres).

Antes de utilizar una variable, se tiene que declarar. Esto quiere decir: darle un nombre, asignarle un tipo de datos y, si se quiere, un valor:

int dis = 0;

Una vez hecho esto, la podemos utilizar y cambiar el valor:

int a = 78;
println(a);
a = 99;
println(a);

También podemos hacer operaciones entre ellas:

int a = 78;
float b = 13.46;
println(b);
a = 99;
println(a);
println(a*b);

Para un ejemplo más largo y con más tipos de datos, probar y experimentar cambiando los valores:

boolean a; // true or false
byte b; // -128 to 127
char c; //carácter
color d;
float e; //número con decimales
int f; // entero
String g; //cadena de carácters

a = false;
println(a);

b = -32;
println(b);

c = ‘f’;
println(c);

d = color(233,127,23);
println(d);

e = 983.243812;
println(e);

f = 78;
println(f);

g = “ceci nest pas une pipe”;
println(g);

Void setup, void draw: Processing en movimiento

Si hay una cosa muy específica de Processing ( y que pone especialmente nerviosos a los programadores de verdad) son void setup() y void draw().

Podéis ignorar de momento el void y los paréntesis en blanco (es un tema de funciones).

Lo importante es que setup y draw son las dos funciones principales de Processing. Las que se ejecutan siempre. Primer setup, una vez, y después draw repetidamente.

Hasta ahora las hemos ignorado porque el código que hacemos servir se ejecutaba una sola vez de arriba a abajo. Ahora, todo aquello que ponemos dentro de draw se repetirá, también de arriba a abajo, hasta que cerremos el programa (también se puede parar con código pero ahora no viene al caso).

Con estos dos ejemplos lo veréis muy claro. Mirar el código y después ejecutarlo para ver si se cumplen vuestras previsiones:

int numero;

void setup(){
numero = 13;
}

void draw(){
numero = numero + 1;
println(numero);
}

—-

float pos;

void setup(){
size(400,100);
pos = 13;
}

void draw(){
pos = pos + 0.1;
ellipse(pos,50,20,20);
}

Condicionales: si P, entonces Q

Muy en el fondo, programar se reduce a gestionar una serie de valores a través de condicionales. Con variables en todas sus formas, y algoritmos tan complicados como queráis, probablementes todo se puede reducir a condicionales.

Como decía al principio del tutorial, es necesario tener en cuenta , al fin y al cabo, todo lo que la máquina puede hacer es guardar valores, comparar valores, y hacer operaciones aritméticas.

Entonces, este comparar valores es lo que nos permite trabajar con condicionales. Solamente es necesario tener en cuenta como codificar los condicionales.

Así, para decirle que si la variable a es mayor que 14 tiene que escribir "catorce" en la consola, haremos esto:

if( a > 14 ) {
println(”catorce”);
}

Los paréntesis tipográficos, {} delimitan la acción del condicional, y también lo harán por las estructuras de repetición, funciones... y por tanto es necesario tenerlos siempre MUY presentes, ya que es otro error muy común dejarse alguno y que el programa no funcione por culpa de esto.

Siguiendo con el ejemplo de void setup / void draw, probar el código siguiente:

float pos;

void setup(){
size(400,100);
pos = 13;
}

void draw(){
if(pos <= 200){
pos = pos + 0.1;
}
ellipse(pos,50,20,20);
}

Es esencial tener en cuenta cuales son los OPERADORES que podemos usar cuando comparamos variables.

== Igual a

if(year==2006){
println(”this is the present”);

}Atención: Para COMPARAR dos valores debo utilizar DOS símbolos de igualdad. Solamente un símbolo quiere decir ASIGNAR un valor. No es tan importante ahora mismo entender que quiere decir esto como acordarse, ya que sino los condicionales fallarán!

pos == 192; compara los dos valores. El de Pos y 192. Dará cierto o falso como resultado.

pos = 192; asigna el valor 192 a la variable Pos.

> Más grande que

if(year>2006){
println(”this is the future”);
}

—

>= Más grande o igual

if(year>=2006){
println(”this is the future or the present”);
}

—

> Más pequeño que

if(year<2006){
println("this is the past");
}

—

> Más grande que