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

Valores mapeados

Con lo que sabemos ya podríamos pasar a la siguiente sección sin problemas, pero antes quiero compartir con vosotros un par de funciones interesantes que nos proporciona p5, seguro que se os ocurrirán unas cuantas formas de aplicarlas en vuestros experimentos.

Vamos a empezar por la función map() cuyo objetivo es ni más ni menos que mapear valores.

¿Qué significa mapear? Pues en nuestro caso se trata de automatizar reglas de tres, ahora lo veréis.

Vamos a partir del siguiente sketch:

08 - Mapeo/sketch.js

var c = 255;

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

function draw() {
  background(220)
  fill(c, 0, 0)
  ellipse(200, 200, 50, 50)
}

Típico, un círculo rojo en el centro del lienzo.

Ya sabemos que un color tiene 256 intensidades siendo el 0 la mínima y el 255 la máxima.

Si dividimos 256/2 para conseguir la intensidad media nos daría 128 ¿verdad? Por tanto una intensidad del 50% es 128. En esta escala en tantos por ciento tenemos que 100% es el 255, 50% el 128 y 0% el 0. Siguiendo este patrón lo que hace la función de mapeado map es conseguir los resultados haciendo una regla de tres en función de dos conjuntos de valores mínimos y máximos.

Por ejemplo, si quisiéramos un 37% de intensidad podríamos hacer lo siguiente:

var c = 255;

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

function draw() {
  background(220)
  c = map(37, 0, 100, 0, 255)
  fill(c, 0, 0)
  ellipse(200, 200, 50, 50)
}

¿Se entiende el concepto? Ahora la parte divertida es que podemos hacer esa cantidad proporcional a lo que queramos, por ejemplo la altura del lienzo y la posición del cursor en su eje Y:

var c = 255;

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

function draw() {
  background(220)
  c = map(mouseY, 0, 400, 0, 255)
  fill(c, 0, 0)
  ellipse(200, 200, 50, 50)
}

¡Interesante! Vamos a añadir un par más de círculos con colores verde y azul a ver como queda:

var c = 255;

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

function draw() {
  background(220)
  c = map(mouseY, 0, 400, 0, 255)
  fill(c, 0, 0)
  ellipse(100, 200, 50, 50)
  fill(0, c, 0)
  ellipse(200, 200, 50, 50)
  fill(0, 0, c)
  ellipse(300, 200, 50, 50)
}