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.
