joan soler-adillon || Conceptes de Programació

Joan Soler-Adillon || Programació: Conceptes

Despatx 52.803 (Campus de la comunicació, UPF) || 93 542 1238

----------------------------------------------------------------
----------------------------------------------------------------

PROGRAMACIÓN: CONCEPTOS || MASTER EN ARTES DIGITALES

Sesión 2;

0. Soluciones de la primera práctica
1. Variables
2. Tipos de datos
3. Variables d e sistema
4. Setup y Draw: Processing en movimiento
5. PRÁCTICA

0.- Soluciones de la primera práctica

2 líneas
4 líneas
Rectángulos

1.- Variables

Una variable es un espacio en memória donde guardamos un valor. Cada variable tiene un nombre único (y fijo) que nos sirve para referirnos a ella, y un valor que puede cambiar.

En otras palabras, es un contenedor de un valor. Por ejemplo, de un número entero. Cuando programamos, nos referiremos al contenedor por su nombre, y nunca directamente por el valor. No es tres, o doscientos trece, sinó que es miVariable, o distanciaHaciaLaLuna, o edad... El valor lo podemos conocer, cambiar y podemos realizar operaciones con él. El nombre no cambia.

Imaginad que tenemos un robot al lado de la puerta capaz de dar golpecitos de bienvenida a la cabeza a la gente que entra en una habitación. Este robot, realiza una série de fuciones (preparar el brazo, levantar la mano, dar golpecitos, replegar el brazo...) que son siempre lo mismo. Lo que cambia, lo que varía, es la altura a la que hay que darlos. Unas veces será 180 (cms), otras 159, 175, etc.

Esto sería pues lo que entendemos como variable. Podríamos llamarle "altura", y sería un valor que cambiaria cada vez que entra alguien. Así, al robot sólo le tendríamos que decir que hiciera sus acciones según la altura y no cambiar nada más en la programación:

En pseudocódigo:
- estira el brazo hasta "altura"
- da los golpecitos a la "altura" exacta
- repliega el brazo

Otro ejemplo, una variable podría ser mi distancia hacia la puerta. Su nombre, "miDis", y su valor expresado en centímetros. Si me acerco a la puerta, el valor de "miDis" disminuye. También puedo multiplicar "miDis" por cierto número, o la puedo comprobar con distancias de otras personas, y eso me puede servir para tomar decisiones.

Así, si hay que cerrar la puerta, podría tomar la variable "miDis" y compararla con la distancia entre cierto alumno y la puerta ("alumnoDis"). Así, si "miDis" es mayor a "alumnoDis", pediría al alumno si podía cerrar la puerta. Si no, la cerraría yo mismo.

Este razonamiento, que cuotidianamente hacemos sin plantearnoslo, hay que explicitarlo cuando estamos tratando con código. El párrafo anterior (que podríamos entender como pseudocódigo), quedaría así:

En pseudocódigo:
-Si "miDis" es mayor a "alumnoDis"
-entonces habro la puerta yo
-Si no, la abre el alumno

Lo improtante es que, gracias a las variables, si yo o el alumno nos movemos y recalculamos las variables, el mismo código nos sirve para tomar la decisión. O podemos estar corriendo de un lado para otro de la clase y cada vez que ejecutemos el código puede salir una decisión diferente...

Veremos en un momento cuales son los tipos de variables accesibles, pero por ahora hay que tener claro que en Processing hay que declarar las variables.

Esto significa que antes de darle un nombre y un valor, a una variable hay que decirle de qué tipo de datos va a constar. Para una variable del tipo Entero:

int miDis = 445;

declara una variable con el nombre "miDis", el valor 445, y del tipo de dato entero. Al igual que el nombre, el tipo de dato no se puede cambiar. Siempre se puede declarar otra variable y convertirlo, pero este es otro tema...

Una vez declarada una variable, la podemos utilizar:

int miDis = 445;
print(miDis);

Lo que sí que se cambia, pues, es el valor.

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

y se pueden hacer operaciones entre variables:

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

Y esto tan abstracto tiene también su aplicación en programación visual. Así, si dibujo un cuadrado, puedo tener como variables su posición y medidas:

int x = 78;
int y = 121;
int tamano = 50;
rect(x,y,tamano,tamano);

Notad que en los primeros ejemplos he utilizado nombres de variables que remitian a lo que la variable va a contener: miDis, alumnoDis... Esto es una buena práctica a adquirir desde el principio, ya que es extremadamente útil cuando se multiplica el número de variables que utilizamos en nuestros proyectos.

También, notad la sitaxis de palabrasEncadenadasConLetrasMayusculas. Se trata de una convención. Como los nombres de variables no pueden contener espacios, hay que utilizar esto, o_bien_separar_por_guiones, si se quiere utilitzar más de una palabra y nosequiereunacadenaininteligible. La primera práctica es mucho más extendida. Eso sí, una vez la utilizéis, recordad que Processing es sensible a las mayúsculas y minúsculas (case sensitive). Es decir, Processing no va a entender que estaVariable sea igual a estavariable. Es un aspecto a cuidar. Una buena práctica puede ser utilizar SIEMPRE la sintaxis de las mayúsculas cuando el nombre de una variable (o función) consta de más de una palabra.

2.- Tipos de datos

El valor de variable debe corresponder a uno de los tipos de datos con que el programa puede trabajar. Más concretamente, debe corresponder con el de la variable en cuestión. Los más comunes en Processing son int (números enteros), float (número con decimales), boolean (verdadero o falso), color (que de hecho es una estrucutra compleja formada por quatro enteros) y string (cadena de carácteres).

Obviamente están en la referéncia:

Estos y otros tipos de datos se pueden utilitzar como se ve en el ejemplo siguiente:

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ácteres

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);

3.- Variables de sistema

Las variables de sistema no dejan de ser variables. Es decir, nos referimos a ellas por su nombre y contienen un valor.

Su característica especial es que no las tenemos que declarar, ya que, al ser de sistema, son accesibles y calculadas automáticamente para nosotros.

Por ahora, nos interesará ver estas variables de sistema:

width : ancho de la ventana

height : alto de la ventana

mouseX : posición del ratón en el eje X

mouseY : posición del ratón en el eje Y

Con with y height, nos ahorramos de ir constantemente a la función size() para recordar qué tamaño de ventana estamos utilizando. Y aún más improtante, si utilizamos with y height podemos cambiar el tamaño de la ventana sin alterar la posción y tamaño relativos de los objetos:

size(300,300);

ellipse(width/2,height/2,width-20,height-20);

Si cambiamos la primera línea de código, no hace falta tocar la segunda:

size(120,120);

ellipse(width/2,height/2,width-20,height-20);

4.- Setup y Draw: Processing en movimiento

Si hay algo muy específico de Processing (y que pone especialmente nerviosos a algunos programadores de verdad) son el void setup() y el void draw().

Podéis ignorar por ahora el "void" y los paréntesis del final sin nada dentro (és un tema de funciones).

Lo importante es que setup y draw son las dos funciones principales de Processing. Las que se ejecutan siempre. Primero setup, una sola vez, y luego draw repetidamente. Esto es lo que rompe la lineariedad estricta en la lectura y ejecución del código, y lo que nos permite hacer cosas mucho más interesantes que simples dibujos.

Hasta ahora las hemos ignorado porque el código que utilizábamos se ejecutaba una sola vez, de arriba a abajo. Ahora, todo lo que esté dentro de draw se va a ejecutar repetidamente, también de arriba a abajo, hasta que paremos el programa (también hay la opción de pararlo con código, pero por ahora lo ignoramos).

Con los dos ejemplos que siguen debería verse claro. Mirad el código, analizadlo, y después lo ejecutáis a ver si se cumplen vuestras predicciones:

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);
}

y si retomamos el último ejemplo de las variables de sistema, con la ellipse, podemos ver como combinando éstas con una variable convencional y con setup() y draw() podemos por fin tener una cierta (aunque básica) interactividad:

int sz = 30;

void setup(){
size(200,200);
}

void draw(){
ellipse(mouseX,mouseY,sz,sz);
}

Y finalmente, añadiendo una sola línea, borramos en cada frame el dibujo anterior para dar la sensación de movimiento:

int sz = 30;

void setup(){
size(200,200);
}

void draw(){
background(0);
ellipse(mouseX,mouseY,sz,sz);
}

...y como siempre, la referéncia de Processing:

setup

draw

5.- PRÁCTICA

Parte 1: Reproducir los dos siguientes dibujos (no hace falta hacer una reproducción exacta de los dibujos, sino simplemente una aproximción).

a) el huevo pirata:

dib2

b) microchip:

dib3

c) Opcional: el bicho

dib4

Parte 2: Modificar uno de los dibujos para que se pueda cambiar el tamaño de la ventana con size sin que esto altere las proporciones del dibujo y su posición respecto a la pantalla, como pasaría en un proyecto que ha de funcionar a varias resoluciones distintas.

Parte 3: Modificar uno de los dibujos para que siga siempre la posición del mouse como en el ejemplo (sin que tenga que ser tan pequeño!):