Читать книгу Processing - Tomás Domínguez Mínguez - Страница 12

El elemento gráfico más elemental es el punto. Pero antes de dibujarlo debe saber cómo indicar a Processing dónde situarlo. Para ello, tiene que ver la ventana de su programa como una hoja de papel cuadriculado. En dicho papel, la intersección de cada línea horizontal y vertical especificaría las coordenadas de cada punto, tal como se muestra en la siguiente figura.

Por lo tanto, las coordenadas de un punto forman una tupla de dos números x (horizontal) e y (vertical) que determina su ubicación en la ventana. Es de destacar que el origen de coordenadas (0, 0) no está situado en el centro de la imagen sino en la parte superior izquierda.

Así, por ejemplo, el punto con coordenadas (10, 10) sería:

Conociendo el sistema de coordenadas utilizado, para indicar a Processing que dibuje un punto utilizaría el siguiente comando:

Es importante destacar que este comando hace referencia a un punto, no a un píxel. Un punto es un concepto cuya mínima expresión correspondería a un píxel. Como los puntos pueden ser más o menos grandes, Processing proporciona otro comando para especificar su grosor:

Donde el grosor viene dado en píxeles.

NOTA. Este comando también es válido para indicar el grosor de las líneas y los contornos de cualquier figura geométrica.

A continuación, se muestra un ejercicio en el que experimentará cómo se va rellenando de negro una ventana utilizando puntos en una posición y grosor aleatorio.

El código que se utilizará será el siguiente:

En el bloque setup() únicamente se fija el tamaño de la ventana en 300 × 300 píxeles.

En el bloque draw() establecerá de forma aleatoria las coordenadas (x, y) del punto que va a pintar, así como su grosor. Para ello, utilizará la función random(), que devolverá un valor de tipo float entre 0 y el número especificado como argumento. Dicho número tendrá que convertirlo posteriormente a entero mediante la función int(), ya que un número de píxeles no puede ser decimal (un píxel es indivisible). El grosor del punto también los establecerá aleatoriamente, pero en un rango de 10-20 píxeles. Por eso, en este caso se utilizará la función random() con dos argumentos, ya que, ahora, el valor que devuelva deberá estar comprendido entre el que ponga en el primer argumento y el segundo.

NOTA. La transformación entre tipos primitivos es una operación muy habitual en todos los lenguajes de programación que se conoce con el término inglés de casting. En este caso, utilizando la función int().

Finalmente, establecerá el grosor del punto y lo dibujará en la coordenada obtenida aleatoriamente en cada momento.

Vea otro ejemplo en el que va a simular cómo se veían las antiguas TV analógicas cuando se quedaban sin señal de antena. Los que ya tenemos «algunos» años lo recordaremos así:

Simularlo es muy sencillo con Processing. Para ello debería escribir un código similar al siguiente.

En el bloque setup() únicamente se define un tamaño de ventana de 300 × 300 píxeles y un grosor de punto de 2 píxeles.

En el bloque draw() se recorre con un doble bucle todos los píxeles de la ventana (de dos en dos para no ralentizar mucho la creación del frame), estableciendo el color del punto de forma aleatoria antes de pintarlo. Al ser el bucle exterior quien recorre la coordenada x, los puntos se pintarán de arriba hacia abajo (en columnas) y de izquierda a derecha. De todas formas, el proceso es tan rápido que no lo apreciará.

NOTA. En el código habrá observado el uso de la función stroke(). Se ha utilizado para establecer el color al punto, algo que explicaré en detalle en un apartado posterior. Para entender el código, de momento solo es necesario saber que stroke(255) permite pintar puntos de color blanco y stroke(0) de negro.