3. Formas básicas

Ya hemos visto cómo, con la instrucción size(width,height), se define el tamaño de la pantalla donde crearemos nuestro proyecto, con el formato "(ancho/alto)" en píxeles. A la vez, podríamos utilizar colores para el fondo de esa pantalla con la instrucción background(R,G,B); por ejemplo, podríamos utilizar la combinación (0,255,0) para definir un fondo verde:

Para trabajar con el color en Processing, podemos utilizar tres sistemas distintos:

• El RGB, en el que cualquier color se puede conseguir mezclando el R (red-rojo), el G (green-verde) y el B (blue-azul). 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 (0 es totalmente transparente y 255 es totalmente opaco; el valor tomado por defecto, si no se usa el parámetro, es 255).

• #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 para cualquier color podemos utilizar una herramienta de la que dispone Processing, haciendo clic en Herramientas/Selector de colores…

Una vez definido el lienzo, podemos dibujar diversas formas básicas en él, como por ejemplo:

• Punto. En la instrucción point(x,y); x es la posición en el eje X, e y es la posición en el eje Y. Por defecto, el punto se dibujará con grosor de 1 píxel.

• Línea. En la instrucción line(x,y,x2,y2); x e y indican el punto donde se inicia la línea, mientras x2 e y2 son las coordenadas del punto final de la misma.

• Rectángulo. En la instrucción rect(x,y,ancho,alto,radio); x e y definen el punto de partida (por defecto la esquina superior izquierda); a continuación, se señalan el ancho y el alto del rectángulo en píxeles y en sentido creciente de los ejes. El parámetro radio es opcional y permite dibujar rectángulos con esquinas redondeadas.

• Cuadrilátero. En la instrucción quad(x1,y1,x2,y2,x3,y3,x4,y4), cada par e coordenadas x,y representa uno de los cuatro vértices del cuadrilátero. El orden en que aparecen las coordenadas dentro de la sentencia es muy importante; Processing va trazando una línea desde las coordenadas x1, y1 hasta x2,y2, y así sucesivamente.

• Elipse. En la instrucción ellipse(x,y,ancho,alto); x e y definen el punto de partida (por defecto el centro de la elipse o círculo y, a continuación, se señalan el ancho y el alto de la misma.

En cuanto a las propiedades de todas estas formas básicas, podemos definir algunas como el fondo, el borde, el relleno,...

TAREAS

Práctica 1. Dibuja tu nombre a partir de las formas básicas explicadas anteriormente.

Práctica 2. Dibuja un triángulo equilátero de 100 px de lado.

Práctica 3. Realiza un programa en el que se genere la siguiente imagen:

Práctica 4. Realiza un programa en el que se genere la siguiente imagen:

Guarda cada práctica con su nombre correspondiente, a partir del siguiente ejemplo, válido para la práctica 1: P1_nombreapellidos.pde.