Juanma Santoyo

En ocasiones me llaman friki

Generación de colores intermedios con resultados multicolor

| No hay comentarios

No hace mucho se comenté una técnica para calcular los colores intermedios entre dos colores cualesquiera. Lo que haremos en esta ocasión es ampliar el script que creamos entonces para que se puedan especificar más de dos colores.

Multi-Colores intermedios.

La idea

La idea es sencilla: si tenemos una función para calcular los intermedios entre dos colores, podemos usar esa función varias veces y de esta forma obtener un resultado multicolor. Donde antes íbamos del azul al rojo, ahora podremos ir del azul al rojo, y después del rojo al verde; de forma que lo que tenemos es una sucesión de colores que va del azul al verde pasando por el rojo.

¿Cómo lo haremos? Fácil. En realidad, no hay que programar nada nuevo sobre mezclas de colores, todo lo que haremos será una función que gestionará diversas llamadas a la mezcla de dos colores que ya teníamos.

Aclaramos un par de detalles

  • Crearemos una función llamada getGradientMultiColors, que recibirá un array con los colores básicos de nuestro degradado. Por ejemplo, si queremos un degradado de azul a verde, pasando por el rojo, el array contendrá el color azul, el rojo y el verde (por ese orden). Esta función también recibirá la cantidad de colores que queremos al final del cálculo (incluyendo los colores básicos).
  • Se hará una gestión de los colores resultantes que eliminará repeticiones de colores básicos, y calculará la cantidad de colores que se obtendrán en cada llamada a getGradientColors.
  • La política para el cálculo de colores será la siguiente: Se calcularán una cantidad de total de colores / total de colores basicos, redondeando a la baja. Los colores que falten para completar la cantidad total de colores, se generarán repitiendo los colores al inicio y al final de la sucesión de colores resultante.

Programamos la función

Bueno, al lío:

function getGradientMiltiColours(colours, total)
{
	var res = new Array();	
	var temp = new Array();
	
	var gradientZones = Math.floor(total / (colours.length - 1));
	
	for(var i = 0; i < (colours.length - 1); i++)
	{
		temp = getGradientColours(colours[i], colours[i + 1], gradientZones);
		
		// Si no es el primer cálculo de colores, quitamos el primer elemento para evitar repeticiones.
		if(i != 0)
		{
			temp.shift();
		}
		
		res = res.concat(temp);
	}
	
	var toAdd = (total - res.length);
	
	/*
		Si queda un número par de colores por añadir, añadimos la mitad al inicio y la mitad al final.
		Si no, restamos uno, añadimos la mitad al principio y la mitad al final, y finalmente uno más al final.
	*/
	
	var repeatLast = false;
	if(toAdd % 2 != 0)
	{
		toAdd --;
		repeatLast = true;
	}
	
	var i = 0;
	toAdd = toAdd / 2;
	while(i < toAdd)
	{
		res.unshift(res[0]);
		res.push(res[res.length - 1]);
		i++;
	}
	
	if(repeatLast == true)
	{
		res.push(res[res.length - 1]);
	}
	
	return res;
}

¡Hemos terminado!

Bueno, en realidad no hemos hecho nada del otro mundo, pero es una mejora que se me ocurrió poco después de publicar el artículo original y valía la pena hacerla.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Deja un comentario

Los campos obligatorios están marcados con *.