• Imedge, mi contribución al mundo de los fondos dinámicos.

    Hace poco, un amigo de nacionalidad turca y aficionado a la fotografía comenzó un proyecto de aplicación web en la que se muestran datos sobre juegos de Steam. Estos datos incluyen la imagen del banner del juego.

    Propuse que, al igual que hace iTunes al mostrar la imagen de un álbum, el fondo de la página “continuara” a la imagen, siendo el mismo que el del borde. La respuesta fue sí, y mi amigo creó un pequeño script en el que se calcula el color medio (en RGB) de los píxeles en el borde de la imagen. Para esto la imagen debe estar colocada en un canvas que permite leer la información de los píxeles. De una manera bastante horrible, por cierto.

    Esto en un principio obtiene un color parecido a la mayoría del borde, pero tiene un problema observable en la siguiente imagen:

    Resultados_media_pixeles

     

    Sin duda algo terrible ha sucedido. En el borde de la imagen hay un grupo de píxeles claramente predominante (blanco/gris claro), pero el resto de píxeles tienen un color muy diferente (rojo oscuro). Por tanto la media acaba siendo muy diferente del grupo predominante e incluso del otro grupo de píxeles. El resultado final es poco estético.

    Ante esto le propuse a mi amigo que calculara la varianza de los píxeles, comprobara si superaba cierto umbral y clusterizara los píxeles. La respuesta fue no.

    Como la idea me pareció interesante y el trabajo tedioso relacionado con el canvas ya estaba hecho, me ofrecí voluntario a hacerlo yo. De ahí surgió mi clase en javascript “imedge”. La clase funciona de la siguiente manera:

    • Al crearse un objeto, se le pasa al constructor el id del canvas. A partir de este y del porcentaje de las dimensiones que se debe tomar como borde, se almacenará la información sobre los píxeles de la imagen en una matriz de 3 dimensiones (pos. x, pos. y, r/g/b) fácilmente accesible. También se almacenará la media y el número de píxeles del borde.
    • Un método permite obtener el color medio, con el riesgo que esto significa.
    • Otro método permite obtener un color de fondo de una forma más elaborada:
      1. Se calcula la varianza de los píxeles del borde.
      2. Si esta está por debajo de un umbral indicado al llamar al método, se devuelve la media corriente y moliente.
      3. Si está por encima del umbral, se clusterizan (agrupan) los píxeles mediante el método k-means, con un número de clusters indicados al llamar al método y se devuelve el color medio del mayor cluster.

    El umbral más adecuado podría determinarse con pruebas, pero se puede simplemente usarse un umbral de 0 para que siempre se use el clustering. El mayor posible problema es el método de clustering usado. El método k-means requiere indicar el número de clusters que se obtendrán. Si se introduce un número demasiado bajo, no se separarán píxeles considerablemente diferentes, y si es muy alto, se separarán píxeles considerablemente parecidos. Existen otros métodos de clustering (como clustering jerárquico, del que existe también una implementación en javascript) que no requieren indicar el número de clusters, pero tienen un rendimiento mucho peor e inaceptables en un contexto en el que se requiere rápidez al cargar la página.

    De todas maneras, unos 3 o 4 clusters parecen ser adecuados para todos los grupos. Si aun así el resultado no es óptimo, la imagen sea extraña y no haya ningún método que lo hubiera hecho mucho mejor.

    El resultado en el anterior ejemplo es el siguiente:

    Resultados_media_cluster_pixeles

    El fondo es exactamente el esperado: una media de los píxeles del grupo de píxeles claramente predominante. Estos son algunos ejemplos más, comparados con el color de fondo usado en iTunes:

    El siguiente paso sería obtener otro color para las letras de la página que también esté relacionado con la imagen. Para esto, habría que usar la imagen entera y realizar otro clustering, ya que no tiene sentido usar solo el borde. Esto significaría un problema considerable de rendimiento, ya que aumentaría enormemente la cantidad de píxeles a procesar, sobre todo en imágenes grandes. Después de esto, habría que buscar un cluster cuyo color medio fuera suficientemente diferente del usado para el fondo, y aun así existiría el riesgo de que el algoritmo elija a uno todavía demasiado parecido, o que no encuentre ninguno suficientemente distante, caso en el que habría que coger el más distante, con un gran riesgo. De todas maneras, siempre se puede añadir una sombra al texto para que prácticamente siempre sea legible.

    Se puede descargar el archivo aquí: imedge

    Post Tagged with , , , ,

Un comentario por el momento.

  1. Daniel de los Reyes Leal dice:

    Primer!

Responder a Daniel de los Reyes Leal Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>