Tomás Domínguez Mínguez - Processing

De la misma forma, si no quiere que se pinte el borde de una figura, indíquelo con el comando:

NOTA.Recuerde que el grosor de un punto, una línea o el contorno de una figura geométrica se declara con el comando strokeWeight(grosor en píxeles).

Para experimentar con todos estos comandos dibujará un semáforo.

Dicho resultado lo conseguirá con el siguiente código:

En el bloque de setup()únicamente establecerá el tamaño de la pantalla en 300 × 600 píxeles.

En el bloque draw()pintará un rectángulo gris dentro del cual situará tres círculos rellenos con los colores de un semáforo. Para dibujar el rectángulo usará la referencia de las esquinas opuestas.

En el caso de los círculos, la referencia será su centro (la que tiene por defecto), alineándolos en vertical (misma coordenada x) utilizando la variable del sistema width.

Para acabar, va a dar color a su emoticono sonriente, que en blanco y negro tenía un aspecto apagado. Se quiere cambiar su apariencia para que ahora sea la siguiente:

El código será muy similar al que ya conoce.

La primera diferencia con el código original es el uso de la sentencia background(), utilizada en el bloque setup()para dar un color de fondo blanco a la ventana.

En el bloque draw()se ha usado la sentencia strokeWeight()para dar un grosor de trazo de la sonrisa mayor que al resto de elementos de la cara. Otra de las diferencias es la utilización de las sentencias fill()para pintar de color amarillo la cara y de negro los ojos; así como la sentencia noFill()para no dar color al arco de la sonrisa.

¿Qué sucedería si no utilizara la sentencia noFill()? Pruebe a quitarla (aproveche también a quitar la sentencia strokeWeight(10)porque al rellenar el arco, ya no sería necesaria). Vea el resultado.

Impresionante, ¿verdad? ¿Se anima ahora a modificar el código anterior para obtener este otro emoticono?

Lo único que tendrá que hacer es sustituir el comando arc(x, y+60, 200, 150, 0, PI)por ellipse(x, y+60, 200, 15).

La forma más fácil de escribir un mensaje de texto es hacerlo en la consola del IDE. Es probable que sea algo que use con frecuencia durante la depuración de programas utilizando el conocido comando println(). Pero Processing es un entorno gráfico y, por lo tanto, también permite mostrar texto en la ventana como si de un elemento gráfico más se tratara. Para ello dispone del comando:

El primer argumento es la cadena de caracteres que se pretende mostrar y x, y las coordenadas del punto a partir del que se va a «dibujar» dicho texto.

NOTA.A diferencia de Arduino, en el que para escribir un mensaje en el monitor serie debe utilizar Serial.println(texto ), en Processing únicamente es necesario poner println(texto ).

Un texto tiene una serie de propiedades básicas que también podrán especificarse, entre las que destacan:

* Color

* Tamaño

* Fuente

Para modificar el color de un texto utilice la función fill(). Su uso es idéntico al ya explicado para rellenar figuras geométricas, por lo que todo lo dicho allí es válido para los textos.

Para modificar el tamaño de un texto utilice el comando:

En el que el argumento tamaño se indica en píxeles.

Para especificar la fuente de un texto utilice el comando:

El argumento de la función es la fuente a utilizar por un texto, que deberá ser de tipo PFont. Opcionalmente, puede añadirle un segundo argumento con el tamaño.

Para obtener la lista de fuentes disponibles en el sistema utilice el siguiente código:

Verá algo similar a lo siguiente:

NOTA.En Arduino la sintaxis que declara un array es:

en vez de la utilizada en Processing:

Como se acaba de indicar, las fuentes que asigne a un texto son del tipo PFont, que han debido ser creadas previamente con el comando: