ejemplos cambio de estado con eventos

src/actividades/c3-visualizer.md

@@ -175,6 +175,89 @@ void tres(){
 }
 ```
 
+## Cambio de estado con eventos
+
+Estos ejemplos se parecen a los de arriba, pero el cambio de estado sucede dentro de los eventos `keyPressed()` o `mousePressed()`.
+
+Esta plantilla ayuda para cuando queremos que algo suceda justo al *cambiar* de estado, y no *durante* el estado.
+
+### Teclado
+
+Usa los condicionales dentro de `keyPressed()` para realizar las acciones que quieres que sucedan al iniciar dicho estado. Por ejemplo, puedes usar la plantilla para iniciar la reproducción del sonido al presionar alguna tecla.
+
+```java
+int estado = 1; // estado inicial
+
+void setup() {
+  size( 800, 600 );
+}
+
+void draw() {
+  background(0);
+  if ( estado == 1 ) {
+    noStroke();
+    square(350, 250, 100);
+  } else if ( estado == 2 ) {
+    noStroke();
+    circle(400, 300, 100);
+  } else if ( estado == 3 ) {
+    stroke(255);
+    strokeWeight(5);
+    line(0, 300, 800, 300);
+  }
+} // cierra draw()
+
+void keyPressed() {
+  if ( key == '1' ) {
+    // inicia estado 1
+    estado = 1;
+  } else if ( key == '2' ) {
+    // inicia estado 2
+    estado = 2;
+  } else if ( key == '3' ) {
+    // inicia estado 3
+    estado = 3;
+  }
+} // cierra keyPressed
+```
+
+### Mouse
+
+Este ejemplo es muy parecido al de arriba, pero aquí se usa el evento `mousePressed()` para cambiar al *siguiente* estado. 
+
+Nota el uso del condicional para regresar al estado inicial.
+
+Lo que sucede dentro de `mousePressed()` podrías agruparlo en otro condicional que haga que las acciones sucedan solo cuando las coordenadas del mouse (`mouseX` y `mouseY`) se encuentren dentro de cierto rango.
+
+```java
+int estado = 1; // estado inicial
+
+void setup() {
+  size( 800, 600 );
+}
+
+void draw() {
+  background(0);
+  if ( estado == 1 ) {
+    noStroke();
+    square(350, 250, 100);
+  } else if ( estado == 2 ) {
+    noStroke();
+    circle(400, 300, 100);
+  } else if ( estado == 3 ) {
+    stroke(255);
+    strokeWeight(5);
+    line(0, 300, 800, 300);
+  }
+} // cierra draw()
+
+void mousePressed(){
+  estado = estado + 1; // siguiente estado
+  if( estado > 3 ){
+   estado = 1; 
+  }
+} // cierra mousePressed
+```
 
 
 ## Modifica un parámetro con el teclado