Visualización de contadores
En ocasiones buscamos mostrar de manera visual el resultado de un conteo, como el número de veces que sucedió algún evento.
1 Contadores
Un contador es una variable de tipo entero (int) que incrementamos en uno.
[Variables: Contadores, Acumuladores, Banderas]
1.1 Declaración e inicialización
Necesitamos declarar y dar un valor inicial al contador antes de utilizarlo.
int cuenta = 0;1.2 Cuenta
Podemos utilizar cualquiera de las siguientes notaciones para indicar un incremento en uno a la variable.
La que decidamos usar ha de ir dentro del bloque de código correspondiente al evento que queremos contar:
// todas estas son equivalentes:
cuenta = cuenta + 1;
cuenta += 1;
cuenta++;1.3 Reinicia
Si en algún momento deseamos reiniciar la cuenta, basta con asignarle el valor de cero como parte del bloque de código correspondiente a ese reinicio:
cuenta = 0;1.4 Ejemplo
El siguiente código es una animación de un cuadrado que desciende y al llegar hasta abajo reinicia su posición; es un ejemplo de animación básica con acumuladores y expresiones condicionales.
[Animación básica con acumuladores]
Nota el uso de una variable que funciona como contador, incrementándose cada vez que el cuadrado llega hasta abajo
int cuenta; // 1) declaración del contador
float y;
void setup(){
size(400, 400);
y = -50;
cuenta = 0; // 2) inicialización del contador
}
void draw(){
background(0);
// cuadrado dibujado respecto a "y":
rect(150, y, 50, 50);
// incremento de "y":
y = y + 2;
// reinicia "y" cuando sea mayor o igual a height
if( y >= height){
y = -50;
cuenta++; // 3) incremento del contador
}
}2 Cambio de dimensiones
Una forma común de visualizar un contador es con alguna figura básica que cambia sus dimensiones de manera proporcional al valor de la variable.
El siguiente ejemplo es un rectángulo en 0,0 que crecerá 10 pixeles a la derecha con cada incremento del contador, y que tiene 20 pixeles de altura:
// rectángulo con ancho en función de 'cuenta'
rect( 0, 0, cuenta*10, 20);Alternativamente, podemos utilizar la función map( ) para definir el rango de nuestro contador y las dimensiones correspondientes.
El siguiente ejemplo es un rectángulo que decrece con cada incremento del contador:
// calcula el ancho en función de 'cuenta'
// rango del contador: 0 a 10
// rango del ancho: 200 a 0
float ancho = map( cuenta, 0, 10, 200, 0);
rect(0, 0, ancho, 20);3 Indicadores con condicionales
Podemos utilizar condicionales para modificar un dibujo de acuerdo al valor del contador.
3.1 Acumulación de indicadores
El siguiente ejemplo dibuja de 1 a 5 puntos horizontales de manera condicional de acuerdo a la cuenta:
strokeWeight(5);
if( cuenta >= 1 ){ // si la cuenta es mayor o igual a 1...
point(10, 10); // dibuja primer punto
}
if( cuenta >= 2){
point(20, 10); // dibuja segundo punto
}
if( cuenta >= 3){
point(30, 10); // dibuja tercer punto
}
if( cuenta >= 4){
point(40, 10); // dibuja cuarto punto
}
if( cuenta >= 5){
point(50, 10); // dibuja quinto punto
}Nota que cada expresión condicional funciona por separado (no hay else if), pues queremos que sea posible que más de una sea verdadera a la vez.
3.2 Indicadores por número
Alternativamente podemos definir un dibujo distinto por cada valor posible del contador.
Este ejemplo muestra una combinación diferente de puntos según el número:
strokeWeight(5);
if( cuenta == 1){
point( 40, 40 ); // punto al centro
}
else if( cuenta == 2){
point( 20, 20 );
point( 60, 60 );
}
else if( cuenta == 3){
point( 20, 20 );
point( 40, 40 ); // punto al centro
point( 60, 60 );
}
// etc...Nota que aquí usamos else if para dejar(nos) claro que en un momento dado solo puede ocurrir una de todas las opciones.
4 Texto
Podemos literalmente escribir el valor del contador utilizando funciones de texto:
textSize(50);
text( cuenta, 20, 50); // escribe el valor de 'cuenta' en 20, 50