I-Color Tool Yenza Yonke Iifoto Enye I-Wes Anderson Fever Dream

UkucingaI-Part 1 ye-Series, sisazibazisa iingcango ezisiseko ze-colour correction kunye nokucacisa inkulu lokusebenza kunye nemibala xa ukutshintsha iifoto. Kule nqaku yesibini, sinxulumene kwiinkalo ezininzi ezihlangeneyo, ezifana nemibala phakathiRGBiimvelisoLABiimodeli umbala, kanye nenkquboextracting palettesukusuka iifoto kunye nokusetyenziswa kwakhona ukwakha i-visual styles ezizodwa.

Njengoko sisaziwe kwiphepha elandelayo, ezinye imibala kunye ne-palette zibonakalisa ngokubanzi kunokufuneka ekuqaleni. Oku kubangela ukuba sisebenzisa izixhobo ezincinane - i-RGB model kunye ne-Euclidean distance calculation. Ukuze iinkqubo ezininzi ezihlangeneyo, kunjalo, kufuneka enye into ezininzi.

Nangona kuqala, inqaku elithiyo.

The RGB Model

iindidi ezimbini ezidumileyo iimveliso -RGBiimvelisoLAB— zihlanganisa ngokufanayo ngokufanelekileyo kwindlela yokubonisa kunye nokuthintela imibala.

YintoniRGBModel UkusebenzisaRedUkucingaGreenYayeBlueiikhangiso ukubonisa imibala. Yonke iikhangiso ingaba imibala ezingu-0 ukuya ku-255, oku kuholela ngaphezu kwe-16 million imibala. Le model iyona elungileyo ekusebenziseni iifoto ezibonakalayo kwi-screens, njengoko i-computer monitors, i-TV, kunye ne-smartphones zonke zinezixhobo le model.

RGB Key Features:

Ukucinga
• Ukusetyenziswa inkqubo additive apho imibala ifumaneka ngokuxhomekeka i-red, green, kunye ne-blue light.
Ukucinga
• Yinto elula ukufumana kunye nokuthintela kwi-pixel level.
Ukucinga
• Yintoni iingcali yayo yokubonisa zonke imibala ngokucacileyo, njengoko akufanele ukucacisa umntu umbala.
Ukucinga

The LAB Model

YintoniLABmodel ibonisa umbala kwiintlobo ezintathu:L (lightness)UkucingaA (a color spectrum from green to red)YayeB (a color spectrum from blue to yellow)Le nqakraza ibandakanya njani umntu ukhangela umbala kunye nokubonisa ubukhulu kunye ne-brightness ye-image.

LAB Key Features:

Ukucinga
• I-L channel ikulawula i-brightness, okuvumela ukuguqulwa kwe-lightness ngaphandle kokuguqulwa kwama-colour.
Ukucinga
• I-A kunye ne-B channels zibonisa iintlobo ze-color, okuvumela ukulawula ngokukhawuleza kwi-spectrum esikhulu yeentsimbi.
Ukucinga
• I-LAB model ikuncedo kakhulu kwi-professional color grading njengoko i-massive kakhulu kwaye ivumela ukucaciswa kwama-color ngokucacileyo ngaphandle kokuphendula ezinye iiparamitha ze-image.
Ukucinga

Kwimodeli ye-LAB, i-brightness ifumaneka kwi-color, okuvumela ukuguqula iiparamitha ze-visual ye-image ngaphandle kokuphendula i-color balance yayo. Oku kuholela ekugqibeleni kwe-color ezininzi kunye ne-natural.

Color Calculation Algorithm and Using LAB

Ukubala kunye nokuvelisa imibala, isicelo yethu isebenzisa icolorjs.iolibrary, leyo isebenza ngempumelelo kunye nemibala kwimodeli LAB. Ukubambisana le library kwiprojekthi kunokukwazi ukwenza iingcebiso ezifanelekileyo eziza kukunceda ukufumana imiphumela efunekayo xa usebenzise iifoto.

Nazi isibonelo ikhowudi esetyenziswa kwi-app yethu ekusebenziseni imibala kwimodeli ye-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;
  }
};

I-block ye-code ithatha inkqubo yokufumana umbala elidlulileyo kwi-palette eyodwa ngokucacisa i-colour distance phakathi kwe-colour target kunye ne-colors kwi-palette. I-methode yokubala ikakhulukazi kwi-mode eyenziwe, okanyeRGBokanyeLABNgathi

How This Works in Practice:

Ukucinga
• I-LAB Mode: I-LAB color space yenzelwe ukuxhaswa kunye ne-human vision, ukwahlukanisa i-brightness (L) kwi-components ye-chromatic (A kunye ne-B). Xa ukwahlukanisa imibala kwi-LAB, i-algorithm ibonelela ukuba imibala zihlanganiswa ngexabiso ngokufanelekileyo, nto leyo ibonelela ukuba sincoma njani iingxaki zeemibala, ngaphandle kuphela ingxaki ye-RGB ye-mathematical.
Ukucinga

• RGB Mode: The RGB color space simply represents color by the intensity of red, green, and blue light. In this mode, the distance is calculated directly based on the color values, which can lead to less perceptual accuracy, as it doesn’t account for human color perception nuances.

  
  

Ukucinga

Kwi-Color Grading Professional kunye ne-Image Processing, ukuqhagamshela imibala ngokufanelekileyoLABUkusebenzisa le nkqubo, isicelo inokufumana ukunxibelelana kakuhle xa isetyenziseka indlela eye umntu ukufumana imibala, okuvumela iziphumo ezininzi ngokwemvelo kunye ezifanelekileyo. Ukusebenzisa le nkqubo, isicelo inokufumana ukunxibelelana kakuhle xa isetyenziswa imibala imibala, okwenza kube lula ukunxibelelana imibala kwiimfuno ezifakiweyo.

Optimization Challenge: LAB Computation

Working with the LABiimodeli umbala kufuneka izixhobo ezininzi ze-computing kunokuba kuxhomekekeRGBYinto ngenxa yokuba, kwi-LAB, umbala omnye igcinwe kuphela ngeengxaki ezintathu (RGB), kodwa kuquka izicwangciso ezongezelelweyo ukufumana iingxaki ze-color kunye neengxaki zayo.

Ukuphucula le mveliso, sinikapalette cachingUkuvimbela iingcebiso ezininzi. I-Palettes created inLABiimodeli zithunyelwe kwi-memory, kwaye ukuba umfanekiso ayikwazanga, i-system ayikwazanga i-palette. Oku kukunceda ukuhanjiswa kakhulu kwinkqubo, ikakhulukazi xa kusetyenziswa i-palettes kwiimifanekiso ezininzi, ngokuvumela iinkcukacha ze-precomputed ngaphandle kokufumana iinkcukacha ezininzi ezininzi.

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

Ukuphuculwa oku kunceda ukukhuthaza ukusebenza kwe-application, ikakhulukazi xa usebenzise iifoto ezininzi ezifanayo ngokufanayo.

Palette Extraction and Application

Ukukhwabanisa i-palette yi-process ye-identification ye-colors ezininzi eziqhelekileyo kunye ne-living kwi-image, leyo ingasetyenziselwa ukwakha i-filters okanye i-visual styles. Thina ukwamkela i-10 i-colors ezidlulileyo (ukukhwabanisa i-diversity) ngokusebenzisa i-algorithm eyenza zombinifrequencyimibala yayo yayoluminance, ukuqinisekisa ukuba i-palette ayinezela imibala ezininzi efana nabanye.

I-Mechanism main ye-extraction ye-palette ifumaneka kulandelayo:

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

Le ikhowudi isetyenziselwa ukunyuka i-palette kwi-image, apho imibala ifilimu yi-brightness kunye ne-difference. Nge-mechanism, unokufumana ngokukhawuleza iimibala ezininzi ezibonakalayo yokusetyenziswa kwakhona.

I-Generation yeName ye-Automatic ye-pallet eyenziwe ukuze akuvimbele ukuxhaswa kwe-user interface nge-buttons ezincinane.

Custom Palettes

Enye izixhobo kwi-application yethu i-custom palette creation block. Le nkqubo ivumela abasebenzisi ukwakha i-palettes ezifanelekileyo kwiiprojekthi ezahlukeneyo, ukunika ukulawula ngokupheleleyo kwiimibala.

inkqubo kuqala ukhethe umbala ngeHexColorPickerinterface. Umdlali inokukhetha umbala ukusuka umfanekiso okanye isisombululo yeenxalenye. Yonke umbala elidlulileyo ifumaneka ngokuzenzakalelayo kwi-colour list yomsebenzisi, ukusuka leyo i-palette ifumaneka.

Emva kokukhetha imibala emininzi, i-palette ingasetyenziswa nge-imeyile ye-custom. Emva koko, ingasetyenziswa kwimifanekiso ebhalisiweyo ukufumana umgangatho we-visual.

Color Neutralization with Color Palettes

Color neutralizationUmzekelo olukhulucolor gradingkwaye ibonelela isicelo esifunyenwefilm post-production. Yinto yinkqubo apho iingcingo ezimbalwa okanye iingcingo, ezisetyenziswa kwimeko ezahlukeneyo yokukhanyisa, kunokufumana iingcingo yemibala efanelekileyo. Oku kwenziwa ngokuvamile ukuqinisekisa umgangatho we-visual ngokupheleleyo kwimifanekiso kunye nokwenza iingcingo ngokufanelekileyo ngokufanelekileyo, ngaphandle kwezimo ze-shooting.

Thina ucacise njani iipalethi ezisetyenziswa ngeengxaki ezimbini eziphambili ze-cinematic visual language.

Palettes in the Movie “The Matrix”

Umculo“The Matrix”(1999), umphathi we-Wachowski brothers, uye kwenziwa i-iconic ngenxa ye-visual style yayo, leyo kuquka i-greenish color palette. Le style ye-colour yenzelwe ukufikelela kwimveliso yedijithali apho ama-characters eziphambili zihambelana. Iimiphumo ze-visual ye-movie ziye ziye ziye ziye ziye zithunyelwe ukuxhaswa kwe-virtualization, apho imibala ye-cold kunye ne-mechanical zihlabathi.

Main Colors: Green, black, metal.

Palette Application:

Ukucinga
• Ukukhuphela i-Green Tones: Ukwenza i-Matrix-style palette, sinokufumana zonke iintlobo ze-green, i-black, kunye ne-gray kwi-image. Ngokusetyenziswa kweziintlobo, sinokufumana i-effect "i-digital reality" ebonakalayo kwi-movie. Kwi-app yethu, oku kungenziwa ngokufanisa ngomhla kunye ne-distance, ukugcina kuphela iintlobo ze-green kunye nokunciphisa ezinye.
Ukucinga
• Ukusetyenziswa kwimifanekiso ezintsha: Xa kusetyenziswa le palette, imibala ye-image iya kubhalwe, ukuguqulwa zonke iipikseli kunye neepikseli ezifanelekileyo kwiimibala ezahlukileyo kwi-palette, ngoko kuvelisa i-style ebonakalayo "i-coded".
Ukucinga

Palettes in Wes Anderson’s Works

Wes Andersoniye yaziwa ngenxa yayo izixazululo ze-visual, i-colourful, kunye ne-symmetrical. Iimpawu zayo, ezifana“The Grand Budapest Hotel”,Ukucinga“Moonrise Kingdom”,iimveliso“The French Dispatch”,Zonke ziyafumaneka i-signature style yayo, ebonakalayo iintlobo ze-pastel kunye ne-palettes eziluncedo ezahlukileyo. Umzekelo wokufanisa iifilimu zayo i-harmony kunye ne-contrast kwi-color design.

Main Colors: Shades pastel, imibala ebonakalayo, red, yellow, turquoise, green.

Palette Application:

Ukucinga
• Ukukhishwa kwePastel Shades: Kwiifilimu weWes Anderson, imibala ye-pastel isetyenziselwa ngokukhawuleza. Umzekelo, imibala ye-rosa, i-blue, kunye ne-orange. Singakwazi ukuchithwa imibala ezininzi kwaye isetyenziswe kwifoto entsha ukuze kwenziwe isiphumo efana ne-vintage photography okanye ukucindezela umoya we-stylized. Kwi-app yethu, singakwazi ukuchithwa i-palette kwiifoto ngokucacisa kunye ne-contrast, ukugcina kuphela imibala ye-pastel eluhlaza.
Ukucinga
• Ukusetyenziswa kwizithuba ezintsha: Emva kokuba i-palette ifakwe, ingasetyenziswa kwi-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image ye-image.
Ukucinga

Ngoku ukuba sinokufumana iipalethi evela kwi-references, ixesha lokuba i-experimentation!

Ukuba usebenzisa iipalethi ezincinane kwinqanaba yemibala kwaye usebenza i-application yethu kwi-browser (omzekelo ukusetyenziswa kwezinto ezincinane ze-computing), sinokufuneka ukufikelela imiphumo emangalisayo. Nangona kunjalo, oku kunokuba kuthetha izisombululo ezisemgangathweni zokusebenza kweipalethi kwinqanaba yemibala.

Nazi iimifanekiso ezijoliswe kwi-RGB kunye ne-LAB.

Ukukhishwa kunye nokuvelisa iipalethi yindawo ebalulekileyo yokwenza i-stiles ye-visual, ezifana ne-"Matrix" style, i-Wes Anderson, okanye i-Denis Villeneuve. I-app yethu inikeza isixhobo se-visual yokusebenza nge-colors ebonakalayo kubasebenzisi ukuthatha iipalethi, ukuvelisa, kunye nokwenza iimiphumo ze-visual ezizodwa. Ngoko ke, unako kalula ukuvelisa iifoto kunye nokudala i-look ye-visual efana neifilimu ezidumileyo.

Kwixesha lokugqibela, siya kuxhomekeke kwi-fin-tuning kunye nokuphucula imibala.