Hierdie kleur gereedskap verander enige prentjie in 'n Wes Anderson-koors droom

In die eerste deel van hierdie reeks, het ons die basiese beginsels van kleurkorreksie ondersoek en die belangrikheid van die werk met kleure verduidelik wanneer die beelde bewerk word. In hierdie tweede deel, duik ons in meer gevorderde konsepte, soos die verskille tussen die RGB en LAB kleurmodelle, sowel as die proses van ekstraheer palette van beelde en gebruik dit om unieke visuele style te skep.

Soos ons in die vorige artikel gesien het, het sommige kleure en palette anders weergegee as wat ons aanvanklik verwag het. Dit is te danke aan die feit dat ons die eenvoudigste gereedskap gebruik het - die RGB-model en Euclidese afstandberekening.

Maar eers 'n bietjie van die teorie.

Die RGB Model

Die twee gewildste kleurmodelle - RGB en LAB - is fundamenteel anders in hoe hulle kleure verteenwoordig en verwerk.

Die RGB model gebruik die Red, Green en Blue kanale om kleure te verteenwoordig. Elke kanaal kan waardes van 0 tot 255 hê, wat tot meer as 16 miljoen moontlike kleure lei.

RGB Sleutel eienskappe:

• Dit gebruik 'n additiewe proses waar kleure geskep word deur die kombinasie van rooi, groen en blou lig.
• Dit is makliker om te verstaan en te verwerk op die pixelvlak.
• Dit is beperk in sy vermoë om alle kleure akkuraat te verteenwoordig, aangesien dit nie rekening hou met menslike persepsie van kleur nie.

Die laboratoriummodel

Die LAB model verteenwoordig kleur in drie kanale: L (ligte), A (’n kleurspektrum van groen tot rooi), en B (’n kleurspektrum van blou tot geel).

Key Features:

• Die L kanaal beheer die helderheid, wat ligte aanpassings toelaat sonder om die kleur te verander.

• Die A en B kanale beskryf kleurskleure, wat meer presiese beheer oor 'n wye spektrum van kleure toelaat.

• Die LAB model is veral nuttig in professionele kleurgradering aangesien dit meer veelzijdig is en presiese kleur aanpassings toelaat sonder om ander beeldparameters te beïnvloed.

  
  

In die LAB-model word helderheid van kleur geskei, wat dit moontlik maak om die visuele parameters van 'n beeld aan te pas sonder om sy kleurbalans te beïnvloed.

Kleurberekeningsalgoritme en die gebruik van LAB

Om kleure te bereken en toe te pas, gebruik ons aansoek die colorjs.io biblioteek, wat doeltreffend werk met kleure in die LAB-model.

Hier is 'n voorbeeld van die kode wat in ons app gebruik word om met kleure in die LAB-model te werk:

// 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 kode hanteer die proses van die vind van die naaste kleur in 'n gegewe palet deur die kleur afstand tussen die doel kleur en die kleure in die palet te bereken.

Hoe dit werk in die praktyk:

• LAB-modus: Die LAB-kleurruimte is ontwerp om in ooreenstemming te wees met menslike visie, die helderheid (L) van chromatiese komponente (A en B) te skei.Wanneer die kleure in LAB ooreenstem, verseker die algoritme dat die kleure op 'n perseptuele akkurate manier vergelyk word, wat beteken dat dit prioriteit gee aan hoe ons kleurverskille waarneem, nie net die wiskundige RGB-verskille nie.

• RGB-modus: Die RGB-kleurruimte verteenwoordig eenvoudig kleur deur die intensiteit van rooi, groen, en blou lig.

  In professionele kleurklassifikasie en beeldverwerking is die ooreenstemmende kleure gebaseer op LAB baie voordelig omdat dit navolg hoe die menslike oog kleure waarneem, wat meer natuurlike en visueel aantreklike resultate toelaat.

  
  

  

  Optimisasie uitdaging: LAB Computation

  Werk met die LAB kleurmodel vereis aansienlik meer berekenings hulpbronne as werk met RGB. Dit is omdat, in LAB, elke kleur nie net deur drie kanale (RGB) verteenwoordig word nie, maar ook bykomende berekenings behels om die kleurkoördinaat en hul afstande te verkry.

  
  

  Om hierdie proses te optimaliseer, het ons palette caching geïntroduceer om redundante berekenings te vermy. Palette wat in LAB modus geskep is, word in geheue gestoor, en as die beeld nie verander het nie, sal die stelsel die palette nie herbereken nie.

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

  Hierdie verbetering help om die prestasie van die aansoek te versnel, veral wanneer verskeie soortgelyke beelde herhaaldelik verwerk word.

  Palette Uitvinding en Toepassing

  Palette-uittreksel is die proses van die identifisering van die mees kenmerkende en lewendige kleure uit 'n beeld, wat dan gebruik kan word om filters of visuele style te skep. Ons uittreksel die top-10 kleure (verseker diversiteit) met behulp van 'n algoritme wat rekening hou met beide die frekwensie van kleur voorkoms en sy ligheid, verseker dat die palet nie kleure wat te soortgelyk aan mekaar is, insluit nie.

  
  

  Die belangrikste meganisme vir die uittreksel van die palet is soos volg:

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

  Hierdie kode word gebruik om 'n palet uit 'n beeld te onttrek, waar kleure deur helderheid en verskil gefiltreer word.Met hierdie meganisme kan jy vinnig die mees representatiewe kleure versamel vir verdere toepassing.

  
  

  

  
  

  Ons het outomatiese naamgenerasie bygevoeg vir geëxtraheerde palette om te voorkom dat die gebruikersinterface met onnodige knoppies verstreng word.

  Gebaseerde palette

  Een van die gereedskap in ons aansoek is die aangepaste palette skepblok. Hierdie funksie laat gebruikers toe om palette te skep wat geskik is vir verskillende projekte, wat volle beheer oor kleure verskaf.

  Die proses begin met die keuse van 'n kleur deur middel van die HexColorPicker koppelvlak. Die gebruiker kan 'n kleur uit die beeld of 'n eksterne bron kies.

  Na 'n paar kleure te kies, kan die palet gered word met 'n aangepaste naam.

  
  

  

  Kleurneutralisering met Kleurpalette

  kleurneutralisering met kleurpalette

  Kleurneutralisering is 'n belangrike aspek van kleurbeoordeling en speel 'n kritieke rol in filmposproduksie. Dit is die proses waar individuele scènes of skote, onder verskillende verligtingstoestande geneem, tot 'n gemeenskaplike kleur toon gebracht kan word. Dit word gewoonlik gedoen om 'n eenvormige visuele styl gedurende die film te verseker en om die scènes visueel konsekwent te maak, ongeag die shooting toestande.

  
  

  Laat ons ondersoek hoe palette toegepas word deur twee ikoniese voorbeelde van cinematografiese visuele taal.

  Palette in die film “Die Matrix”

  Die film “The Matrix” (1999), geregisseer deur die Wachowski broers, het ikoon geword as gevolg van sy unieke visuele styl, wat 'n spesifieke groenagtige kleurpalet insluit. Hierdie kleurstyl is ontwerp om die digitale realiteit waarin die hoofkarakters bestaan te visualiseer.

  
  

  Main kleure: groen, swart, metaal.

  Vergroot word deur

  • Ekstraktuur van groen tonusse: Om 'n Matrix-stylpalet te skep, kan ons al die tinte van groen, swart en grijs uit die beeld uitneem. Door hierdie tonusse toe te pas, kan ons die "digitale werklikheid" effek kenmerk van die film bereik.

    In ons app, kan dit gedoen word deur te filter deur helderheid en afstand, hou slegs die groen tinte en ignoreer ander.

  • Toepas op Nuwe Beelde: Wanneer ons hierdie palet toepas, sal die beeldkleure verander, al die piksels vervang met diegene wat die

    

    Palette in Wes Anderson se werke

    Wes Anderson is bekend vir sy lewendige, kleurvolle en simmetrieke visuele oplossings. Sy werke, soos “The Grand Budapest Hotel”,“Moonrise Kingdom”, en “The French Dispatch”, het almal sy handtekeningstyl, wat ryk pastelkleur en versigtig geselekteerde palette bevat. Een sleutelelement van sy films is die harmonie en kontras in kleurontwerp.

    
    

    Hoofkleure: Pastel tinte, helder kontrasterende kleure, rooi, geel, turquoise, groen.

    Vergroot word deur

    • Extracting Pastel Shades: In Wes Anderson se films word pastelkleure dikwels gebruik. Byvoorbeeld, ligte roze, blou en oranje tinte. Ons kan hierdie kleure uitneem en dit op 'n nuwe beeld toepas om 'n effek te skep wat soortgelyk is aan vintage fotografie of om 'n gestyliseerde atmosfeer te beklemtoon.

      In ons app, kan ons die palet uit 'n beeld uitneem deur kleure te filter deur helderheid en kontras, wat slegs die sagte pastel tinte bewaar.

    • Toepas op Nuwe Images: Nadat die palet geëxtraheer is, kan dit op enige beeld toegepas word,

      

      
      

      Nou dat ons palette uit verwysings kan uittreksel, is dit tyd vir 'n paar eksperimente!

      
      

      Aangesien ons palette gebruik wat beperk is in die aantal kleure en ons aansoek in die leser hardloop (wat beteken dat ons beperkte berekenings hulpbronne gebruik), moet ons nie uitstekende resultate verwag nie.

      
      

      Hier is voorbeelde van verwerkte beelde in beide RGB en LAB modes.

      
      

      

      
      

      

      
      

      Palette te onttrek en aan te pas is 'n belangrike aspek van die skep van visuele style, soos die "Matrix" styl, Wes Anderson se of Denis Villeneuve se. Ons app bied 'n visuele instrument vir die werk met kleure wat gebruikers toelaat om palette te onttrek, aan te pas en unieke visuele effekte te skep.

      
      

      In die finale deel sal ons fokus op die fine-tuning en optimalisering van kleure.