Curso Processing - Unidad 2

8/6/2021 Unidad 2
Unidad 2
Sitio: Cursos Educ.ar Imprimido por: Fabio González

Programación visual de imágenes: introducción a Processing Día: Tuesday, 8 de June de 2021, 09:22
Curso:
(2102)
Libro: Unidad 2
https://cursos.educ.ar/mod/book/tool/print/index.php?id=4076 1/14
8/6/2021 Unidad 2
Tabla de contenidos
1. La consola
2. La pantalla
3. Espacio de color
4. Dibujar líneas
5. Dibujar rectángulos
6. Dibujar triángulos
7. Dibujar círculos
8. Eventos del ratón
9. Desafío
8/6/2021 Unidad 2
1. La consola
Además de informar errores, la consola puede servir para visualizar información que consideremos relevante. Para ello se utilizan las funciones
print() y println().

8/6/2021 Unidad 2
2. La pantalla
Utilizando la función size(); dentro de setup(), le podrás indicar a Processing de qué tamaño será la ventana dónde se mostrarán las figuras.
Entre paréntesis colocá primero el valor del ancho en píxeles y, separado por una coma, el valor del alto también en píxeles.
Por ejemplo, en la siguiente imagen, la ventana tiene un ancho de 800px y un alto de 600px.
Si no sabés el tamaño de la pantalla de tu dispositivo y deseás que la ventana ocupe toda la pantalla, podés escribir la función de esta forma:
size(displayWidth,displayHeight);
8/6/2021 Unidad 2
3. Espacio de color
Por defecto, Processing trabaja con el espacio de color RGB (red, green, blue), que está representado por los colores rojo, verde y azul. Cada
uno de ellos adquiere un valor entre 0 y 255.
Por ejemplo, para determinar un fondo negro podrás utilizar la función background(0,0,0); o background(0);, ya que si los tres valores son
iguales, se pueden colocar una sola vez. Y para un fondo blanco background(255,255,255); o background(255);.
Estas son algunas variantes:
background (255,0,0); //fondo rojo
background (0,255,0); //fondo verde
background (0,0,255); //fondo azul
background (255,0,255); //fondo violeta
Con la función colorMode(HSB); se puede cambiar al espacio HSB (hue, saturation, brightness), que se compone de tono, saturación y brillo o
matiz, saturación y valor.
8/6/2021 Unidad 2
Para volver al espacio RGB, basta utilizar la función colorMode(RGB);. En este curso, se utilizará el espacio de color RGB.

8/6/2021 Unidad 2
4. Dibujar líneas
Para empezar a dibujar en Processing, vas a comenzar trazando unas líneas con la instrucción:
line(x1,y1,x2,y2) ;
Los valores de x1,y1 indican la posición donde comienza la línea, mientras que x2,y2, donde termina.
Por ejemplo, en el siguiente caso, la línea comienza en x = 200, y = 0 y termina en x = 200, y = 600. Dado que coincide el valor de x, la línea
resultante es vertical.
line(200,0,200,600) ;
En el caso de las líneas horizontales, se mantiene constante el valor de y:
line(0,200,800,200) ;
Y finalmente, en el caso de líneas diagonales, no se mantiene constante el valor de x ni de y:
line(0,0,800,600) ;
Podemos verlo en el siguiente video:
8/6/2021 Unidad 2
5. Dibujar rectángulos
Para dibujar rectángulos se utiliza la siguiente función:
rect(x,y,ancho,alto);
Los dos primeros valores corresponden a la posición de inicio de la figura, luego se indica el ancho y el alto.
El método también acepta estas modalidades:
rect(x,y,ancho,alto,valor1);
rect(x,y,ancho,alto,valor1,valor2,valor3,valor4);
En el primer caso redondea todas las esquinas por igual según el valor ingresado, mientras que en el segundo los valores afectarán a las
puntas en este orden: primero la superior izquierda, luego la superior derecha, inferior derecha e inferior izquierda.
En el video del ejemplo, se determinó como posición inicial el centro de la ventana (x = 400, y = 300).
Sin embargo, la figura no está centrada. Esto se debe a que, por defecto, la esquina superior izquierda se encuentra en el centro de la pantalla.
Dicha configuración se puede cambiar con la función rectMode(), como se observa a continuación:
8/6/2021 Unidad 2
6. Dibujar triángulos
Dibujar un triángulo es muy similar a un rectángulo, pero se utiliza la función triangle(). Se debe especificar la posición x e y de los tres puntos
que lo componen, como se observa en la imagen.
8/6/2021 Unidad 2
7. Dibujar círculos
En el caso de los círculos, se utiliza la función circle(). Tal como se observa en la imagen, los dos primeros valores corresponden a la posición
del centro del círculo y el tercero, a su radio.
En el caso de querer dibujar una elipse, se utiliza la función ellipse () y se indican tanto la posición del centro como el ancho y el alto de la
figura.
8/6/2021 Unidad 2
Sin embargo, en ambos casos el centro de la figura no coincide con la posición real del centro, ya que, al igual que con los rectángulos, se
comienza a dibujar desde la esquina superior izquierda.
Para modificar esto se utiliza la función ellipseMode();. Su valor por defecto es elipseMode(CORNER);.
8/6/2021 Unidad 2
Para que el centro que colocamos en la función sea el centro de la figura, debemos utilizar elipseMode(CENTER); antes de dibujar la figura (si
se coloca después no tendrá efecto).
8/6/2021 Unidad 2
8. Eventos del ratón
Además de las funciones que ya se mencionaron, Processing incorpora otras que se ejecutan cuando detecta un evento del ratón o mouse
(clic, se arrastra, etc.). Dichas funciones reconocen cuando se hace clic, y se escriben por fuera de las funciones draw() y setup().
Un ejemplo de ellas es la función void mouseClicked() {}, como se observa a continuación:
8/6/2021 Unidad 2
9. Desafío
En esta oportunidad, te proponemos que crees un programa donde dibujes una figura utilizando al menos dos funciones de las vistas en la
unidad cada vez que se haga clic. Por ejemplo, combinando cuadrados, triángulos y líneas.

Curso Processing - Unidad 2

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Processing - Unidad 2

Cargado por

Copyright:

Formatos disponibles

8/6/2021 Unidad 2

Sitio: Cursos Educ.ar Imprimido por: Fabio González

8. Eventos del ratón

Estas son algunas variantes:

background (255,0,0); //fondo rojo

background (0,255,0); //fondo verde

background (0,0,255); //fondo azul

background (255,0,255); //fondo violeta

En el caso de las líneas horizontales, se mantiene constante el valor de y:

Y finalmente, en el caso de líneas diagonales, no se mantiene constante el valor de x ni de y:

Podemos verlo en el siguiente video:

Para dibujar rectángulos se utiliza la siguiente función:

El método también acepta estas modalidades:

8. Eventos del ratón

Un ejemplo de ellas es la función void mouseClicked() {}, como se observa a continuación:

También podría gustarte