Ejecución del programa

PortadaEstructuraPrograma

En el tutorial anterior vimos el manejo de variables, en esta ocasión veremos un poco acerca de la ejecución del programa, es decir la forma en que se ejecutan nuestras instrucciones.

Anterior tutorial

Hasta el momento las instrucciones se ejecutaban de manera secuencial, una por una, desde la primera hasta la última. En algunas ocasiones necesitamos que nuestro programa repita constantemente algunas instrucciones, por lo que regularmente tendremos instrucciones que se ejecutan sólo una vez y también hay instrucciones que se ejecutan repetidamente.

Para definir las instrucciones que queremos que se ejecuten sólo una vez las colocaremos dentro de un segmento llamado setup(), y para definir las instrucciones que se ejecuten repetidamente las colocaremos dentro del segmento draw(). Las instrucciones deberán escribirse entre unas llaves, “{” y “}”.

void setup(){
   //instrucciones que se ejecutan sólo una vez
}

void draw(){
   //instrucciones que se ejecutan repetidamente
}

Ahora haremos un ejemplo muy rápido de como funciona esto, regularmente en el bloque setup() pondremos aquellas instrucciones que configurarán nuestro programa. Por lo que en este bloque pondremos las instrucciones para configurar nuestro canvas, el tamaño y el color.

void setup(){
   //instrucciones que se ejecutan sólo una vez
   size(500,500);   // Tamaño del canvas
   background(255,255,255);   // Color de fondo del canvas
}

void draw(){
   //instrucciones que se ejecutan repetidamente
}

Lo siguiente será agregar un código que buscamos que se ejecute repetidamente. Haremos un programa que aumente el tamaño del círculo, para eso crearemos una variable que aumentará repetidamente.


// Las variables se declaran fuera del bloque setup y draw
int tamano = 0;

void setup(){
   //instrucciones que se ejecutan sólo una vez
   size(500,500);   // Tamaño del canvas
   background(255,255,255);   // Color de fondo del canvas
   fill(255,0,0);   // Color de relleno de figura
   stroke(255,0,0);   // Color de trazo de figura
}

void draw(){
   //instrucciones que se ejecutan repetidamente
   tamano = tamano + 1;   // Esta instrucción aumenta en 1px
                          // el tamaño del ellipse
   ellipse(250,250,tamano,tamano);  // Dibuja el ellipse
}

Al ejecutar el programa verás algo como lo siguiente:

CirculoCrece

¿Ahora se pone interesante el asunto no creen? ya se empieza a ver movimiento en nuestros programas, el programa lo que hizo fue aumentar el tamaño del círculo gracias a que repetimos constantemente dos instrucciones: Una que aumenta el valor de la variable “tamano” y otra que dibuja nuevamente el círculo con el nuevo valor de la variable “tamano”.

¿Se entendió el concepto? Ahora hagamos un programa que haga mover un círculo de izquierda a derecha:


// Las variables se declaran fuera del bloque setup y draw
int posicion = 0;

void setup(){
   //instrucciones que se ejecutan sólo una vez
   size(500,500);   // Tamaño del canvas
   background(255,255,255);   // Color de fondo del canvas
   fill(255,0,0);   // Color de relleno de figura
   stroke(255,0,0);   // Color de trazo de figura
}

void draw(){
   //instrucciones que se ejecutan repetidamente
   posicion = posicion + 1;   // Esta instrucción mueve 1px al ellipse
   background(255,255,255);   // Esta instrucción no fue necesaria
                              // en el código anterior
                              // Intenta quitarla y ve lo que pasa
   ellipse(posicion,250,100,100);  // Dibuja el ellipse
}

El resultado es el siguiente:

CirculoMueve