---
title: "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.

# Contadores

Un *contador* es una variable de tipo entero (`int`) que incrementamos en uno.

[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)

## Declaración e inicialización

Necesitamos declarar y dar un valor inicial al contador antes de utilizarlo.

```java
int cuenta = 0;
```

## 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:

```java
// todas estas son equivalentes:
cuenta = cuenta + 1;
cuenta += 1;
cuenta++;
```

## 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:

```java
cuenta = 0;
```

## 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]](/notas/animacion-basica.html)

Nota el uso de una variable que funciona como *contador*, incrementándose cada vez que el cuadrado llega hasta abajo

```java
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
 }
}
```

# 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:

```java
// 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:

```java
// 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);
```

[[Mapeo/conversión de valores]](/notas/map.html)

# Indicadores con condicionales

Podemos utilizar condicionales para modificar un dibujo de acuerdo al valor del contador.

[[Expresiones condicionales]](/notas/condicionales.html)

## Acumulación de indicadores

El siguiente ejemplo dibuja de 1 a 5 puntos horizontales de manera condicional de acuerdo a la cuenta:

```java
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.

## 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:

```java
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.

# Texto

Podemos literalmente escribir el valor del contador utilizando funciones de texto:

```java
textSize(50);
text( cuenta, 20, 50); // escribe el valor de 'cuenta' en 20, 50
```
