Deze kleurtool verandert elk beeld in een Wes Anderson-koortsdromen

inHet eerste deel van deze serie, onderzochten we de fundamentele principes van kleurcorrectie en legden uit hoe belangrijk het is om met kleuren te werken bij het bewerken van afbeeldingen.RGBenLABkleuren, maar ook het proces vanextracting palettesafbeeldingen en ze te gebruiken om unieke visuele stijlen te creëren.

Zoals we in het vorige artikel zagen, werden sommige kleuren en paletten anders weergegeven dan we in eerste instantie hadden verwacht. Dit is te wijten aan het feit dat we de eenvoudigste hulpmiddelen gebruikten – het RGB-model en de Euclidische afstandsberekening.

Maar eerst een beetje theorie.

The RGB Model

De twee meest populaire kleurenmodellen -RGBenLAB- zijn fundamenteel verschillend in hoe ze kleuren vertegenwoordigen en verwerken.

DeRGBHet model gebruikt deRed- hetGreenenBluekanalen om kleuren te vertegenwoordigen. elk kanaal kan waarden hebben variërend van 0 tot 255, wat resulteert in meer dan 16 miljoen mogelijke kleuren. Dit model is ideaal voor het werken met afbeeldingen die op schermen worden weergegeven, omdat computermonitoren, tv's en smartphones dit model allemaal gebruiken.

RGB Key Features:

De
• Het maakt gebruik van een additief proces waarbij kleuren worden gemaakt door het combineren van rood, groen en blauw licht.
De
• Het is gemakkelijker te begrijpen en te verwerken op pixelniveau.
De
• Het is beperkt in zijn vermogen om alle kleuren nauwkeurig te vertegenwoordigen, omdat het niet rekening houdt met de menselijke perceptie van kleur.
De

The LAB Model

DeLABHet model vertegenwoordigt kleur in drie kanalen:L (lightness)- hetA (a color spectrum from green to red)enB (a color spectrum from blue to yellow)Dit model is dichter bij hoe mensen kleuren waarnemen en staat zowel voor de kleur als de helderheid van een beeld.

LAB Key Features:

De
• Het L-kanaal controleert de helderheid, waardoor lichtheid aanpassingen mogelijk zijn zonder de kleur te veranderen.
De
• De A- en B-kanalen beschrijven kleuren, waardoor meer nauwkeurige controle over een breed spectrum van kleuren mogelijk is.
De
• Het LAB-model is vooral nuttig bij professionele kleurenbeoordeling, omdat het veelzijdiger is en nauwkeurige kleurinstellingen mogelijk maakt zonder andere beeldparameters te beïnvloeden.
De

In het LAB-model wordt helderheid gescheiden van kleur, waardoor het mogelijk is om de visuele parameters van een afbeelding aan te passen zonder de kleurbalans te beïnvloeden.

Color Calculation Algorithm and Using LAB

Om kleuren te berekenen en toe te passen, gebruikt onze applicatie decolorjs.ioEen bibliotheek die efficiënt werkt met kleuren in het LAB-model.Het integreren van deze bibliotheek in het project stelt ons in staat nauwkeurige berekeningen uit te voeren die bij het verwerken van afbeeldingen de gewenste resultaten helpen bereiken.

Hier is een voorbeeld van de code die in onze app wordt gebruikt om met kleuren te werken in het LAB-model:

// 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;
  }
};

Dit blok code behandelt het proces van het vinden van de dichtstbijzijnde kleur in een gegeven palet door het berekenen van de kleur afstand tussen de doelkleur en de kleuren in de palet.RGBofLAB. .

How This Works in Practice:

De
• LAB-modus: De LAB-kleurruimte is ontworpen om in lijn te komen met het menselijk gezichtsvermogen, waardoor helderheid (L) van chromatische componenten (A en B) wordt gescheiden.Bij het matchen van kleuren in LAB zorgt het algoritme ervoor dat de kleuren op een perceptueel nauwkeurige manier worden vergeleken, wat betekent dat prioriteit wordt gegeven aan hoe we kleurverschillen waarnemen, niet alleen aan het wiskundige RGB-verschil.
De
• RGB-modus: De RGB-kleurruimte vertegenwoordigt eenvoudig de kleur door de intensiteit van rood, groen en blauw licht.In deze modus wordt de afstand rechtstreeks berekend op basis van de kleurwaarden, wat kan leiden tot minder perceptuele nauwkeurigheid, omdat het geen rekening houdt met menselijke kleurperceptie-nuances.
De

In professionele kleurgraden en beeldverwerking, matching kleuren op basis vanLABis zeer voordelig omdat het nabootst hoe het menselijk oog kleuren waarneemt, waardoor meer natuurlijke en visueel aantrekkelijke resultaten.Met behulp van deze methode kan de toepassing betere consistentie bereiken bij het toepassen van kleurpaletten op afbeeldingen, waardoor het gemakkelijker is om kleuren te matchen met gewenste stijlen.

Optimization Challenge: LAB Computation

Working with the LABkleurmodel vereist aanzienlijk meer computationele middelen dan het werken metRGBDit komt omdat in LAB elke kleur niet alleen door drie kanalen (RGB) wordt weergegeven, maar ook aanvullende berekeningen om de kleurcoördinaten en hun afstanden te verkrijgen.

Om dit proces te optimaliseren, hebben wepalette cachingom redundante berekeningen te voorkomen. Paletten gemaakt inLABDe modi worden opgeslagen in het geheugen, en als het beeld niet is veranderd, zal het systeem de pallet niet opnieuw berekenen.Dit helpt om het proces aanzienlijk te versnellen, vooral bij het toepassen van pallets op meerdere afbeeldingen, door het hergebruik van de vooraf berekende gegevens zonder de kostbare berekeningen opnieuw uit te voeren.

// 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
  };
};

Deze verbetering helpt de prestaties van de applicatie te versnellen, vooral wanneer meerdere vergelijkbare afbeeldingen herhaaldelijk worden verwerkt.

Palette Extraction and Application

Palet extractie is het proces van het identificeren van de meest karakteristieke en levendige kleuren uit een afbeelding, die vervolgens kunnen worden gebruikt om filters of visuele stijlen te maken.frequencyvan de kleur en zijnluminanceZorg ervoor dat het palet geen kleuren bevat die te veel op elkaar lijken.

Het belangrijkste mechanisme voor het extraheren van het palet is als volgt:

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;
  };
};

Deze code wordt gebruikt om een palet te extraheren uit een afbeelding, waar kleuren worden gefilterd door helderheid en verschil.

We hebben automatische naamgeneratie voor geëxtraheerde pallets toegevoegd om te voorkomen dat de gebruikersinterface wordt verstopt met onnodige knoppen.

Custom Palettes

Een van de hulpmiddelen in onze applicatie is de aangepaste pallet creatie blok. Deze functie stelt gebruikers in staat om pallets geschikt voor verschillende projecten te maken, waardoor volledige controle over kleuren.

Het proces begint met het selecteren van een kleur door deHexColorPickerDe gebruiker kan een kleur kiezen uit de afbeelding of een externe bron. Elke geselecteerde kleur wordt automatisch toegevoegd aan de kleurlijst van de gebruiker, waaruit een palet wordt gemaakt.

Na het selecteren van een paar kleuren, kan de palet worden opgeslagen met een aangepaste naam.

Color Neutralization with Color Palettes

Color neutralizationHet is een belangrijk aspect vancolor gradingHij speelt een kritische rol infilm post-productionHet is het proces waarbij afzonderlijke scènes of opnamen, genomen onder verschillende verlichtingsomstandigheden, kunnen worden gebracht naar een gemeenschappelijke kleurentone.

Laten we onderzoeken hoe pallets worden toegepast door twee iconische voorbeelden van cinematische visuele taal.

Palettes in the Movie “The Matrix”

De film“The Matrix”(1999), geregisseerd door de Wachowski broers en zussen, werd iconisch vanwege zijn unieke visuele stijl, die een specifiek groenachtig kleurpalet omvat. Deze kleur stijl is ontworpen om de digitale realiteit waarin de hoofdpersonen bestaan te visualiseren.

Main ColorsGroen, zwart en metaal

Palette Application:

• Extracting Green Tones: Om een matrix-stijlpalet te maken, kunnen we alle tinten groen, zwart en grijs uit de afbeelding extraheren. Door deze tinten toe te passen, kunnen we het "digitale realiteit" effect dat kenmerkend is voor de film bereiken.
De
• Toepassing op Nieuwe Afbeeldingen: Wanneer we dit palet toepassen, veranderen de kleuren van de afbeelding, waardoor alle pixels worden vervangen door diegene die het dichtst bij de geselecteerde kleuren uit het palet liggen, waardoor de gewenste "gecodeerde" stijl ontstaat.
De

Palettes in Wes Anderson’s Works

Wes Andersonis bekend om zijn levendige, kleurrijke en symmetrische visuele oplossingen.“The Grand Budapest Hotel”,De“Moonrise Kingdom”,en“The French Dispatch”,alle hebben zijn handtekening stijl, die rijk pastelkleuren en zorgvuldig geselecteerde paletten. een belangrijk element van zijn films is de harmonie en contrast in kleurontwerp.

Main Colors: Pastel tinten, heldere contrasterende kleuren, rood, geel, turquoise, groen.

Palette Application:

De
• Pastelkleuren extraheren: In de films van Wes Anderson worden vaak pastelkleuren gebruikt. Bijvoorbeeld lichte roze, blauwe en oranje tinten. We kunnen deze kleuren extraheren en toepassen op een nieuw beeld om een effect te creëren dat lijkt op vintage fotografie of om een gestileerde sfeer te benadrukken. In onze app kunnen we de palet van een afbeelding extraheren door kleuren te filteren door helderheid en contrast, waarbij alleen de zachte pastelkleuren behouden blijven.
De
• Toepassing op nieuwe afbeeldingen: Nadat het palet is geëxtraheerd, kan het op elke afbeelding worden toegepast, waardoor het de karakteristieke uitstraling heeft die doet denken aan de werken van Anderson, met heldere maar harmonieuze kleuren.
De

Nu we pallets kunnen extraheren uit referenties, is het tijd voor wat experimenteren!

Aangezien we paletten gebruiken die beperkt zijn in het aantal kleuren en onze applicatie in de browser draaien (wat betekent dat we beperkte computationele middelen gebruiken), moeten we geen uitstekende resultaten verwachten.

Hier zijn voorbeelden van verwerkte beelden in zowel RGB- als LAB-modussen.

Het extraheren en toepassen van paletten is een cruciaal aspect bij het maken van visuele stijlen, zoals de "Matrix" stijl, Wes Anderson's of Denis Villeneuve's. Onze app biedt een visuele tool voor het werken met kleuren die gebruikers in staat stelt om paletten te extraheren, toe te passen en unieke visuele effecten te creëren.

In het laatste gedeelte richten we ons op het fineturen en optimaliseren van kleuren.