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

Sessión 3;

0. Soluciones a la práctica 2
1. Gestión de Archivos: Sketchbook
2. Interfície en profundidad
3. Condicionales
4. Operadores
5. Operadores lógicos
6. Ejemplos
7. Un apunte: números aleatorios
8. PRACTICA

0.- Solución a los ejercicios de la sesión 2

Processing tiene una opción muy interesante, EXPORT, que permite muy fácilmente publicar un Sketch en al web, junto a su código fuente. En este formato cuelgo los archivos de solución a los dibujos de la semana pasada:

Huevo pirata
Microchip
Bicho
Hevo al abordaje

1.- Gestión de archivos: Sketchbook

Sketch folder, .pde, carpeta data...

2.- Interfaz en Profundidad

Una última parada antes de seguir con el código.

Además del primer vistazo que dimos a la interfície, vale la pena repasar algunas opciones más del reducido menú de Processing.

FILE -> EXPORT APPLICATION

Si export sirve para crear un applet (un programa que se ejecuta vía navegador), export applicaiton sirve para tener una aplicación java que con un click se puede ejecutar en cualquier ordenador, prescindiendo del navegador, y por consiguiente de las dificultades que su uso puede contraer en algunas ocasiones.

FILE -> PREFERENCES

Cuatro opciones muy útiles: donde se guardan los sketch, tamaño de fuente en la interfície...

SKETCH -> PRESENT

Ejecutar el programa ocultando todo en la pantalla excepto la ventana de Processing. Esta es la respuesta a: "como se ejecuta un sketch de Processing a pantalla completa?".

TOOLS -> AUTO FORMAT

Da un formato al código que facilita seguir su lógica, en tanto que lo alinea verticalmente (nada como probarlo para entender de qué estoy hablando!). En versiones paleontológicas del programa esta opción se llamaba "Beautify"!

TOOLS -> CREATE FONT

Prepara un archivo fuente para ser utilizado, y nos ahorra tener que buscarlo por nuestra máquina o por la web.

TOOLS -> COLOR PICKER

Un selector de color que permite visualizar, en un color qualquiera, sus valores RGB o HSB para así utilizarlos en el código.

HELP -> REFERENCE

Ir a la magnífica referéncia de processing, donde se explica en detalle y con ejemplos qué puede hacer cada función.

HELP -> FIND IN REFERENCE

Ir al artículo de la referéncia de la función que tenemos sombreada.

Las opciones del menú que no comento aquí son más avanzadas y no las vamos a utilizar en este curso introductorio.

3.- Condicionales

Seguro que os suena aquello de "si P, entonces Q". Pues bién, no vamos a empezar a hacer silogismos ni a estudiar Aristóteles, sino que lo llevaremos a nuestro campo.

En programación, los condicionales son fundamentales. Sirven al programador para establecer el flujo del programa: darle al programa las pautas para tomar decisiones y obrar en consecuencia.

Lo que hacen los condicionales es comprobar si tal o cual condicion se cumple o no. Si se cumple el programa realizará una acción, y si no, realizará otra o nada. Es decir: si se cumple A, entonces haz B. O en inglés: if a, then b. Y todo esto, obviamente, en la sintaxis correspondiente, con sus paréntesis y sus claves:

if(condicion){
hazTalCosa();
}

Como se puede observar, la condición ha de ir entre paréntesis. Luego, abrimos una clave, y las instrucciones que ponemos desde aquí hasta que cerramos la clave, son las que se ejecutaran si la condición se cumple.

En este caso, hazTalCosa(); solo se ejecutará si se cumple la condición. Si no se cumple, no pasará nada.

¿Que pasa si queremos que, según si se cumple o no una condición, se ejecute o una cosa o se ejecute otra (nunca se quede sin pasar nada)? Pues obviamente podemos hacer dos if, then, uno para la condición positiva y otro para la negativa, pero es más eficiente utilizar un if, else. Es decir: si pasa A, haz B, en caso contrario (else), haz C:

if(condicion){
hazTalCosa();
} else {
hazTalOtra();
}

Respecto a las condiciones, en general, éstas estaran compuestas por comparaciones entre valores. Si "a" es mayor a "b", haz X. Si "c" es menor o igual a "d", haz Y. Si "e" no es igual a "f", haz Z, etc.

if(a > b){
hazTalCosa();
}

Estas comparaciones se realizan utilizando los operadores (como veremos en el punto 2). Lo que el if se pregunta, es si el valor de la condición es verdadero o falso. Pero estas condiciones, como veremos en el punto 3, se pueden combinar unas con otras. Así, podemos preguntarnos algo como: Es "a" menor o igual que "b" y además "c" es no igual a "d"? O, complicándolo más: Es "a" mayor a "b" y o bién "c" menor a "d" o bién "f" igual a "g"?

Ya podéis intuir que la cosa se puede ir complicando, pero nunca se nos escapará de las manos si somos capaces de controlar la sintaxis, en este caso, de paréntesis. Lo veremos con los ejemplos.

4.- Operadores

Los operadores (relacionales) nos permiten comparar valores numéricos, normalmente contenidos por variables. En Processing, el operador de igualdad y no igualdad nos permiten también comaparar carácteres i cadenas de carácteres, y valores booleanos. Como hablamos en la primera sesión, los ordenadores son muy buenos y rápidos en guardar valores, hacer operaciones, y compararlos. Pues bién, cuando tiene sentido comparar valores es cuando hacemos condicionales.

Los operadores que podemos utilizar son:

== (igualdad)

Compara dos valores para determinar si son iguales. Es muy importante recordar que son necesarios DOS SIGNOS DE IGUALDAD. Uno solo corresponde a la asignación de un valor (lo que hacemos al dar tal o cuál valor a una variable).

if(a == b){
hazTalCosa();
}

!= (no igualdad)

Compara dos valores para determinar si no son iguales. (Si "a" NO es igual a "b"...):

if(a != b){
hazTalCosa();
}

> (mayor a)

Compara dos valores para determinar si el primero es mayor al segundo:

if(a > b){
hazTalCosa();
}

< (menor a)

Compara dos valores para determinar si el primero es menor al segundo:

if(a < b){
hazTalCosa();
}

>= (mayor o igual a)

Compara dos valores para determinar si el primero es mayor o igual al segundo:

if(a >= b){
hazTalCosa();
}

<= (menor o igual a)

Compara dos valores para determinar si el primero es menor o igual al segundo:

if(a <= b){
hazTalCosa();
}

5.- Operadores lógicos

Si los operadores relacionales nos permiten comparar valores, los lógicos nos permiten comparar condiciones tal y como las definimos en el punto 1. De hecho, lo que comparamos son valores booleanos (verdadero/falso), ya que esto es lo que dan como resultado las condiciones que ponemos entre paréntesis detrás de if.

Así, podemos entender que los operadores lógicos operan sobre valores de verdadero/falso (true/false en Processing, que sabéis que habla inglés!).

Los operadores lógicos son:

&& ("y" lógico)

El "y" lógico compara dos valores booleanos y devuelve verdadero sólamente si los dos valores comparados son verdaderos.

true && true = true
true && false = false
false && true = false
false && false = false

Atención con los paréntesis cuando combinamos condiciones:

if((a < b)&&(c==d)){
hazTalCosa();
}

|| ("o" lógico)

El "o" lógico compara dos valores booleanos y devuelve verdadero si uno de los dos valores comparados son verdaderos.

true || true = true
true || false = true
false || true = true
false || false = false

if((a < b) || (c>d)){
hazTalCosa();
}

! ("no" lógico)

El no lógico no compara valores sinó que lo que hace es invertirlos.

!false = true
!true = false

if(!a){
hazTalCosa();
}

6.- Ejemplos

Todo esto, así en abstracto, suena mucho más complicado de lo que es. Para empezar con lo último que hemos visto, sigue un ejemplo. Podéis cambiar los valores true/false de los booleanos para entender como funcionan el "y" y el "o" lógicos:

boolean condUno = true;
boolean condDos = false;

//comprobamos el "o" lógico
if(condUno || condDos){
print("se cumple el ||");
}
else{
print("no se cumple el ||");
}

//comprobamos el "i" lógico
if(condUno && condDos){
print("se cumple el &&");
}
else{
print("no se cumple el &&");
}

Con un elemento más gráfico, podemos utilizar un condicional para decidir cuando se para una acción:

float pos;

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

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

O lo podemos aplicar a la posición:

float pos;

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

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

O utilizarlos para hacer "rebotar" la pelota en los bordes de la ventana y simular así un espacio cerrado:

int pos, vel;
int sz = 20;

void setup(){
size(300,200);
pos = width/2;
vel = 5;
}

void draw(){

background(0);

//actualitzamos la posición
pos = pos+vel;

//dibujamos
ellipse(pos,height/2,sz,sz);

//comprobamos si está en los límites de la ventana
//si lo está, invertimos el signo de la velocidad:
if((pos<0)||(pos>width)){
vel = -vel;
}
}

Podéis ver como aquí utilizamos un "o" lógico para hacer el condicional con dos condiciones: o bién mayor a WIDTH, o bien menor a ZERO.

8.- PRÁCTICA

Parte 1: Consigue que el rebote de la bola sea como en este ejemplo (no necesariamente tan lento), y sólo en el plano horiziontal:

Parte 2: Consigue el mismo efecto de rebote también en el plano vertical.

Parte 3: Utiliza la posición del mouse para determinar las siguientes condiciones:

El fondo será negro o blanco según el mouse esté más arriba o más abajo de la mitad de la ventana.
El color de la bola cambiará según esta esté en la parte derecha o en la parte izquierda de la ventana.

Ideas: utiliza smooth() para suavizar tus dibujos. Una vez tengas el ejercicio, prueva cambiar la instrucción background() por un fill() con alfa seguido de noStroke() y luego rect(0,0,width,height); y experimenta también con los valores alfa en el resto de colores.

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

-- Estos apuntes son el complemento de una clase al Máster de Artes Digitales de la UPF. No estan pues diseñados para consituir necesariamente un tutorial completo y coherente por si mismos --

-- La licencia CC que había en el tutorial queda anulada a efectos inmediatos en mayo de 2010. Los malos usos de ésta han llevado al autor a esta decisión --

-- Si utilizáis el tutorial para fines docentes, se os agradecerá que lo comuniquéis al autor, para poder listar aquí vuestra clase/asignatura --

-- Podéis contactar con el autor (joan [punto] soler [a] upf [punto] edu) para pedir permiso de cara a la utilización o reproducción parcial del tutorial. Nunca se os pedirá nada material a cambio, sino alguna pequeña contribución al mismo: Nuevos ejemplos, propuestas de mejora en alguna parte, o incluso mejor: Nuevas sesiones que cubran temas que el tutorial no explica: Vídeo, sonido, clases, etc.--