Getting Started BookCapitulo “Response”

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:

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:

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.

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 setup y se escribe de la siguiente manera:

Generalmente los valores más comunes en ubicarse en esta función son size, fill y stroke.

Valores numéricos solamente de ejemplo

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

Following

Ya conocemos lo que realiza Setup y 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 mouseX que 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.

Un ejemplo de Setup y de Draw trabajando en conjunto, donde la ellipse se va dibujando continuamente y sigue el mouse:

Así se verá:

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 Background en Draw, ya que de esta manera el fondo se va repitiendo continuamente, va limpiando la ventana:

Así se verá:

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

Las variables pmouseX y pmouseY pueden también ser usadas para calcular la velocidad del mouse.Si el 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á:

MAPALos 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

}

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

}

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.

Click• A demás de la locacion del Mouse, processing hace un seguimiento se el boton del Mouse

esta presionado. La variable mousePressed tiene un valor diferente cuando el boton del Mouse esta presionado y cuando no lo esta. La variable mouseePressed es un tipo de dato llamado boolean, cuyo significado que este tiene solo dos valores posibles: verdadero y falso. El valor de mousePressed es verdadero cuando el boton es apretado.

Ej 5-12 Presiona el Mouse• La variable mousePressed es usada a lo largo con la declaracion if para determinar

cuando un codigo de linea se ejecutara y cuando no. Trata este ejemplo después de nuestra explicación detallada:

void setup() {

size(120, 120);

smooth();

strokeWeight(30);

}

void draw() {

background(204);

stroke(5, 209, 246);

line(40, 0, 70, height);

if (mousePressed) {

if (mouseButton == LEFT) {

stroke(255);

} else {

stroke(0);

}

line(0, 70, width, 50);

}

}

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

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

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/chec

kVisual.php?visualID=12648

Ejemplo 5-16: El límite de un círculo

Processing registra cuando cualquier tecla es presionada, así como la última tecla presionada. Para esto, usamos la variable keyPressed.

Tipo

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

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

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

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.