Dpto. Producción Multimedial - Tecnología Multimedia 1 - 2015
TP 2 - Interactividad/Variables
Interactividad:
Processing permite interactuar con los periféricos de la computadora, como Mouse y
Teclado. Estas interacciones nos permiten realizar cambios sobre el flujo del programa
independientemente de lo escrito, ya que el resultado del mismo dependerá de las acciones de
o los usuarios que se encuentren utilizándolo. A continuación un detalle de las instrucciones y
funciones que se utilizan para este fin.
mouseX: retorna la posición X en la pantalla del mouse. Este valor es del tipo Float.
mouseY: retorna la posición Y en la pantalla del mouse. Este valor es del tipo Float.
pmouseX: retorna la posición X en la pantalla del mouse, pero del frame anterior. Este valor
es del tipo Float.
pmouseY: retorna la posición Y en la pantalla del mouse, pero del frame anterior. Este valor es
del tipo Float.
mousePressed(): esta es una función que se ejecuta en el momento en el que se presiona
algún botón del Mouse.
Ej:
int valor = 0;
void draw() {
fill(valor);
rect(25, 25, 50, 50);
}
void mousePressed() {
valor = 255;
}
mousePressed: a diferencia de la función mousePressed(), esta es una variable que retorna
una valor booleano, siendo true o false cuando se presione o no alguna tecla del mouse.
Ej:
void draw() {
println("El valor de la presión de una tecla del mouse es:" +
mousePressed);
}
Hasta el momento hemos identificado aquellas instrucciones que nos permiten trabajar
1
Dpto. Producción Multimedial - Tecnología Multimedia 1 - 2015
con el mouse, pero también lo es posible con el teclado. A continuación ejemplo de las
mismas:
key: es una variable del tipo String que posee el valor de la Tecla Presionada.
Ej:
void draw() {
background(255);
println("La última tecla presionada es: " + key);
}
keyPressed(): esta es una función que se ejecuta en el momento en el que se presiona alguna
tecla.
Ej:
int valor = 0;
void draw() {
fill(valor);
rect(25, 25, 50, 50);
}
void keyPressed() {
valor = 255;
}
keyPressed: a diferencia de la función keyPressed(), esta es una variable que retorna una
valor booleano, siendo true o false cuando se presione o no alguna tecla del mouse.
Ej:
void draw() {
println("El valor de la presión de una tecla es:" + keyPressed);
}
2
Dpto. Producción Multimedial - Tecnología Multimedia 1 - 2015
Ejercicios de Interactividad:
1) Realizar un programa que permita mover una figura circular de color negro de la siguiente
forma:
- Al mover el mouse hacia arriba, la figura debe moverse hacia abajo
- Al mover el mouse hacia abajo, la figura debe moverse hacia arriba
- Al hacer click con el mouse, la figura debe pasar a ser azul
- Al presionar una tecla, la figura debe pasar a ser negro
2) Realizar un programa que me permita dibujar en la pantalla, con trazo negro.
3) Tomando el Ejercicio 2), a medida que se va dibujando, el programa me debe permitir
cambiar el color de la figura a Azul a medida que presiono una tecla, y aumentar el tamaño del mismo cuando presione el mouse.
4) Realizar un programa que me permita dibujar una elipse centrada en la pantalla, luego, a medida que muevo el mouse en forma horizontal me permita modificar el ancho, y si lo muevo en forma vertical, modificar el alto.
5) Para qué sirve la función random()? Cuales son las diferencias entre random(50) y
random(-50,50)
Genera números aleatorios. Cada vez que el random() es llamada, devuelve un valor inesperado dentro del rango especificado.
La diferencia es el rango que se especifica para así recibir solo números aleatorios que estén dentro de tal rango.
6) Realizar un programa que se encargue de ubicar 100 cuadrados en posiciones aleatorias de la pantalla, con dimensiones también aleatorias , siendo el tamaño mínimo 50 y el
máximo 200.
Es necesario el uso de ARREGLOS.
7) Realizar un programa que me permita ir moviendo el mouse en la pantalla, y a medida que voy moviendo el mismo, se va desplazando una elipse. Otra cosa es que debe haber 4 líneas que salen de las esquinas y se unen al centro de la elipse, se manera que las 5 figuras se mueven juntas.
8) Realizar un programa que me permita diagramar líneas ubicadas de forma vertical en la pantalla, pero que las mismas se vayan dibujando de acuerdo a la posición X del mouse. Aparte, el color de las mismas debe de ser aleatorio cada vez que se dibujen.
9) Basándonos en la posición del mouse en la pantalla, escribir un programa que permita escribir líneas en la pantalla que partan desde el punto (0,0) y (400,400), hacia la posición del puntero del mouse. La pantalla debe de ser de 400 X 400. Los colores de las líneas que parten desde el punto (0,0) deben poseer la tonalidad verde y el mismo debe variar de acuerdo a la distancia del mouse al punto mencionado. Lo mismo para las líneas que parten desde (400,400) pero con tonalidades azules.
10) Realizar un programa dibuje como si fuese un lápiz, y borre cuando se presiona el botón del mouse, permitiéndome volver a escribir cuando presiono alguna tecla.
11) Para que se utiliza la función noLoop()? Y la función loop()?
El bucle predeterminado de la funcion draw() puede ser detenido llamando noLoop() . En ese caso, el draw() se puede reanudar con loop() .
12) Realizar un programa que me permita ir generando elipses de ancho y alto aleatorio, pero que las mismas se ubiquen en las coordenadas opuestas a la posición del mouse. De esta forma si el mouse se encuentra en (100,100), se deberá generar una elipse en (300,300) (Suponiendo una pantalla de 400 X 400). Si se encuentra en (150,200), deberá estar en (250,200). Al presionar una tecla, se deberá detener la interacción con la pantalla, de manera que no se generen más elipses, y si hago click en la pantalla, me debe permitir volver a interactuar.
13) Realizar un programa que me permita mientras mantengo pulsado el botón del mouse, generar puntos en posiciones aleatorias en una distancia máxima desde la posición del mouse, de 100 pixels.
RAFA
14) Para que se utiliza la función round()?
Calcula el número entero más cercano a el parámetro dado.
Variables:
Las variables son elementos que podemos utilizar en la programación para guardar
información. Está información se almacena en una posición de memoria, y nos permite que
ciertos datos no sean constantes, sino , como su nombre lo indica. puedan ser variables. Si
nosotros indicamos que la dimensión de una figura rectangular sea: rect(100,100,100,200); ,
sabremos que la misma siempre estará ubicada en 100x, 100y y tendrá un ancho de 100px X
200px sin importar el estado del programa.
Las variables nos permiten modificar estos atributos. El uso de variables poseen las
siguientes reglas:
1) Los nombres de las mismas no pueden poseer caracteres especiales: #,@,/,&.(,),$,
y otros.
2) Los nombres nunca comienzan con un número, pero si lo pueden contener en el
mismo. No es válido un nombre como 4valor, pero si valor4 o val4or.
3) Los nombres de las variables usualmente son descriptivos y se utiliza la siguiente
notación para poder comprender mejor: valorMaximo, o indicadorIndiceAumentoDatos.
Al leer estos nombres, vemos que es mucho mas fácil entender para que usamos estas
variables, y no así una variable que tenga un nombre como x o y.
4) Los nombres de variables no usan acentos.
En processing, existen varios tipos de variables, estas son:
* boolean: Permite representar valores lógicos, como Verdadero y False.
* int: Permite representar sólo valores enteros.
* float: Permite representar valores decimales.
* char: Un solo caracter alfanumérico.
* String: Permite representar valores de cadenas o alfanuméricos.
Las variables poseen 2 estados, el de declaración y el de asignación. En el primero
indicamos que tipo de dato contendrá la variable, no pudiendo cambiar el mismo una vez que
el programa se ejecute. La segunda puede ser usada en cualquier momento del programa
todas las veces que se necesite.
Declaración: boolean estadoJuego;
int valorInicial;
float distanciaObjeto;
String nombreUsuario;
Asignación: estadoJuego = true;
valorInicial = 0;
distanciaObjeto = 12.6;
nombreUsuario = "Juan Perez";
Por otra parte, las variables necesitan modificar sus valores para poder representar ciertos
estados, y aquí es donde aparecen las Operaciones. Cada tipo de variable posee un cierto
Operaciones estadoJuego = true && false;
valorInicial = (valorInicial + 12) * (5 / 2) - (8 % 2);
distanciaObjeto = (distanciaObjeto + 12.0) * (5.0 / 2.0) - (8.0 % 2.0);
nombreUsuario = nombreUsuario + " no es Juan";
Estas operaciones representan algunas de las posibles con las variables indicadas.
Ejercicios de Variables:
1) Realizar un programa que dibuje una circunferencia de radio 50 en la esquina superior
izquierda de la pantalla. Luego, por cada fotograma que se dibuje en la pantalla, la
circunferencia debe ir avanzando en diagonal a la esquina inferior derecha.
2) Realizar el mismo ejercicio que el punto 1), pero con otra circunferencia que se vaya desplazando desde la esquina superior derecha, hacia la esquina inferior izquierda. Ambas
circunferencias deberían cruzarse en el medio de la pantalla.
3) Realizar un ejercicio que permita dibujar una fila de circunferencias que toquen sus bordes, de radio 50. El programa debe ser realizado con variables, de forma que solo exista una sola función ellipse.
4) Realizar un programa que permita dibujar un punto centrado en la pantalla, y que este vaya creciendo con forma de cuadrado.
5) Para qué sirve la función println()?
La función println() imprime los datos ordenado en la consola.Esta función suele ser útil para observar los datos de un programa está produciendo.
6) Realizar un programa que arranque con 2 cuadrados en las esquinas superiores, uno en la derecha y otro en la izquierda. Luego 2 círculos en las esquinas inferiores, uno en la derecha y otro en la izquierda. Cada una de estas figuras debe ir incrementando su posición en 1, y cada una en un sentido, así, el cuadrado de la esquina superior izquierda debe ir avanzando hacia la derecha, el de la superior derecha, hacia abajo; el círculo de la inferior derecha hacia la izquierda y el círculo de la inferior izquierda hacia arriba.
7) Al ejercicio del punto 6), agregar la posibilidad de que el color de relleno de cada figura vaya cambiando. Los círculos en escalas de azules y los cuadrados en escalas de verdes. (De los mas claros a los mas oscuros)
8) Al ejercicio 7 agregarle la opción de que cada figura vaya desapareciendo a medida que se encuentra avanzando, llegando a desaparecer completamente al llegar a la esquina opuesta.
9) Identifique el funcionamiento de la función map(). Defina los parámetros que posee.
Calcula un numero de un rango a otro.
Sintaxis map(valor, start1, stop1, star2, stop2)
parametros :
valor float: el valor de entrada que desea convertir.
start1 float: límite inferior del rango actual del valor.
stop1 float: límite superior del rango actual del valor.
start2 float: límite inferior del rango objetivo del valor.
stop2 float: límite superior del rango objetivo del valor.
10) Realice un programa que permita dadas 2 figuras circulares que avanzan cruzando las diagonales principales de la pantalla, cambien los colores de acuerdo a la distancia que haya
entre ellos. Las figuras deben iniciar su recorrido en las esquinas superiores derecha e izquierda.
11) Realice un programa que permita dadas 2 figuras circulares que avanzan cruzando las diagonales principales de la pantalla, cambien su tamaño de acuerdo a la distancia que haya entre ellos. Las figuras deben iniciar su recorrido en las esquinas superiores derecha e izquierda. Al iniciar el recorrido el tamaño debe ser de 0 para ambas figuras y al cruzarse en el centro debe tener el tamaño máximo de que ocupen en la pantalla, debiendo volver a achicarse cuando lleguen a los extremos opuestos.
12) Identifique para qué sirve la función pow().
Facilita expresiones exponenciales. El pow () la función es una manera eficiente de multiplicar los números por sí mismos (o sus recíprocos) en grandes cantidades.
----------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
