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

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.

Finalmente, pintará la línea definida entre dichos puntos.