Deze kleurtool verandert elk beeld in een Wes Anderson-koortsdromen

In in het eerste deel van deze serie hebben we de fundamentele principes van kleurcorrectie onderzocht en het belang van het werken met kleuren bij het bewerken van afbeeldingen uitgelegd. In dit tweede deel duiken we onder in meer geavanceerde concepten, zoals de verschillen tussen de RGB en LAB kleurmodellen, evenals het proces van het extraheren van paletten uit afbeeldingen en het gebruik ervan 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 verwachtten.Dit is te wijten aan het feit dat we de eenvoudigste hulpmiddelen gebruikten - het RGB-model en Euclidische afstandsberekening.

Maar eerst een beetje theorie.

Het RGB-model

De twee meest populaire kleurmodellen - RGB en LAB - verschillen fundamenteel in de manier waarop ze kleuren vertegenwoordigen en verwerken.

Het RGB model maakt gebruik van de Red, Green en Blue kanalen om kleuren te vertegenwoordigen. Elk kanaal kan waarden hebben variërend van 0 tot 255, wat resulteert in meer dan 16 miljoen mogelijke kleuren.

RGB Key Features:

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

Het LAB-model

Het model LAB vertegenwoordigt kleur in drie kanalen: L (lichtheid), A (een kleurenspectrum van groen tot rood), en B (een kleurenspectrum van blauw tot geel).

LAB Key Features:

• De L kanaal regelt de helderheid, waardoor lichtheid aanpassingen zonder het veranderen van de kleur.

• De A en B kanalen beschrijven kleur tinten, waardoor meer nauwkeurige controle over een breed spectrum van kleuren.

• Het LAB-model is vooral nuttig in professionele kleurbeoordeling omdat het meer veelzijdig is en precieze kleur aanpassingen mogelijk maakt zonder andere beeldparameters te beïnvloeden.

  
  

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 en het gebruik van LAB

Om kleuren te berekenen en toe te passen, maakt onze applicatie gebruik van de colorjs.io bibliotheek, die efficiënt werkt met kleuren in het LAB-model.

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

Deze code blok 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 het palet.

Hoe dit in de praktijk werkt:

• LAB-modus: De LAB-kleurruimte is ontworpen om in lijn te komen met 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 het prioriteit geeft aan hoe we kleurverschillen waarnemen, niet alleen het wiskundige RGB-verschil.

• RGB-modus: De RGB-kleurruimte vertegenwoordigt eenvoudig de kleur door de intensiteit van rood, groen, en blauw licht.

  In professionele kleurenbeoordeling en beeldverwerking is het matchen van kleuren op basis van LAB uiterst voordelig omdat het nabootst hoe het menselijk oog kleuren waarneemt, waardoor meer natuurlijke en visueel aantrekkelijke resultaten kunnen worden verkregen.

  
  

  

  Optimization Challenge: LAB Computation

  Werken met het LAB kleurmodel vereist aanzienlijk meer computationele middelen dan werken met RGB. Dit komt omdat, in LAB, elke kleur niet alleen wordt vertegenwoordigd door drie kanalen (RGB), maar ook aanvullende berekeningen om de kleurcoördinaten en hun afstanden te verkrijgen.

  
  

  Om dit proces te optimaliseren, hebben we palette caching geïntroduceerd om overmatige berekeningen te voorkomen. Paletten gemaakt in LAB modus worden opgeslagen in het geheugen, en als het beeld niet is veranderd, zal het systeem de palette niet opnieuw berekenen.

  // 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 extractie en toepassing

  Palette-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 creëren.We extraheren de top-10 kleuren (verschillen waarborgen) met behulp van een algoritme dat rekening houdt met zowel de frequentie van het voorkomen van kleuren en de verlichting, zodat het palet geen kleuren bevat die te veel op elkaar lijken.

  
  

  Het belangrijkste mechanisme voor het extraheren van de pallet 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 uit een afbeelding te extraheren, waarbij kleuren worden gefilterd op 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 tools 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 via de HexColorPicker interface. De 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.

  
  

  

  Kleurneutralisatie met kleurpaletten

  Kleurneutralisatie met kleurpaletten

  Kleurneutralisatie is een belangrijk aspect van kleurbeoordeling en speelt een cruciale rol in filmpostproductie. Het is het proces waarbij afzonderlijke scènes of opnames, genomen onder verschillende lichtomstandigheden, kunnen worden gebracht naar een gemeenschappelijke kleurentone.

  
  

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

  Paletten in de film “The Matrix”

  De film "The Matrix" (1999), geregisseerd door de Wachowski broers en zusters, werd iconisch vanwege zijn unieke visuele stijl, die een specifieke groenachtige kleurpalet bevat. Deze kleur stijl werd ontworpen om de digitale realiteit waarin de hoofdpersonen bestaan te visualiseren.

  
  

  Hoofdkleuren: groen, zwart, metalen.

  Aanvulling van de applicatie:

  • 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 kenmerk van de film bereiken.

    In onze app kan dit worden gedaan door te filteren op helderheid en afstand, waarbij alleen de groene tinten worden bewaard en andere worden genegeerd.

  • Toepassing op nieuwe afbeeldingen: Wanneer we dit palet toepassen, veranderen de kleuren van de afbeelding, waarbij alle pixels worden vervangen door

    

    Paletten in de werken van Wes Anderson

    Wes Anderson staat bekend om zijn levendige, kleurrijke en symmetrische visuele oplossingen. Zijn werken, zoals “The Grand Budapest Hotel”,“Moonrise Kingdom”, en “The French Dispatch”, hebben allemaal zijn handtekeningsstijl, die rijk pastelkleuren en zorgvuldig geselecteerde paletten bevat.

    
    

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

    Aanvulling van de applicatie:

    • Extracting Pastel Shades: 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 worden bewaard.

    • Toepassen op nieuwe afbeeldingen: Nadat het pallet is geëxtraheerd, kan het worden toegepast op elke afbeelding, waardoor het de ken

      

      
      

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

      
      

      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-modus.

      
      

      

      
      

      

      
      

      Het extraheren en toepassen van pallets 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 pallets te extraheren, toe te passen en unieke visuele effecten te creëren.

      
      

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