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

enLa primera parte de esta serie, exploramos los principios fundamentales de la corrección del color y explicamos la importancia de trabajar con los colores al editar imágenes.RGByLABLos colores, así como el proceso deextracting palettesde imágenes y utilizarlas 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 distancia Euclidiana.

Pero primero, un poco de teoría.

The RGB Model

Los dos modelos de colores más populares -RGByLABson fundamentalmente diferentes en la forma en que representan y procesan los colores.

ElRGBEl modelo utiliza elRed, deGreen, yBluecanales para representar colores. Cada canal puede tener valores que van desde 0 a 255, resultando en más de 16 millones de colores posibles. Este modelo es ideal para trabajar con imágenes mostradas en pantallas, ya que los monitores de ordenador, televisores y teléfonos inteligentes utilizan todos este modelo.

RGB Key Features:

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

The LAB Model

ElLABEl modelo representa el color en tres canales:L (lightness), deA (a color spectrum from green to red), yB (a color spectrum from blue to yellow)Este modelo está más cerca de cómo los humanos perciben el color y es responsable tanto del color como del brillo de una imagen.

LAB Key Features:

y
• El canal L controla el brillo, permitiendo ajustes de brillo sin cambiar el color.
y
• Los canales A y B describen tonos de color, permitiendo un control más preciso sobre un amplio espectro de colores.
y
• 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 colores.

Color Calculation Algorithm and Using LAB

Para calcular y aplicar colores, nuestra aplicación utiliza elcolorjs.ioLa 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.RGBoLAB. el

How This Works in Practice:

y
• 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 comparen de una manera perceptualmente precisa, lo que significa que prioriza cómo percibimos las diferencias de color, no sólo la diferencia matemática RGB.
y
• Modo RGB: El espacio de color RGB simplemente representa el color por la intensidad de la luz roja, verde y azul. En este modo, la distancia se calcula directamente en función de los valores de color, lo que puede conducir a una menor precisión perceptiva, ya que no cuenta con los matices de la percepción del color humana.
y

En la clasificación profesional de colores y el procesamiento de imágenes, el ajuste de colores basado enLABes muy ventajoso porque imita cómo el ojo humano percibe los colores, permitiendo resultados más naturales y visualmente atractivos.Utilizando este método, la aplicación puede lograr una mejor consistencia cuando se aplican paletas de colores a las imágenes, lo que facilita la combinación de colores con los estilos deseados.

Optimization Challenge: LAB Computation

Trabajando con laLABEl modelo de color requiere significativamente más recursos computacionales que trabajar conRGBEsto 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 introducidopalette cachingpara evitar cálculos redundantes. paletas creadas enLABlos modos 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 varias 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.

Palette Extraction and Application

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.frequencyEl color y su apariencialuminance, asegurándose de que la paleta no incluya colores que sean demasiado similares entre sí.

El mecanismo principal para la extracción de 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.

Custom Palettes

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

El proceso comienza con la selección de un color a través delHexColorPickerEl 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 cual se crea una paleta.

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

Color Neutralization with Color Palettes

Color neutralizationEs un aspecto importante decolor gradingdesempeña un papel crítico enfilm post-productionEs el proceso en el que las escenas o capturas individuales, tomadas bajo 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 a lo largo de la película y para hacer las escenas 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.

Palettes in the Movie “The Matrix”

The film “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.

Main ColorsVerde, negro y metálico.

Palette Application:

y
• Extraer 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 filtrando por brillo y distancia, manteniendo solo los tonos verdes e ignorando a otros.
y
• Aplicar 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 paleta, creando así el estilo deseado “codificado”.

Palettes in Wes Anderson’s Works

Wes Andersones conocido por sus soluciones visuales vivas, coloridas y simétricas.“The Grand Budapest Hotel”,y“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.

Main Colors: Tones pastel, colores contrastantes brillantes, rojo, amarillo, turquesa, verde.

Palette Application:

y
• Extraer tonos pastel: En las películas de Wes Anderson, los colores pastel se utilizan a menudo. Por ejemplo, tonos rosa, azul y naranja. 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.
y
• Aplicar 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 obras de Anderson, con colores brillantes pero armoniosos.
y

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í hay 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.