Actividad 3: Grilla de color interactiva

En esta tercera actividad, crearán un nuevo sketch Processing. Al realizarla, el sketch

generará el siguiente resultado visual:

Grilla de color interactiva

  Abran Processing y creen un nuevo sketch.

Nuevo sketch

 Invocamos a las funciones setup() y draw()

Invocamos a las funciones setup() y draw()

Arte y programación con Processing Página 2

  En la función setup(), creen una ventana de dibujo con las siguientes
dimensiones: 510 𝑥 510 píxeles.
 Para que las formas que dibujen tengan bordes lisos, invoquen a la función
smooth() sin parámetros.
 Se desea que la visualización realice un efecto de parpadeo. Esto se logra
mostrando varios cuadros por segundo. Invoquen a la función frameRate() y
especifíquenle que muestre 5 cuadros por segundo.
 Como las figuras tienen bordes lisos, tampoco dibujarán su contorno.
 Cambien el fondo de la ventana de dibujo según estos valores: la coordenada 𝑥
del mouse, la coordenada 𝑦 del mouse, un número aleatorio entre 0 y 255 y
100 de opacidad.
 Como observamos en la visualización de ejemplo, hay dos grillas de círculos:
una de círculos de mayor tamaño y otra de círculos más pequeños que no se
solapan entre sí. Crearán las mencionadas grillas.
 Comiencen dibujando los círculos más grandes, de izquierda a derecha y de
arriba hacia abajo. Para ello, utilicen dos bucles for anidados. El primer bucle
for dibujará los círculos a lo ancho de nuestra ventana de dibujo y el segundo
bucle for dibujará los círculos de arriba hacia abajo. En consecuencia, las
variables de sistema width y height les serán de gran ayuda para lograrlo.
 En el primer bucle for, la variable del contador se llama 𝑖, es del tipo flotante,
donde 12,50 ≤ 𝑖 < 𝑤𝑖𝑑𝑡ℎ con un incremento de 25 en 25.
 En el segundo bucle for, la variable del contador se llama j, es del tipo flotante,
donde 12,50 ≤ 𝑗 < ℎ𝑒𝑖𝑔ℎ𝑡 con un incremento de 25 en 25.
 Una vez anidados ambos bucles for, rellenen los círculos grandes con los
siguientes colores: 𝑚𝑜𝑢𝑠𝑒𝑋/2, 𝑚𝑜𝑢𝑠𝑒𝑌/2 y un número aleatorio entre 0 y
255.

Arte y programación con Processing Página 3

  Para agregar interactividad a la visualización, consulten si tienen presionado
algún botón del mouse. Para ello, utilicen un condicional if, cuya condición a
evaluar sea 𝑚𝑜𝑢𝑠𝑒𝑃𝑟𝑒𝑠𝑠𝑒𝑑 == 𝑡𝑟𝑢𝑒. Si se evalúa como verdadera, vuelvan a
cambiar el relleno de los círculos con los colores del paso anterior.
 Fuera del condicional y dentro de los bucles for anidados, dibujen los círculos
con los siguientes parámetros:
 Coordenada 𝑥 de la elipse: 𝑖.
 Coordenada 𝑦 de la elipse: 𝑗.
 Ancho de la elipse: 20 píxeles.
 Alto de la elipse: 20 píxeles.
 Ejecuten el sketch para comprobar que hayan dibujado la grilla de círculos de
mayor tamaño.
 Ahora, hagan lo mismo para dibujar la grilla de círculos de menor tamaño con
los siguientes cambios:
 Las variables contadores de ambos bucles for anidados son 𝑎 y 𝑏,
respectivamente.
 La variable 𝑎 es de tipo entero y 25 ≤ 𝑎 < 𝑤𝑖𝑑𝑡ℎ.
 La variable 𝑏 es de tipo entero y 25 ≤ 𝑎 < ℎ𝑒𝑖𝑔ℎ𝑡.
 El relleno de los círculos ahora es: un número aleatorio entre 0 y
255, 𝑚𝑜𝑢𝑠𝑒𝑋/2, 𝑚𝑜𝑢𝑠𝑒𝑌/2.
 Si hay un botón del mouse presionado, se cambia el relleno a estos
colores.
 Las coordenadas 𝑥 e 𝑦 de la elipse son 𝑎 y 𝑏, respectivamente, y el
ancho y el alto son de 10 píxeles.
 Ejecuten el sketch para verificar que se dibujen nuestros círculos de menor
tamaño sin solaparse.

Arte y programación con Processing Página 4

  Guarden el sketch con el nombre Grilla_de_color_interactiva.
 Entreguen el programa en el espacio de entrega de la actividad Grilla de color
interactiva.

Arte y programación con Processing Página 5