Una pantalla es una cuadrícula de pequeñas luces llamadas pixels. Cada pixel tiene una posición en la cuadrícula definidas por coordenadas.
Las coordenadas X es la distancia desde la esquina superior izquierda de la pantalla y las coordenadas Y es la distancia desde arriba hasta abajo del Display window.
Nosotros escribimos las coordenadas de un pixel de la siguiente manera: (x, y). Entonces, si la pantalla tiene unas dimensiones de 200 x 200 pixeles, la esquina superior izquierda es (0, 0), el centro está en (100, 100), y en la esquina inferior derecha es (199, 199). Estos números pueden ser un poco confusos; ¿Por qué van de 0 a 199 y no de 1 a 200? La respuesta es que en código, usualmente comenzamos a contar desde 0 porque es más fácil para realizar ciertos cálculos en lo que profundizaremos más adelante.
Display window es creado y las imágenes son dibujadas dentro a través de elementos de código llamados funciones.
Las funciones son los bloques básicos de construcción de un programa de Processing.
El comportamiento de una función es definido por sus parámetros.
Por ejemplo, casi todos los programas de Processing tienen una función size() para definir el ancho (width) y el alto (height) del Display Window (ventana de reproducción). Si no incluimos la función size() en nuestro programa su dimensión será de 100 x 100 px de manera predeterminada.
La función size() tiene dos parámetros; el primero define el ancho (width), el segundo define el alto (height). Para dibujar una ventana de 800 pixels de ancho y 600 pixels de alto escribe:
size(800, 600);
Corre esta línea de código para ver el resultado. Introduce diferentes valores y observa los resultados. Prueba números pequeños y números grandes.
La función point() tiene dos parámetros que definen la posición: la coordenada X seguida de la coordenada Y.
Para dibujar un solo pixel negro en el centro de un ventana de reproducción de 400 x 400 px (el punto se encuentra en las siguientes coordenadas 200, 200). Escribe el siguiente código:
Para dibujar un triángulo tendremos que añadir 6 parámetros: dos para el primer punto: x1, y1; dos para el segundo punto x2, y2; y finalmente otras dos para el tercer punto x3, y3.
Podemos dibujar polígonos de cuatro lados con la función quad(). Esta función requiere ocho parámetros para poder funcionar. x1, y1, x2, y2, x3, y3, x4, y4.
Para dibujar un rectángulo necesitaremos introducir cuatro parámetros: el primero y el segundo definen las coordenadas x e y de la esquina superior izquierda, el tercero en ancho y el cuarto la altura.
size(480, 120); rect(180, 60, 220, 40);
En Processing 2 se añadieron nuevas características a la función rect(), permitiéndonos añadir bordes redondeados.
En este caso, tendremos que añadir un quinto parámetro, en pixels, que redondeará nuestro rectángulo.
Si queremos que cada una de las esquinas de nuestro rectángulo tenga un redondeo diferente, podremos hacerlo añadiendo diferentes radios para cada una de ellas. Comenzando desde la esquina superior izquierda y en el sentido de las agujas del reloj, introduciremos valores para cada una de las esquinas.
rectMode()
Por defecto, nuestros rectángulos se dibujan siguiendo el orden de parámetros especificados arriba, pero en algunas circunstancias podemos necesitar modificar el modo de dibujo.
Para ello existe la función rectMode() que modifica el modo en el que serán dibujados nuestros rectángulos. Podemos introducir tres valores en mayúsculas: CORNER, CORNERS, CENTER.
· CORNER: Es el modo por defecto, y el que hemos aprendido arriba. (x, y, width, height). rectMode(CORNER);
· CORNERS: 1º y 2º parámetro = esquina superior izquierda. 3º y 4º parámetro = esquina inferior derecha. rectMode(CORNERS);
· CENTER: Utiliza el primer y el segundo parámetro para establecer el centro del rectángulo, y el tercer y el cuarto parámetro como la anchura y la altura. rectMode(CENTER);
Las coordenadas x e y de un rectángulo son situadas en la esquina superior izquierda, pero una ellipse define las coordenadas x e y en el centro. El tercer parámetro especifica el ancho y el cuarto parámetro la altura.
ellipseMode()
Igual que sucede con los rectángulos, la ellipse tiene modos de dibujo. en ellipseMode podemos utilizar cuatro parámetros en mayúsculas: CENTER, RADIUS, CORNER, CORNERS.
· CENTER: Es el que utilizamos por defecto. x e y para determinar el centro, el tercer parámetro para el ancho y el cuarto parámetro para la altura. ellipse(x, y, width, height);
· RADIUS: x e y para determinar el centro, el tercer parámetro determina el radio del ancho, y el cuarto el radio de la altura.
· CORNER: trabaja de manera similar al rectángulo por defecto. 1º y 2º parámetro para posicionar la esquina superior izquierda del rectángulo que circunscribe la elipse y utiliza el 3º y el 4º parámetro para ajustar la anchura y la altura.
· CORNERS: tiene un efecto parecido a CORNER pero el 3º y 4º parámetro establecen la esquina inferior derecha de la elipse.
Para dibujar un arco debemos utilizar seis parámetros. x e y para determinar el centro, el 3º parámetro para determinar el ancho y el 4º la altura. el 5º es el comienzo del arco y el 6º el final del mismo.
Sistema de coordenadas polares
Processing por defecto mide los ángulos en radianes, El sistema de coordenadas polares utiliza una estructura diferente al sistema cartesiano. Los puntos son definidos en relación a un ángulo de rotación (q) y una distancia a un origen central.
La distancia alrededor de un sistema polar es PI * 2, PI es igual a la mitad de la rotación y PI/2 un cuarto de rotación.
Processing nos proporciona las siguientes constantes: PI, TWO_PI, HALF_PI, y QUARTER_PI.
Processing define sus arcos en la dirección a las agujas del reloj. Podemos utilizar las constantes que nos ofrece Processing, aunque es difícil calcular con radianes. Por ese motivo podemos utilizar grados para calcular el comienzo y el final de nuestros arcos, utilizando la función radians().
La función bezier() puede dibujar líneas curvas. Una curva bezier es definida por una serie de puntos de control y puntos de ancha. Una curva que se dibuja entre el punto de ancla y el punto de control define su forma.
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
La función requiere ocho parámetros para definir cuatro puntos. La curva es dibujada entre el primer y cuarto punto, y el control de los puntos es definido por el segundo y tercer punto.
Cuando usamos la función bezier() podemos añadir el detalle de la curva con bezierDetails(). Esta función solo funciona en P3D render (que es un modo de render 3D que veremos más adelante). El valor por defecto P2D no utiliza esta información.
Cuando un programa está corriendo, el ordenador comienza a leer desde arriba y va leyendo línea a línea hasta abajo y luego para. Para que una forma se muestre dibujada por encima de otra tendrá que estar escrita por debajo de las otras.
size(600, 300); ellipse(350, -100, 500, 500); //El rectángulo se dibuja encima de la elipse //porque está escrito debajo en el código. rect(50, 30, 250, 250);
Poner al reverso
Modificando este ejemplo, podemos modificar el orden y la ellipse se sitúa por encima del rectángulo.
size(600, 300); rect(50, 30, 250, 250); //La elipse se dibuja encima del rectángulo //porque está escrito debajo en el código. ellipse(350, -100, 500, 500); Puedes pensar en esto como cuando pintas con un pincel o haces un collage. El último elemento que añadas será visible arriba.
Las propiedades más básicas de la forma son el grosor de borde strokeWeight y antialiasing, también llamadas smoothing.
smooth() / noSmooth() smooth() dibuja la geometría con bordes suaves (anti-aliasing). Este comportamiento es el predeterminado, por lo que smooth() solo debe utilizarse cuando un programa tiene que establecer el suavizado de una manera diferente. El parámetro de nivel aumenta el nivel de suavidad. Este es el nivel máximo de muestreo utilizado en el búfer de gráficos.
Con los renders P2D y P3D, smooth(2) es el valor por defecto, esto se llama "2x anti-aliasing". El código smooth(4) se utiliza para 4x anti-aliasing y smooth(8) es especificado para 8x anti-aliasing. El máximo nivel de anti-aliasing se determina por el hardware de la máquina que ejecuta el software, por tanto smooth(4) y smooth(8) no funciona en todos los ordenadores.
El renderizador por defecto, JAVA2D, usa smooth(3). Esto es suavizado bicúbico. La otra opción para el procesador predeterminado es smooth(2), que es suavizado bilineal.
smooth() también mejorará la calidad de las imágenes redimensionadas. Recuerda que smooth() está activo por defecto. noSmooth() se puede utilizar para desactivar el suavizado de la geometría, imágenes y fuentes.
En Processing 3, smooth() funciona diferente que antes. Era común el uso de smooth() y noSmooth() para activar y desactivar antialiasing dentro de un boceto. Ahora, debido a la forma en que el software ha cambiado, smooth() sólo puede establecerse una vez dentro de un boceto. Se puede utilizar ya sea en la parte superior de un boceto sin setup(), o después de la función size() cuando se utiliza un boceto con setup(). La función noSmooth() también sigue las mismas reglas.
smooth(0); // Nada de suavizado smooth(2); // Por defecto en P2D y P3D smooth(3); // Por defecto en JAVA2D smooth(4); smooth(8); // Máximo suavizado noSmooth(); = smooth(0); ________________________________________________________
*NOTA: Algunas implementaciones de Processing (como la versión para JavaScript, ahora llamada p5.js), siempre dibuja en modo suavizado; otras en cambio, no lo soportan. Para más detalle, echa un ojo a la referencia de Processing. https://processing.org/reference/smooth_.html
____________________________________________________________________
Por defecto, el grosor de línea está definido por un pixel. Pero podemos cambiar el grosor con la función strokeWeight(). Un solo parámetro define el grosor de las líneas de dibujo.
size(480, 120);
ellipse(75, 60, 90, 90);
strokeWeight(8); // Grosor de borde de 8 pixels.ellipse(175, 60, 90, 90);
ellipse(279, 60, 90, 90);
strokeWeight(20); // Grosor de borde de 20 pixels.
ellipse(389, 60, 90, 90);
Si quieres que tus formas no tengan ningún tipo de borde, puedes utilizar la función noStroke() sin parámetros.
strokeJoin() define el estilo de las articulaciones que conectan los segmentos de una línea. Los parámetros que podemos introducir (en mayúsculas) son:
Define el estilo para la representación de los finales de línea. Los parámetros que podemos incluir en esta función son:
ROUND
SQUARE
PROJECT
Estas funciones se aplicarán a todos los elementos que se encuentren debajo de la misma y continuará mientras no indiquemos lo contrario, como sucede con muchas funciones de Processing.
Como ya hemos explicado, puedes desactivar el relleno y el borde con noStroke(); y noFill(); *NOTA: ¡Cuidado! Si utilizas ambas, nada se dibujará en la ventana de reproducción.
Cuando en informática hablamos del canal Alpha nos referimos a un canal de transparencia. En Processing tenemos dos maneras de añadir transparencia.
En primer lugar, añadiendo a la función fill, stroke o color en lugar de un parámetro, poniendo dos parámetros –La función color se estudia en las siguientes entradas–.
Ejemplo: fill(0, 125);
Esta función rellena de negro y a un 50% de transparencia
Entonces, con dos parámetros > fill(negro, alpha);
Si no indicamos lo contrario, el parámetro de transparencia tendrá un rango de 0 a 255. Donde 0 es totalmente transparente y 255 totalmente opaco.
El color en Processing se crea introduciendo tres parámetros. El primero se refiere al rojo (red), el segundo al verde (green) y el tercero azul (blue).
fill(r, g, b);
Igual que con la escala de grises, el rango de los tres parámetros tiene un rango que oscila entre 0 y 255.
fill(255, 0, 0); // Relleno rojo
stroke(0, 255, 0); // Borde verde
background(0, 0, 255); // Fondo azul
RGB es el sistema que los ordenadores utilizan para definir los colores en pantalla. Este sistema no es muy intuitivo, puedes seleccionar colores usando una herramienta muy útil llamada Selector de colores.
Menú Herramientas / Selector de colores
Además del modelo RGB, podemos introducir parámetros de color HEXADECIMALES (muy utilizados en la web) Después de elegir un color pulsa copiar y pégalo en tu editor de textos de Processing.
El selector de colores también nos ofrece información muy valiosa sobre la cantidad de rojo (R), verde (G), y azul (B) que contiene el color elegido e introducirlo como parámetros en nuestras funciones de color:
Además del modo RGB, como ya hemos dicho, podemos trabajar también con parámetros de color Hexadecimales. Pero además Processing nos permite cambiar del modo de color de RGB a HSB. Para ello utilizamos la función colorMode()
colorMode() cambia la forma en la que Processing interpreta el color. Por defecto, el parámetro para fill(), stroke(), background() y color() están definidos por defecto por valores entre 0 y 255 usando el modelo de color R, G, B.
La función colorMode() también es usada para cambiar el rango numérico usado para especificar colores, además de cambiar entre sistemas de color RGB y HSB.
HUE = Rueda de color
SATURATION = Saturación de color
BRIGHTNESS = Brillo de color
colorMode(HSB); // Modo de color HSB
colorMode(RGB); // Modo de color RGB
Por ejemplo, definiendo la función colorMode(RGB, 1.0); especifica que: el modo de color es RGB y los valores tendrán un rango entre 0.0 y 1.0.
fill(0.7, 0.3, 0.9); = color(rojo 70%, verde 30%, azul 90%)
Esta puede ser una manera más intuitiva de trabajar con colores.
colorMode() permite la introducción de varios parámetros definidos de la siguiente manera:
Podemos añadir transparencia a nuestros colores RGB o HSB añadiendo un cuarto parámetro. El valor 0 define el color como completamente transparente (no se muestra) y 255 es completamente opaco.
Cuando usamos colores transparentes, se superponen y se mezclan con el color de fondo y con el color de las formas que se encuentran detrás, creando nuevos colores.
No estamos limitados a usar las formas geométricas básicas, también puedes definir nuevas formas conectando una serie de puntos.
Para ello utilizamos las funciones beginShape(), vertex() y endShape() en grupo.
código 3.20-1
La función beginShape() señala el comienzo de una forma. La función vertex() es usada para definir cada par de coordenadas x e y para la forma. Finalmente, la función endShape() sirve para indicar que la forma ha sido finalizada.
código 3.20-1 size(480, 120); beginShape(); vertex(180, 82); vertex(207, 36); vertex(214, 63); vertex(407, 11); vertex(412, 30); vertex(219, 82); vertex(226, 109); endShape(CLOSE);
Para cerrar nuestra forma, podemos utilizar la constante CLOSE (en mayúsculas) para cerrar nuestra forma.
Las funciones beginShape() y endShape() has de ser usadas en pares. Poe defecto, todas las formas dibujadas con vertex() están rellenas de color blanco y una línea negra de un pixel conectando todos los puntos excepto el primero y el último. Las funciones fill(), stroke(), noFill(), noStroke() y strokeWeight() controlan los atributos de las formas dibujadas con la función vertex(), de la misma manera que funciona con las FORMAS PRIMITIVAS, que hemos visto en este capítulo.
El orden de la posición de los vértices cambia la forma que queremos dibujar. Añadiendo más vértices se revela el potencial de estas funciones. Una forma puede tener miles de vértices, pero dibujar muchos puntos pueden hacer que tus programas sean más lentos.
La función beginShape() puede aceptar diferentes parámetros para definir qué tipo de dibujo se formará desde los datos del vértice. Los mismos vértices pueden ser usados para crear una serie de puntos, una forma sin relleno, o una línea continua.
Hay ocho opciones diferentes para el parámetro MODE de la función de beginShape() y cada una interpreta los datos de vértices de forma diferente. La notación V1, V2, V3, etc., representa el orden y la posición de cada punto del vértice.
La función vertex() nos permite dibujar líneas rectas, cuando queremos dibujar curvas utilizamos dos funciones curveVertex() y bezierVertex().
Estas funciones pueden correr entre beginShape() y endShape() solo si beginShape() no tiene parámetros.
La función curveVertex() es usada para definir una serie de puntos que se conectan con una curva. Dos parámetros definen las coordenadas X y las coordenadas Y.
curveVertex(x, y)
El primer y último curveVertex() dentro de un beginShape() y endShape() actúan como puntos de control, definen la curvatura para el principio y el final de la línea.
La curvatura para cada segmento es calculada para cada par de puntos que son considerados antes y después. Por lo tanto, debe haber al menos cuatro curveVertex() dentro de un beginShape() y endShape() para dibujar un segmento.
Cada bezierVertex() define la posición de dos puntos de control y un punto de ancla de una curva Bezier:
bezierVertex(cx1, cy1, cx2, cx2, x, y)
El primer tiempo bezierVertex() es usado dentro de beginShape(), debe ser precedido de vertex() para establecer el primer punto de anclaje. La línea es dibujada entre el punto definido por vertex() y el punto definido por las coordenadas x e y de bezierVertex()
Las curvas continuas se pueden hacer con bezierVertex(). Después del primer vertex() y bezierVertex(), cada sub-secuencia llama a la función continua de la forma conectando cada nuevo punto al punto anterior.
La función curveVertex() define coordenadas que son conectadas con formas curvas. El primero y el último son puntos de control que definen la forma de la curva en el final y en el principio.
Para crear un giro brusco, utiliza la misma posición para especificar el vértice y el siguiente punto de control. Para cerrar la forma, utiliza la misma posición para especificar el primer y último vértice.
Una buena técnica para trabajar la creación de formas complejas con beginShape() y endShape() es trabajar primero con Inkscape o Ilustrator.
Las coordenadas pueden ser leídas como números en este entorno y luego utilizadas en Processing.
También puedes importar imágenes en formato SVG. Otras bibliotecas admiten más formatos y mayor complejidad, puedes encontrar más información en la web de Processing.
Los ejemplos de este capítulo usan una doble barra inclinada (//) al final de algunas líneas para añadir comentarios a nuestros códigos.
Los comentarios son partes de un programa que son ignorados cuando el programa está corriendo.
Se suelen utilizar para escribir notas para ti mismo explicando qué está pasando. Si otros están leyendo tu código, los comentarios son especialmente importantes para ayudarles a entender todo el proceso.
Los comentarios son especialmente útiles cuando estamos programando, ya que nos permite elegir diferentes opciones.
size(200, 200); //fill(165, 57, 57); fill(144, 39, 39); ellipse(100, 100, 80, 80);
Al poner al comienzo de la línea las dos barras invertidas, desactivas la función. O puedes borrar rápidamente las dos barras y volver a activar la función.
Si quieres puede "comentar" bloques enteros de código:
/* Esto también es un comentario */
/* Podemos
comentar
varias
líneas
*/
Con esta entrada terminamos el capítulo 3. Este capítulo solo sirve para que nos familiaricemos con las herramientas básicas de dibujo y comencemos a perder el miedo a ir introduciendo líneas de código en nuestro editor de texto.
Si trabajar con Ilustrator o Photoshop, debes pensar que tener que escribir tanto código para crear líneas, ellipses o rectángulos es poco intuitivo, pero el potencial de Processing aparece cuando mezclamos las herramientas primitivas de dibujo con los conceptos básicos de programación.
Podrás dibujar 1000 ellipses en tres líneas de código, y eso supone mucho ahorro de tiempo, esfuerzo y otra forma de enfocar tus procesos.
Realmente, es a partir del capítulo 4, es cuando vamos a introducir conceptos que tienen más que ver con la programación. Veremos qué son las variables, aprenderemos sobre los bucles for, operaciones aritméticas, etc. Comenzarás a entender el potencial que tiene Processing para incorporarlo en tu proceso creativo.
Esta función es nueva en Processing 3.0. Se abre una ventana de reproducción con el tamaño completo de la pantalla del ordenador. Esta función debe ser la primera línea de código en setup().
fullScreen()
El primer parámetro define el renderizador que deseas usar y el segundo parámetro define ya sea una pantalla individual o para abrir una pantalla completa a través de todas las pantallas conectadas si hay más de una.
size() y fullScreen() no pueden ser utilizados juntos en el mismo programa, simplemente selecciona uno.
Antes de Processing 3.0 un programa a pantalla completa era definido con size(displayWidth, displayHeight).
Para elegir la pantalla (display) utiliza números enteros. 1, 2, 3... dependiendo de la cantidad de pantallas que tengas instaladas en tu equipo.
Elige el tipo de render que quieras para tu programa: P2D, P3D, JAVA2D (default).
Ejemplo 01 int x = 0; void setup(){ fullScreen(); background(0); noStroke(); fill(102); } void draw(){ rect(x, height*0.2, 1, height*0.6); x = x + 2; } Ejemplo 02 /* Si tienes más de una pantalla instalada en tu ordenador, puedes definir en cual de ellas correrá tu programa a pantalla completa definiendo el parámetro en fullScreen()*/ int x = 0; void setup(){ fullScreen(2); background(0); noStroke(); fill(102); } void draw(){ rect(x, height*0.2, 1, height*0.6); x = x + 2; } Ejemplo 03 /* Correr el programa usando el renderizador P2D en la pantalla 2 */ int x = 0; void setup(){ fullScreen(P2D, 2); background(0); noStroke(); fill(102); } void draw(){ rect(x, height*0.2, 1, height*0.6); x = x + 2; } Ejemplo 04 /* Si tienes más de una pantalla instalada en tu ordenador puedes correr el siguiente código y reproducirlo en todas ellas a pantalla completa */ int x = 0; void setup(){ fullScreen(P2D, SPAN); background(0); noStroke(); fill(102); } void draw(){ rect(x, height*0.2, 1, height*0.6); x = x + 2; }
