2. Conociendo “Response” En este capítulo del libro Getting Started Book se pretende utilizar las diferentes herramientas que tenemos a nuestro alcance, el mouse y el teclado, y lograr de esta manera que el código responda ante estas entradas, o inputs. Para lograr esto, la herramienta básica de Processing es Draw () que se escribe de la siguiente manera en el programa: Para poder demostrar como funciona Draw, o como este corre en tiempo continuo lo más simple es escribir un mensaje como el siguiente:
3.
4. El mensaje resaltado en un círculo rojo irá corriendo continuamente, desde arriba hacia abajo, a menos que le hagamos click al botón Stop. Esta es la única forma para lograr que el conteo y el mensaje no siga corriendo. Lo mismo sucedería si estamos dibujando un trazo. Velocidad del conteo Ésta depende de la cantidad de cuadros por segundo llamado frame en Processing. Este se escribe de la siguiente manera:
5. En el ejemplo anterior ocupamos otro tipo de frame llamado frameCount el cual determina el conteo, o la velocidad y cantidad con la cual aparece el mensaje en el rectángulo negro. Con frameCount el conteo va en orden continuo y funciona a un cuadro por segundo, a diferencia de lo que se consigue con frameRate donde se puede aumentar a mas cuadros por segundo la velocidad de dicho mensaje. En este caso debemos especificar antes a que herramienta queremos integrarle este conteo o velocidad en la cual corre, y luego poner entre paréntesis el código frameCount. En este caso solamente es necesario poner entre paréntesis la cantidad de cuadros por segundos que se quiere reproducir el mensaje.
6. Existe otra función de Processing que permite establecer valores que no cambiarán a lo largo de todo el código y que se tomarán como base o punto de partida para comenzar dicho código, esta función es setupy se escribe de la siguiente manera: Generalmente los valores más comunes en ubicarse en esta función son size, filly stroke. Valores numéricos solamente de ejemplo
7. De esta manera podemos diferenciar entre Draw y Setup que, el primero se ejecuta continuamente, y que Setup es una función que sólo se ejecuta una vez, o sea es estable. Ambas trabajan en conjunto, como en el siguiente ejemplo: Así es como se verá:
8. Following Ya conocemos lo que realiza Setupy lo que por su parte hace Draw, de esta manera sabemos que podemos mantener un código ejecutándose continuamente y si a esto le sumamos el movimiento del mouse o el presionar alguna tecla para seguir este código continuo, podemos dibujar una estela, líneas o la forma que queramos y hacer que sigan el movimiento del mouse. Para esto es necesario digitar dos nuevas funciones mouseXque contiene las coordenadas X del plano cartesiano y mouseY que contiene las coordenadas Y de dicho plano, y se escriben de la siguiente manera: “ellipse” solo es un ejemplo al igual que los valores numéricos, estos pueden ser cualquiera.
9. Un ejemplo de Setup y de Draw trabajando en conjunto, donde la ellipse se va dibujando continuamente y sigue el mouse: Así se verá:
10. En este otro ejemplo podemos ver como el punto sigue al mouse, y no dibuja, simplemente está como pegado a al puntero. Esto se logra agregando la función Backgrounden Draw, ya que de esta manera el fondo se va repitiendo continuamente, va limpiando la ventana: Así se verá:
11. Existen dos funciones que van en conjunto con mouseX y mouseY, estas son pmouseX y pmouseY, estas permiten dejar constancia de la ubicación del mouse en trazo en general, desde el comienzo. Estas se escriben asi: Un ejemplo: Así se verá:
12. Las variables pmouseX y pmouseY pueden también ser usadas para calcular la velocidad del mouse.Siel Mouse esta moviéndose lentamente, la distancia es chica, pero si el Mouse comienza a moverse rápidamente, la distancia crece. Y esto se logra mediante a la integración de otra función Dist como se muestra en el ejemplo: Así se verá:
13. MAPA Los números son utilizados para dibujar en la pantalla, esto es de gran utilidad para convertir los valores desde un rango de numero de otro. Ej 5-10: Valores de mapa a un rango La variable mouseX es usualmente entre 0 y el ancho de la ventana, pero es posible que desee volver a asignar los valores a un rango diferente de coordenada. Se puedes hacer esto para fabricar cálculos como dividir mouseX para reducir este rango y luego adicionando o sustrayendo un numero para cambiar esto a izquierda o derecha: void setup() { size(140, 90); strokeWeight(12); smooth(); } void draw() { background(232, 246, 5); stroke(90, 232, 12); line(90, 100, mouseX, mouseY); // line stroke(0); float mx = mouseX/2 + 60; line(120, 60, mx, mouseY); // line }
14. La función map() es una manera mas general para hacer este tipo de cambios. Esta conversión de variables desde un rango de número a otro. El primer parámetro es la variable para ser convertida. El segundo y tercer parámetro son los bajos y altos variables, y el cuarto y quinto parámetro son los valores deseados bajos y altos. La función map() oculta las matemáticas detrás de la conversión. Ej 5-11 El mapa con la funcion map() Este ejemplo vuelve a escribir el ejemplo 5-10 usando map() void setup() { size(240, 120); strokeWeight(12); smooth(); } void draw() { background(204); stroke(246, 5, 198); line(120, 60, mouseX, mouseY); // White line stroke(0); float mx = map(mouseX, 0, width, 60, 180); line(120, 60, mx, mouseY); // Black line }
15. La funcion map() hace fácil el código para leer, porque los valores mínimos y máximos son limpiamente escritos como un parámetro. En este ejemplo los valores de mouseX entre 0 y el ancho son convertidos para un numero desde 60 (cuando el mouseX es 0) hasta 180 (cuando mouseX es el ancho). Se podrías encontrar útil la función map en muchos ejemplos a través de este libro.
16.
17. Una estructura de if puede ser usada con los valores mouseX y mouseY para determinar la ubicación del cursor dentro de la ventana. Ubicación
18. Este ejemplo sirve de prueba para ver si el cursor está sobre el lado izquierdo o derecho de una línea y luego mueve la línea hacia el cursor: http://www.openprocessing.org/visuals/checkVisual.php?visualID=12646 Ejemplo 5-15: Encontrar el cursor
19. Usamos la función dist() para obtener distancia desde el centro del círculo hasta el cursor, luego probamos si la distancia es menor que el radio del círculo (ver figura 5-3). Si lo es, nosotros sabemos que estamos adentro. http://www.openprocessing.org/visuals/checkVisual.php?visualID=12647 Ejemplo 5-17: El límite de un rectángulo http://www.openprocessing.org/visuals/checkVisual.php?visualID=12648 Ejemplo 5-16: El límite de un círculo
20. Processing registra cuando cualquier tecla es presionada, así como la última tecla presionada. Para esto, usamos la variable keyPressed. Tipo
21. En este ejemplo, la segunda línea esta dibujada sólo cuando una tecla esta presionada: http://www.openprocessing.org/visuals/checkVisual.php?visualID=12649 Ejemplo 5-18: Pulse una tecla
22. Este ejemplo introduce la función textSize() para un conjunto de medidas de letras, la función textAling() para centrar el texto sobre las coordenadas X, y la función text() para dibujar las letras. http://www.openprocessing.org/visuals/checkVisual.php?visualID=12650 Ejemplo 5-19: Escribe algunas letras
23. En este ejemplo, nosotros probamos para que sea tecleada una H o N. Utilizamos el operador de comparación, el símbolo ==, para ver si el valor del teclado es igual para el carácter que estamos mirando ahora: http://www.openprocessing.org/visuals/checkVisual.php?visualID=12651 Ejemplo 5-20: Comprobar para una tecla específica
24. Muestra como comprobar las teclas de flecha izquierda o derecha para mover un rectángulo: http://www.openprocessing.org/visuals/checkVisual.php?visualID=12652 Ejemplo 5-21: Moverse con la tecla de la flecha.
