Esta herramienta de color convierte cualquier imagen en un sueño de fiebre de Wes Anderson

En la primera parte de esta serie, exploramos los principios fundamentales de la corrección de colores y explicamos la importancia de trabajar con colores al editar imágenes. En esta segunda parte, nos sumergimos en conceptos más avanzados, como las diferencias entre los modelos de colores RGB y LAB, así como el proceso de extracción de paletas de imágenes y usarlas para crear estilos visuales únicos.

Como vimos en el artículo anterior, algunos colores y paletas se mostraron de manera diferente de lo que inicialmente esperábamos. Esto se debe al hecho de que usamos las herramientas más simples: el modelo RGB y el cálculo de la distancia euclidiana.

Pero primero un poco de teoría.

El modelo RGB

Los dos modelos de colores más populares - RGB y LAB - son fundamentalmente diferentes en cómo representan y procesan los colores.

El modelo RGB utiliza los canales Red, Green y Blue para representar colores. Cada canal puede tener valores que van desde 0 a 255, resultando en más de 16 millones de colores posibles.

RGB Características clave:

• Utiliza un proceso aditivo donde los colores se crean combinando la luz roja, verde y azul.
• Es más fácil de entender y procesar a nivel de píxeles.
• Es limitado en su capacidad para representar todos los colores con precisión, ya que no cuenta con la percepción humana del color.

El modelo LAB

El modelo LAB representa el color en tres canales: L (luminosidad), A (un espectro de colores de verde a rojo), y B (un espectro de colores de azul a amarillo).

LAB Características clave:

• El canal L controla el brillo, permitiendo ajustes de brillo sin cambiar el color.

• Los canales A y B describen tonos de color, permitiendo un control más preciso sobre un amplio espectro de colores.

• El modelo LAB es especialmente útil en la clasificación de color profesional ya que es más versátil y permite ajustes de color precisos sin afectar a otros parámetros de la imagen.

  
  

En el modelo LAB, el brillo se separa del color, lo que permite ajustar los parámetros visuales de una imagen sin afectar su equilibrio de color.

Color Calculation Algorithm y Using LAB

Para calcular y aplicar colores, nuestra aplicación utiliza la biblioteca colorjs.io, que funciona eficientemente con los colores en el modelo LAB. La integración de esta biblioteca en el proyecto nos permite realizar cálculos precisos que ayudan a lograr los resultados deseados al procesar imágenes.

Aquí está un ejemplo del código utilizado en nuestra aplicación para trabajar con los colores en el modelo LAB:

// Sample code for using colorjs.io in LAB model
const findClosestColor = (r, g, b) => {
  if (mode === "lab") {
    const color1 = new Color({ coords: [r / 255, g / 255, b / 255], space: "srgb" }).to("lab");
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let i = 0; i < paletteLAB.length; i++) {
      const color2 = paletteLAB[i];
      const dist = color1.distance(color2);  // Calculating the distance between colors in LAB space
      if (dist < minDist) {
        minDist = dist;
        closest = palette[i];
      }
    }
    return closest;
  } else {
    // RGB calculations
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let [pr, pg, pb] of palette) {
      const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
      if (dist < minDist) {
        minDist = dist;
        closest = [pr, pg, pb];
      }
    }
    return closest;
  }
};

Este bloque de código maneja el proceso de encontrar el color más cercano en una paleta dada calculando la distancia de color entre el color objetivo y los colores en la paleta.El método de cálculo se basa en el modo seleccionado, ya sea RGB o LAB.

Cómo funciona esto en la práctica:

• Modo LAB: El espacio de color LAB está diseñado para alinearse con la visión humana, separando el brillo (L) de los componentes cromáticos (A y B). Cuando se ajustan los colores en LAB, el algoritmo asegura que los colores se comparan de manera perceptualmente precisa, lo que significa que prioriza cómo percibimos las diferencias de color, no sólo la diferencia matemática RGB.

• Modo RGB: El espacio de color RGB simplemente representa el color por la intensidad de la luz roja, verde, y azul.

  En la clasificación profesional de colores y el procesamiento de imágenes, la combinación de colores basada en LAB es muy ventajosa porque imita cómo el ojo humano percibe los colores, permitiendo resultados más naturales y visualmente atractivos.

  
  

  

  Desafío de optimización: LAB Computation

  Trabajar con el modelo de color LAB requiere significativamente más recursos de cálculo que trabajar con RGB. Esto se debe a que, en LAB, cada color es representado no sólo por tres canales (RGB), sino que también implica cálculos adicionales para obtener las coordenadas de color y sus distancias.

  
  

  Para optimizar este proceso, hemos introducido palette caching para evitar cálculos redundantes. Las paletas creadas en el modo LAB se almacenan en la memoria, y si la imagen no ha cambiado, el sistema no recalculará la paleta. Esto ayuda a acelerar significativamente el proceso, especialmente cuando se aplican paletas a múltiples imágenes, reutilizando los datos precompuestos sin tener que realizar los costosos cálculos de nuevo.

  // Optimization with palette caching
  const extractPalette = () => {
    if (!image || image === lastExtractedImageRef.current) return;  // Check for changes
  
    const img = new Image();
    img.src = image;
    img.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
  
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
      const colorMap = new Map();
  
      // Creating a color map
      for (let i = 0; i < imageData.length; i += 4) {
        const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
        colorMap.set(key, (colorMap.get(key) || 0) + 1);
      }
  
      const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
      const topRaw = sorted.map(([str]) => str.split(",").map(Number));
      const topColors = filterColors(topRaw).slice(0, 10);
  
      const randomId = Math.floor(10000 + Math.random() * 90000);
      const name = `Palette_${randomId}`;
  
      setPalettes(prev => ({ ...prev, [name]: topColors }));
      setSelectedPalette(name);
      lastExtractedImageRef.current = image;  // Saving cache
    };
  };
  

  Esta mejora ayuda a acelerar el rendimiento de la aplicación, especialmente cuando se procesan varias imágenes similares repetidamente.

  Extracción y aplicación de paletas

  La extracción de paletas es el proceso de identificar los colores más característicos y vibrantes de una imagen, que luego se pueden utilizar para crear filtros o estilos visuales. Extraemos los 10 mejores colores (asegurando la diversidad) utilizando un algoritmo que tiene en cuenta tanto la frecuencia de la ocurrencia de color como su luminanza, asegurando que la paleta no incluya colores que sean demasiado similares entre sí.

  
  

  El mecanismo principal para extraer la paleta es el siguiente:

  const extractPalette = () => {
    // Check for image changes
    if (!image || image === lastExtractedImageRef.current) return;
  
    const img = new Image();
    img.src = image;
    img.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
  
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
      const colorMap = new Map();
  
      // Counting the frequency of occurrence of each color
      for (let i = 0; i < imageData.length; i += 4) {
        const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
        colorMap.set(key, (colorMap.get(key) || 0) + 1);
      }
  
      // Sorting by frequency and filtering similar colors
      const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
      const topRaw = sorted.map(([str]) => str.split(",").map(Number));
      const topColors = filterColors(topRaw).slice(0, 10);  // Segmentation and filtering
  
      const randomId = Math.floor(10000 + Math.random() * 90000);
      const name = `Palette_${randomId}`;
  
      // Saving the palette
      setPalettes(prev => ({ ...prev, [name]: topColors }));
      setSelectedPalette(name);
      lastExtractedImageRef.current = image;
    };
  };
  

  Este código se utiliza para extraer una paleta de una imagen, donde los colores se filtran por brillo y diferencia.

  
  

  

  
  

  Hemos añadido la generación automática de nombres para las paletas extraídas para evitar confundir la interfaz de usuario con botones innecesarios.

  Paletas personalizadas

  Una de las herramientas de nuestra aplicación es el bloque de creación de paletas personalizado.Esta característica permite a los usuarios crear paletas adecuadas para varios proyectos, proporcionando un control completo sobre los colores.

  El proceso comienza con la selección de un color a través de la interfaz HexColorPicker.El usuario puede elegir un color de la imagen o de una fuente externa.Cada color seleccionado se agrega automáticamente a la lista de colores del usuario, de la que se crea una paleta.

  Después de seleccionar algunos colores, la paleta puede guardarse con un nombre personalizado. Más tarde, se puede aplicar a la imagen cargada para lograr un estilo visual específico.

  
  

  

  Neutralización de colores con paletas de colores

  Neutralización de colores con paletas de colores

  La neutralización del color es un aspecto importante de la clasificación del color y desempeña un papel crítico en la postproducción de la película. Es el proceso en el que las escenas o capturas individuales, tomadas en diferentes condiciones de iluminación, pueden ser llevadas a un tono de color común. Esto se hace generalmente para asegurar un estilo visual unificado en toda la película y para hacer que las escenas sean visualmente consistentes, independientemente de las condiciones de filmación.

  
  

  Exploremos cómo se aplican las paletas a través de dos ejemplos icónicos de lenguaje visual cinematográfico.

  Paletas en la película “La Matriz”

  La película The Matrix (1999), dirigida por los hermanos Wachowski, se hizo icónica debido a su estilo visual único, que incluye una paleta de colores verdes específicos. Este estilo de color fue diseñado para visualizar la realidad digital en la que existen los personajes principales.Los efectos visuales de la película fueron creados para transmitir la sensación de virtualidad, donde predominan los colores fríos y mecánicos.

  
  

  Colores principales: verde, negro, metálico.

  Aplicación de la paleta:

  • Extracción de tonos verdes: Para crear una paleta de estilo Matrix, podemos extraer todos los tonos de verde, negro y gris de la imagen. Al aplicar estos tonos, podemos lograr el efecto "realidad digital" característico de la película.

    En nuestra aplicación, esto se puede hacer mediante el filtro por brillo y distancia, manteniendo sólo los tonos verdes e ignorando a otros.

  • Aplicando a Nuevas Imágenes: Cuando aplicamos esta paleta, los colores de la imagen cambiarán, reemplazando todos los píxeles con los más cercanos a los colores seleccionados de la

    

    Paletas en las obras de Wes Anderson

    Wes Anderson es conocido por sus soluciones visuales vivas, coloridas y simétricas. Sus obras, como “The Grand Budapest Hotel”,“Moonrise Kingdom”, y “The French Dispatch”, todos tienen su estilo de firma, que cuenta con ricos colores pastel y paletas cuidadosamente seleccionadas. Un elemento clave de sus películas es la armonía y el contraste en el diseño de colores.

    
    

    Colores principales: tonos pastel, colores contrastantes brillantes, rojo, amarillo, turquesa, verde.

    Aplicación de la paleta:

    • Extracting Pastel Shades: En las películas de Wes Anderson, los colores pastel se utilizan a menudo. Por ejemplo, los tonos rosa, azul y naranja ligeros.Podemos extraer estos colores y aplicarlos a una nueva imagen para crear un efecto que se asemeje a la fotografía vintage o para enfatizar una atmósfera estilizada.

      En nuestra aplicación, podemos extraer la paleta de una imagen filtrando los colores por brillo y contraste, conservando sólo los tonos pastel suaves.

    • Aplicando a Nuevas Imágenes: Después de extraer la paleta, se puede aplicar a cualquier imagen, dándole el aspecto característico que recuerda a las

      

      
      

      Ahora que podemos extraer paletas de las referencias, ¡es hora de experimentar!

      
      

      Dado que estamos utilizando paletas limitadas en el número de colores y ejecutando nuestra aplicación en el navegador (lo que significa usar recursos de cálculo limitados), no debemos esperar resultados sobresalientes.

      
      

      Aquí se muestran ejemplos de imágenes procesadas en los modos RGB y LAB.

      
      

      

      
      

      

      
      

      Extraer y aplicar paletas es un aspecto crucial de la creación de estilos visuales, como el estilo “Matrix”, de Wes Anderson o de Denis Villeneuve.Nuestra aplicación proporciona una herramienta visual para trabajar con colores que permite a los usuarios extraer paletas, aplicarlas y crear efectos visuales únicos.

      
      

      En la parte final, nos centraremos en el ajuste y la optimización de los colores.