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

In dieDie 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.RGBenLABDie kleur van die proses, sowel as dieextracting palettesvan 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.

Eerstens 'n bietjie van die teorie.

The RGB Model

Die twee gewildste kleur modelle -RGBenLAB- is fundamenteel anders in die manier waarop hulle kleure verteenwoordig en verwerk.

dieRGBDie model gebruik dieReddieGreenenBluekanale om kleure te verteenwoordig. Elke kanaal kan waardes van 0 tot 255 hê, wat tot meer as 16 miljoen moontlike kleure lei. Hierdie model is ideaal vir die werk met beelde wat op skerm verskyn, aangesien rekenaarmonitore, TV's en slimfone almal hierdie model gebruik.

RGB Key Features:

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

The LAB Model

dieLABdie model verteenwoordig kleur in drie kanale:L (lightness)dieA (a color spectrum from green to red)enB (a color spectrum from blue to yellow)Hierdie model is nader aan hoe mense kleur waarneem en reken vir beide die kleur en helderheid van 'n beeld.

LAB Key Features:

die
• Die L-kanaal beheer die helderheid, wat ligte aanpassings toelaat sonder om die kleur te verander.
die
• Die A en B kanale beskryf kleur skakerings, wat meer presiese beheer oor 'n wye spektrum van kleure toelaat.
die
• Die LAB-model is veral nuttig in professionele kleurklasering, aangesien dit meer veelvuldig is en presiese kleuraanpassings moontlik maak sonder om ander beeldparameters te beïnvloed.
die

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 die kleurbalans te beïnvloed.

Color Calculation Algorithm and Using LAB

Om kleure te bereken en toe te pas, gebruik ons aansoek diecolorjs.ioDie integrasie van hierdie biblioteek in die projek laat ons toe om presiese berekenings uit te voer wat help om die gewenste resultate te bereik by die verwerking van beelde.

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

Hierdie 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.RGBofLABDie

How This Works in Practice:

die
• LAB-modus: Die LAB-kleurruimte is ontwerp om in ooreenstemming te wees met menslike siening, wat helderheid (L) van chromatiese komponente (A en B) skei. by die ooreenstemming van kleure in LAB, verseker die algoritme dat die kleure op 'n perseptuele akkurate manier vergelyk word, wat beteken dat dit prioriteer hoe ons kleurverskille waarneem, nie net die wiskundige RGB-verskille nie.
die
• RGB-modus: Die RGB-kleurruimte verteenwoordig eenvoudig kleur deur die intensiteit van rooi, groen en blou lig. In hierdie modus word die afstand direk bereken op grond van die kleurwaardes, wat kan lei tot minder perseptuele akkuraatheid, aangesien dit nie rekening hou met menslike kleurperceptiewe nuanses nie.

In professionele kleur klassifikasie en beeldverwerking, ooreenstem kleur gebaseer opLABis baie voordelig omdat dit navolg hoe die menslike oog kleure waarneem, wat meer natuurlike en visueel aantreklike resultate toelaat.Met behulp van hierdie metode, kan die aansoek beter konsekwentheid bereik wanneer kleurpalette op beelde toegepas word, wat dit makliker maak om kleure te pas by gewenste style.

Optimization Challenge: LAB Computation

Werk met dieLABkleurmodel vereis aansienlik meer berekenings hulpbronne as die werk metRGBDit 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 onspalette cachingom redundante berekenings te vermy. Palette wat inLABmode in die geheue gestoor word, en as die beeld nie verander het nie, sal die stelsel nie die palet herbereken nie.Dit help om die proses aansienlik te versnel, veral wanneer palette op verskeie beelde toegepas word, deur die voorbereide data te hergebruik sonder om die duur berekenings weer uit te voer.

// 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 Extraction and Application

Palette-uittreksel is die proses om die mees kenmerkende en lewendige kleure uit 'n beeld te identifiseer, wat dan gebruik kan word om filters of visuele style te skep.frequencyvan die kleur voorkoms en syluminance, verseker dat die palet nie kleure bevat wat te soortgelyk aan mekaar is 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.

Custom Palettes

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 kies van 'n kleur deur dieHexColorPickerDie gebruiker kan 'n kleur uit die beeld of 'n eksterne bron kies. Elke gekose kleur word outomaties bygevoeg aan die gebruiker se kleurlys, waaruit 'n palet geskep word.

Nadat 'n paar kleure gekies is, kan die palet met 'n aangepaste naam gered word.

Color Neutralization with Color Palettes

Color neutralizationDit is 'n belangrike aspek vancolor gradingHy speel 'n kritieke rol infilm post-productionDit is die proses waar individuele scènes of skote, geneem onder verskillende beligtingsomstandighede, tot 'n gemeenskaplike kleur toon kan bring.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.

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

Palettes in the Movie “The 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 ColorsGroen, swart en metaal

Palette Application:

die
• Ekstraktiewe groen tonusse: Om 'n Matrix-stylpalet te skep, kan ons al die skakerings van groen, swart en grijs uit die prentjie uitneem. Deur hierdie tonusse toe te pas, kan ons die "digitale werklikheid" -effek wat kenmerkend is vir die film bereik.
die
• Toepassing op nuwe beelde: Wanneer ons hierdie palet toepas, sal die kleure van die beeld verander, wat al die piksels vervang met diegene wat die naaste is aan die gekose kleure van die palet, wat die gewenste "gekodeerde" styl skep.
die

Palettes in Wes Anderson’s Works

Wes Andersonis bekend vir sy lewendige, kleurvolle en simmetrieke visuele oplossings.“The Grand Budapest Hotel”,die“Moonrise Kingdom”,en“The French Dispatch”,almal het sy handtekening styl, wat gekenmerk word deur ryk pastelkleur en versigtig geselekteerde palette. Een sleutelelement van sy films is die harmonie en kontras in kleur ontwerp.

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

Palette Application:

die
• Extracing Pastel Shades: In Wes Anderson se films word pastel kleure 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 fotograaf 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.
die
• Toepassing op nuwe beelde: Nadat die palet geëxtraheer is, kan dit op enige beeld toegepas word, wat dit die kenmerkende voorkoms gee wat aan Anderson se werke herinner, met helder maar harmonieuse kleure.
die

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.

Die uittreksel en toepassing van palette 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 uittreksel, aan te pas en unieke visuele effekte te skep.

In die finale deel sal ons fokus op die verfining en optimalisering van kleure.