Introducción a la programación para artistas y principiantes

Colores y rellenos

¿Qué sería del arte sin los colores? p5 nos ofrece un montón de instrucciones para manejar colores, vamos a introducirnos en el tema con las más básicas, sin embargo para entender bien cómo se utilizan los colores tenemos que aprender antes qué es la escala de grises y el código RGB.

Escala de grises

Empecemos un proyecto vacío y vamos a centrarnos en ese fondo que por defecto es de color gris:

04 - Colores/sketch.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

El número 220 que nos aparece por defecto es un valor numérico que hace referencia a un color en una escala de grises. En esa escala el 0 es el color negro y el 255 representa el blanco. Los valores intermedios determinan la intensidad de color entre el negro y el blanco, así que como resultado tenemos 256 colores (8 bits) en la escala de grises contando el cero.

Código RGB

Ahora bien, si en lugar de grises queremos manejar colores reales, tenemos a nuestra disposición el código RGB, donde RGB significan Rojo, Verde y Azul. Utilizando este código, con 256 posibilidades para cada color, el 0 representa la mínima intensidad del color y 255 la máxima. De esta forma se pueden mezclar entre ellos 256x256x256 (24 bits) de colores diferentes. ¿Os suena el concepto de True Color y los 16 millones de colores? Pues esa es la cantidad de colores posibles que se pueden manejar con el código RGB. Veámoslo con unos ejemplos.

Si queremos que el lienzo sea de un color en su máxima intensidad podemos establecer uno de los colores a 255 y los otros dos a 0:

function draw() {
  background(255, 0, 0);
  // background(0, 255, 0);
  // background(0, 0, 255);
}

Lo curioso es que estableciendo la misma profundidad en los tres colores podemos simular la escala de grises:

function draw() {
  background(0, 0, 0);
  // background(255, 255, 255);
}

Sobra decir que para conseguir el color que queramos tendremos que mezclar estos tres, ¿cómo conseguimos el código? Pues simplemente podemos mirar en internet, buscando en el propio Google la palabra colorpicker nos aparecerá una de esas tablas para encontrar el código de cualquier color.

Rellenos y bordes

Pintar el lienzo está muy bien, ¿pero qué hay de las figuras? p5 nos da la posibilidad de pintar no sólo el interior de nuestras figuras sino también sus bordes.

Para entender cómo funciona esta característica tenéis que sentiros como verdaderos artistas, porque decidme vosotros, ¿qué hace un artista antes de ponerse a pintar? Pues está claro, elegir el color y untar en él su pincel.

Nosotros tenemos que usar la misma lógica, justo antes de dibujar una figura vamos a establecer un color para pintarla, eso lo haremos con la instrucción fill() que significa rellenar, mirad:

function draw() {
  background(220);
  fill(255, 0, 0);
  rect(100, 100, 200, 200);
}

De la misma forma funciona la función stroke(), permitiéndonos establecer el color del borde la figura que vamos a dibujar, siendo éste por defecto negro y con un tamaño de 1 píxel:

function draw() {
  background(220);
  fill(255, 0, 0);
  stroke(0, 0, 255);
  rect(100, 100, 200, 200);
}

Si queremos establecer el tamaño del borde necesitaremos utilizar otra instrucción, strokeWeight(), a la que indicaremos el tamaño del borde en píxeles:

function draw() {
  background(220);
  fill(255, 0, 0);
  strokeWeight(20);
  stroke(0, 0, 255);
  rect(100, 100, 200, 200);
}

Al establecer estas opciones para el relleno y los bordes todas las demás figuras que dibujemos también las utilizarán:

function draw() {
  background(220);
  fill(255, 0, 0);
  strokeWeight(20);
  stroke(0, 0, 255);
  rect(100, 100, 200, 200);
  rect(200, 200, 100, 100);
}

Aquí necesitaremos sentirnos como verdaderos pintores, cambiando el color de relleno y de borde antes de dibujar cada figura:

function draw() {
  background(220);

  fill(255, 0, 0);
  strokeWeight(20);
  stroke(0, 0, 255);
  rect(100, 100, 200, 200);

  fill(0, 255, 0);
  stroke(0);
  rect(200, 200, 100, 100);
}

Por último si en algún momento queremos desactivar el relleno o el borde podemos hacerlo con noFill() y noStroke() respectivamente, ambas funciones no requieren ningún valor y os las podéis imaginar como cuando el pintor limpia su pincel, por lo que si dibujamos algún contenido después de ejecutarlas no se verá nada en el lienzo:

function draw() {
  background(220);

  fill(255, 0, 0);
  strokeWeight(20);
  stroke(0, 0, 255);
  rect(100, 100, 200, 200);

  noFill();
  noStroke();
  rect(200, 200, 100, 100);
}