Tomás Domínguez Mínguez - Processing

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.

Una línea (estrictamente hablando sería un segmento, ya que tiene un principio y un fin) es una sucesión de puntos que recorre la distancia más corta entre un punto origen y otro destino. Por este motivo, en Processing una línea se declara indicando el punto inicial y final de dicha línea. Desglosando cada punto en sus correspondientes coordenadas (x, y), la función que tendría que usar sería:

Donde x1, y1 son las coordenadas del punto origen y x2, y2 las correspondientes al punto destino.

En la siguiente figura se ven dos líneas que se cruzan.

La línea vertical tiene un punto origen (30, 10) y un punto final (30, 50), que se pueden declarar como:

Si se da cuenta, las líneas verticales tienen la misma coordenada x en sus puntos origen/destino. Respecto a la línea horizontal, el punto origen sería (10, 30) y el punto final (50, 30). En Processing se declararía como:

Como puede observar, en el caso de las líneas horizontales la coordenada que no cambia en sus puntos origen/destino es la y. Por supuesto, en una línea puede intercambiar sus puntos origen y final, ya que el resultado sería el mismo.

En Processing se puede establecer el tamaño de la ventana de su programa. Para ello se utiliza el siguiente comando:

Una vez establecido el tamaño de una ventana, sus dimensiones quedarán almacenadas en las variables del lenguaje height(alto) y width(ancho).

NOTA.Si se quiere que el programa abarque toda la pantalla del ordenador, utilice el comando fullScreeen()en vez size().

Ahora que sabe dibujar líneas, realizará un sencillo ejercicio que muestre una cuadrícula. El código sería el siguiente:

En primer lugar, declarará la variable que almacena el tamaño de la cuadrícula (20 píxeles).

En el bloque setup() únicamente establecerá un tamaño de ventana de 300 ×300 píxeles.

En el bloque draw()hay dos bucles: uno para dibujar las líneas verticales y otro para las horizontales. En el caso de las líneas verticales va moviendo la coordenada x desde el valor 0 hasta el ancho de la ventana en intervalos del valor de la variable ladoCuadricula. La coordinada x de los puntos inicial y final son iguales. En cambio, la coordenada y varía desde 0 hasta el alto de la ventana (todas las líneas verticales tienen de tamaño el alto de la ventana).

En el caso de las líneas horizontales va moviendo la coordenada y desde el valor 0 hasta el alto de la ventana en intervalos del valor de la variable ladoCuadricula. Ahora es la coordenada y de los puntos inicial y final la que es igual. En cambio, la coordenada x varía desde 0 al ancho de la ventana (todas las líneas horizontales tienen de tamaño el ancho de la ventana).

El resultado que obtendrá será el siguiente:

Finalmente, realizará un simpático pero ilustrativo ejercicio de lo que hace un niño pequeño cuando se le deja delante de una hoja de papel con un bolígrafo. Seguramente empezaría a rayar la hoja de forma aleatoria en cualquier dirección sin levantar el bolígrafo del papel. El resultado sería algo parecido a esto:

¿Cómo se codificaría en Processing? Muy sencillo:

Primero declarará las variables que va a utilizar para especificar las coordenadas de los puntos de inicio (x1, y1) y final (x2, y2) de cada línea.

En el bloque setup()únicamente especificará un tamaño de ventana de 300 × 300 píxeles.

En el bloque loop()calculará las coordenadas de los puntos inicial y final de la línea a dibujar en cada momento. Como las rayas irán en zigzag, ya que parte del supuesto de que los niños no levantan el bolígrafo del papel, en cada ciclo del bloque draw()hará coincidir el punto de inicio de la nueva línea con el final de la anterior. De esa manera, solo será necesario obtener de forma aleatoria las coordenadas del punto final.