Beruflich Dokumente
Kultur Dokumente
En esta práctica nos vamos a familiarizar con el entorno de desarrollo (IDE) de Processing. La interfaz gráfica de
usuario es muy sencilla, lo que la hace idónea a la hora de aprender de una forma rápida y sencilla. Además, en
esta última versión 3 han incorporado mayores herramientas de depuración que nos serán de gran ayuda a la hora
de encontrar fallos en nuestro código.
En esta práctica ya vamos a generar nuestro primer programa. Será sencillo pero supondrá el pistoletazo de salida
para empezar práctica tras práctica, a generar programas cada vez más complejos y atractivos.
Lo primero es conocer la estructura de los programas en Processing. En su casi totalidad se componen de dos
funciones o bloques cuyos nombres son siempre así:
Por otra parte, es obligado comentar que en todo lenguaje de programación es muy recomendable comentar el
código. Esto es debido a que en muchas ocasiones no es muy intuitivo, se le puede olvidar ciertos detalles al
propio programador al cabo del tiempo, o bien para facilitar la lectura del código a otros programadores (cosa
muy normal ya que los grandes programas suelen ser fruto del trabajo en equipo de numerosas personas a lo largo
del tiempo, con las habituales mejoras y actualizaciones).
Processing es un lenguaje de programación muy visual (de hecho es muy utilizado por profesionales del diseño y
las Artes Plásticas precisamente por ello) por lo que debemos tener bien claro cómo utiliza las coordenadas en el
plano a la hora de dibujar. Veámoslo en la siguiente imagen:
Luego como podemos ver, todo programa en Processing donde utilicemos el entorno gráfico, pasa por definir una
ventana o lienzo donde va a transcurrir la acción del programa. Para ello ya hemos visto que debemos utilizar la
función:
size(ancho,alto);
Vamos a crear nuestro primer programa para crear una ventana o lienzo de 500 pixeles de ancho y 300 de alto:
Processing llama por defecto a los programas generados “sketch”. Por eso el nombre que le asigna es
sketch_XXXXXXX (donde las XXXXX son un número). Nosotros podemos asignarle otro nombre más intuitivo
como “Miprimerprograma”, pinchando en:
Archivo->Guardar como…
Ahora no tenemos más que pinchar en el icono de “Ejecutar” y ver el resultado del programa:
…y observamos cómo nos ha generado la ventana o lienzo con las dimensiones deseadas.
TAREAS
1. Dibujar un lienzo de 500 de ancho y 500 de alto.
En esta práctica vamos a aprender cómo dibujar las formas básicas en Processing.
EL PUNTO
Para ello utilizaremos la función:
point(x,y);
donde “x” es la coordenada X o ancho, e “y” es la coordenada Y o alto (recordad el sistema de coordenadas de
la práctica anterior).
Veamos un ejemplo:
…y su resultado:
…aunque el punto es muy chiquitito (porque es un pixel) pero está ahí. Ya aprenderemos a hacer puntos más
gordos a continuación….
LA LÍNEA
Para ello utilizaremos la función:
line(x1,y1,x2,y2);
x1: posición en el eje X donde se inicia la línea.
rect(x,y,ancho,alto);
CIRCULO Y ELIPSE
Para ello utilizaremos la función:
ellipse(x,y,ancho,alto);
TAREA
Dibujar tu nombre a base de lineas rectas y curvas mediante instrucciones que hemos aprendido en esta práctica.
Práctica 4 – Propiedades de la forma en Processing
Hasta ahora, el fondo de nuestro lienzo era siempre gris y las líneas que generábamos siempre negras. Pues bien,
en esta práctica vamos a aprender a dar color al fondo, al relleno de las figuras y a las líneas.
El RGB, en el que se parte de que cualquier color se puede conseguir mezclando el R (red-rojo), el G
(green-verde) y el B (blue-azul); en tanto pongamos más de uno que de otros. El valor que toma cada uno
de ellos va de 0 a 255. Si se utiliza un cuarto parámetro es para referirnos a la transparencia.
El HSB, en el que se utilizan los parámetros tono, saturación y brillo. El valor que toma cada uno de ellos
va de 1% a 100%. Si se utiliza un cuarto parámetro es para referirnos a la transparencia.
#000000 (notación hexadecimal), donde cada dos cifras de dicho número representa el valor en código
hexadecimal de la componente Red, Green o Blue del color.
Para obtener cualquiera de estos parámetros de cualquier color es muy sencillo con una herramienta de la que
dispone Processing.
Pues visto cómo trabaja el color Processing, vamos a modificar ya el color de las cosas…
FONDO
La instrucción con la que modificamos el fondo del lienzo es:
fill(red,green,blue);
Colocándola antes de llamar a la función de la forma [muy importante]
BORDE
…ahora vamos a ponerle el borde al círculo más ancho. Eso lo hacemos con la función:
strokeWeight(x);
…y ahora le cambiamos el color al borde con la función:
Podéis obervar cómo con estas cuatro funciones hemos ganado mucho en cuanto a color.
TAREAS
1. Realizar un programa que nos genere la siguiente imagen: