GRAFICACIÓN 2020 -

PROCESSING 3.0

María Luisa Acosta Sanjuán

TECNM Campus Tuxtepec
 GRAFICACIÓN 2020 - PROCESSING 3.0

Contenido
¿Qué es Processing?.....................................................................................................................2
Iniciando y conociendo Processing..............................................................................................3
Tamaño de ventana y color de fondo...........................................................................................7
Actividad formativa 1: ..................................................................................................................9
Introducción Al lenguaje de programación Processing ............................................................9
Actividad 2: ..................................................................................................................................9
Dibujo de formas ......................................................................................................................9
Actividad 3: ................................................................................................................................10
Dibujar en pantalla una linea .................................................................................................10
 GRAFICACIÓN 2020 - PROCESSING 3.0

¿Qué es Processing?
Processing es un lenguaje de programación y entorno de desarrollo integrado
de código abierto basado en Java, de fácil utilización, y que sirve como medio
para la enseñanza y producción de proyectos multimedia e interactivos de diseño
digital. Fue iniciado por Ben Fry y Casey Reas a partir de reflexiones en el
Aesthetics and Computation Group del MIT Media Lab dirigido por John Maeda.

Processing es desarrollado por artistas y diseñadores como una herramienta

alternativa al software propietario. Puede ser utilizado tanto para aplicaciones
locales así como aplicaciones para la web (Applets). Se distribuye bajo la licencia
GNU GPL.

Empieza visitando la página http://processing.org/download y selecciona la

versión que necesites en función de tu sistema operativo (Windows, Linux o
Mac). La instalación sea cual sea el SO (Sistema Operativo) es sencilla.

Para la versión de Windows deberás tener descargado un archivo .zip. Haz clic
en él y arrastra la carpeta que contiene a cualquier sitio de tu disco duro. Podrías
hacerlo en Archivos de Programa o simplemente en el escritorio, pero recuerda
que es importante extraer la carpeta del .zip. Luego haz doble clic en
processing.exe para empezar.

Para la versión de Mac OS X también descargarás un .zip. Haz doble clic sobre
él y arrastra el icono de Processing a la carpeta de Aplicaciones. Si estas
utilizando un ordenador ajeno y no puedes modificar la carpeta Aplicaciones,
también puedes arrastrarlo al escritorio. Después haz doble clic en el icono de
Processing para empezar.

Para la versión de Linux se descarga un archivo tar.gz, que debería ser familiar
para la mayoría de los usuarios de Linux. Descarga el archivo a tu directorio
Home, abre el terminal de Windows y escribe: tar xvfz processing-xxxx.tgz
Reemplaza las xxxx por el nombre de tu archivo, en función de su versión. Otra
opción es descomprimirlo y ejecutar el archivo “Processing”.
 GRAFICACIÓN 2020 - PROCESSING 3.0

Con un poco de suerte, la pantalla principal de Processing estará abierta. La

configuración de cada PC es diferente, así que si tienes algún problema y el
programa no se inicia, visita la página de troubleshooting para buscar posibles
soluciones.

Iniciando y conociendo Processing

Antes que nada conozcamos la Ventana principal de Processing que se abre al
arrancar el programa. La interfaz es muy sencilla y utiliza la sintaxis de JAVA.

Ilustración 1) Iniciando Processing 3 (GET STARTED)

NOTA: Deseleccionamos la casilla de verificación ✔ si no queremos que nos

aparezca la próxima vez que ejecutemos el programa.

El documento generado al abrir Processing se le llama SKETCH.

En términos generales, un sketch es: Escena de corta duración y tono

generalmente humorístico que va intercalada en una representación teatral o
cinematográfica o en un programa de televisión o radio.
 GRAFICACIÓN 2020 - PROCESSING 3.0

En informática Sketch es: Bosquejo rápido que se realiza a mano (con lápiz o
bolígrafo) sobre papel para reflejar la primera idea o concepto, constituyendo así
el punto de partida de lo que será el producto final.

Esta palabra es utilizada en Diseño WEB, Arduino, Arquitectura, etc.

Un programa de Arduino se denomina sketch o proyecto y tiene la extensión . ...

setup() es la parte encargada de recoger la configuración y loop() es la que
contiene el programa que se ejecuta cíclicamente (de ahí el término loop –bucle-
). Ambas funciones son necesarias para que el programa trabaje.

Luego entonces, Processing es un software que funciona como Sketch para

creación de prototipos y como compilador para aplicaciones
visuales/interactivas. Aunque su modo principal es Java, también se puede
trabajar con otros como con Python, Android, etc.

Así que de aquí en adelante, hablaremos de esketches mientras estemos

trabajando con este software..

Processing en una aplicación de código libre que nos permite escribir, editar,
compilar y ejecutar código Java. Antes de adentrarnos en Processing será
conveniente que recalquemos o ya se da por entendido que el estudiante sabe
y tiene la competencia en Java, incluso antes de eso, sabe algo más sobre la
programación en general.

Si ya han trabajado con Arduino, esto les parecerá muy familiar ya que tiene un
entorno similar. Es bastante sencillo. Tiene herramientas para fuentes,
depuración, editar, ayuda online, etc., el espacio de trabajo y el área de consola.

Al abrir Processing aparece una ventana(IDE) con espacio para escribir lo que
será un SKETCH (documento de Processing).
 GRAFICACIÓN 2020 - PROCESSING 3.0

Ilustración 2) Ventana(IDE) de Processing

Se tienen dos botones en la esquina superior izquierda: Ejecutar y Detener.

Ejecutar permite compilar el código escrito, mientras que Detener

detiene (y cierra) la ventana.

Debajo existe la Consola (donde podemos imprimir libremente) y Errores que

mostrará los detalles (errores y alertas) del código según se escriba.

Si se ejecuta el sketch (CTRL+R / CMD+R) se abrirá una pequeña ventana vacía:

 GRAFICACIÓN 2020 - PROCESSING 3.0

Esta ventana muestra el código compilado. Como actualmente no existe código

únicamente aparece con las características iniciales.

Para crear las primeras líneas de código se deben escribir dos funciones (void)
setup() que nos deja inicializar variables y asignar los parámetros básicos y
draw() que es una función que trabaja en modo de ciclo (loop) y nos deja trabajar
“en tiempo real”.

void setup(){

void draw(){

Para comprender cómo funcionan vamos a imprimir una línea en la consola

dentro de cada una de las funciones utilizando la función println(“”) :

Cuando se ejecute el sketch se verá que en la consola aparecerá una lista

interminable de “LINEA EN DRAW”. Cerremos la ventana de ejecución (esto
detendrá la impresión de linea) y hay que ir con scroll hasta el principio en la
zona de consola:
 GRAFICACIÓN 2020 - PROCESSING 3.0

Ilustración 3) Impresión de linea

La linea “LINEA EN SETUP” fue impresa una sola vez y “LINEA EN DRAW” fue
múltiples veces y no se detuvo hasta que se cerró la ventana de ejecución.
setup() se ejecuta una sola vez y lo hace al principio del proceso, mientras que
lo que se encuentre dentro de draw() se repetirá frame tras frame hasta que se
termine el proceso (cierre de ventana de ejecución).

Tamaño de ventana y color de fondo

Para asignar un tamaño a la ventana se utiliza size(ancho,alto); dentro de

setup(). También si se quiere asignar un color de fondo se puede agregar con
background(0); [en los paréntesis se pueden establecer valor de color rgb,
hexadecimal (sustituyendo # por 0x) o mediante escala de grises (con un sólo
número de 0 a 255)]:

Ilustración 4) Espacio de trabajo (skectch)

Al ejecutarlo, éste sería el resultado:

 GRAFICACIÓN 2020 - PROCESSING 3.0

Ilustración 5) Ventana con tamaño y Color personalizado

El manejo de pantalla es:

size(ancho, alto); // pixeles
Bajo el concepto básico de las primitivas donde una de ellas es líneas, tenemos
el formato:
line( x,y,x’,y’);
background(color); //Fondo de pantalla
NOTA: Prueba con otros colores de la ventana y tamaño diferente.
Pruebe otra forma de dar background a su ventana, como por ejemplo:

void
setup(){
size(440,550);
background(200, 200, 0); //rbg verde
background(0, 200, 255); //rbg azul
background(200, 100, 200); //rbg rosa
 GRAFICACIÓN 2020 - PROCESSING 3.0

background(0x33ff00); //hexadecimal verde

background(0xaa0000); //hexadecimal rojo
}
void draw(){
}

¿Cuál es el resultado?

Presentarlo en el formato de practica1.

Actividad formativa 1:
Introducción Al lenguaje de programación Processing

Elaborar un reporte de práctica donde informe todos los pasos que siguió, desde:

Dónde descargó Processing, cómo lo instaló y cuáles fueron las pruebas que
realizó para saber que en verdad el software funciona adecuadamente en su
equipo y sistema operativo.

Mostrar resultados personales.

Actividad 2:
Dibujo de formas
Para dibujar un círculo (elipse) utilizaremos ellipse(posicionX, posicionY, ancho,
alto);

Ya una vez que nos hemos familiarizado con el lenguaje, vamos a empezar a
realizar actividades básicas para practicar la sintaxis.

void setup(){
size(440,550);
background(200, 200, 0); //rbg verde
ellipse(100,100,80,80);
}

void draw(){

}
 GRAFICACIÓN 2020 - PROCESSING 3.0

Al ejecutarlo.. ¿Cuál fue el resultado?

Actividad 3:
Dibujar en pantalla una linea
int x=0;
void setup(){
size(800,600);
}
void draw(){
background(255); //Limpia la pantalla

line(x,500,200,300); //imprimiendo una linea

x=x+1;
println(x);
}
Describa lo que realiza el programa de acuerdo a los resultados que mostró al
ejecutarlo.