Colores intermedios RGB (2)

Notese la definición de los métodos toString(), toArray() y fromString(s)... en realidad "toString()" es una re-definicaión ya que los objetos javascript implementan de forma inherente este método cuya finalidad es representarlos; toArray() devuele los componentes como un array. También puede formarse una cadena de este tipo:

"rgb(" + negro.toArray() + ")"

... fromString() es un método que permite la construcción del color a partir de otro color representado por una cadena. He creído conveniente usar una representación que nos permita su uso directo.

O sea que con este código son válidas las siguientes definiciones:

var negro = new Color(0, 0, 0);
var blanco = new Color().fromString("#FFFFFF");
// Para obtener el color como una cadena
// bastaría con poner el nombre de la variable:
alert(negro);
// Y si quisieramos obtener el color como un array de
// sus tres componentes habría que añadirle la coletilla
// toArray() al nombre de la variable:
alert(negro.toArray());
// Por último podemos obtener el valor de cada componente
// consultando el atributo correspondiente
alert(negro.Rojo);

Los valores intermedios

Teniendo las declaraciones necesarias para manipular colores nos centraremos en la obtención de los valores intermedios. Para ello debemos obtener un número que he denominado ratio, que sumándolo a cada componente nos permite obtener el siguiente. De más está decir que esos valores también pueden ser negativos.

function coloresIntermedios(inicial, final, pasos) {
var resultado = new Array(pasos--);
resultado[0] = inicial;
resultado[pasos] = final;
ratio = new Color(parseInt((final.Rojo - inicial.Rojo) / pasos),
parseInt((final.Verde - inicial.Verde) / pasos),
parseInt((final.Azul - inicial.Azul) / pasos));
for (var i = 1; i < pasos; i ++)
resultado[i] = new Color(inicial.Rojo + (ratio.Rojo * i),
inicial.Verde + (ratio.Verde * i),
inicial.Azul + (ratio.Azul * i));
return resultado;
}

Una sencilla aplicación

Si quisieramos obtener esos datos intermedios introduciendo por teclado los colores inicial y final, además del número de valores intermedios, nos bastaría un pequeño formulario con 3 elementos para la entrada de datos, un botón para poner en funcionamiento nuestro script, y un elemento que muestre esos datos.

<form name="intermedios" action="" method="get" >
color inicial:<input type="text" name="ini" value="#000000" />
color final:<input type="text" name="fin" value="#FFFFFF" />
pasos:<input type="text" name="pasos" value="5" />
<textarea name="resultado" style="width: 70%; height: 150px;"></textarea>
<br/>

<button
onclick="resultado.value = coloresIntermedios(new Color().fromString(ini.value),
new Color().fromString(fin.value), pasos.value)" >
obtener intermedios
</button>
</form>

Algunos usos

Se me ocurren dos posibles usos para este sistema: fondos degradados en botones, capas y páginas; y efecto fade en textos.

Usuarios que han visto este tema también han visto...

- Cómo funciona el ranking en Google
- Consejos para tu negocio en Internet y los buscadores
- Tipos de fuentes (letra) y recursos tipograficos
- Como esta definida una plataforma e-learning
- Cinco puntos sobre la usabilidad de tu blog

- Versión imprimible de este documento

- Enviar por e-mail este documento