Оваа алатка за боја ја претвора секоја слика во сон на Вес Андерсон

воПрвиот дел од оваа серија, ги истраживме основните принципи на корекција на боите и ја објаснивме важноста на работа со бои при уредувањето на сликите.RGBиLABмоделите на боја, како и процесот наextracting palettesод слики и да ги користите за да креирате уникатни визуелни стилови.

Како што видовме во претходната статија, некои бои и палети се прикажани поинаку отколку што првично очекувавме. Ова се должи на фактот дека ги користевме наједноставните алатки – RGB моделот и Еуклидовото пресметување на растојанието.

Но, прво малку теорија.

The RGB Model

Двете најпопуларни модели на бои -RGBиLAB- се фундаментално различни во начинот на кој ги претставуваат и обработуваат боите.

наRGBМоделот го користиRed, наGreenиBlueСекој канал може да има вредности од 0 до 255, што резултира со повеќе од 16 милиони можни бои. Овој модел е идеален за работа со слики прикажани на екрани, како компјутерски монитори, телевизори и паметни телефони сите го користат овој модел.

RGB Key Features:

Ѕидот
• Таа користи адитивен процес каде што боите се создаваат со комбинирање на црвена, зелена и сина светлина.
Ѕидот
• Полесно е да се разбере и процесира на ниво на пиксели.
Ѕидот
• Таа е ограничена во својата способност да ги претставува сите бои прецизно, бидејќи не ја одразува човечката перцепција на бојата.
Ѕидот

The LAB Model

наLABМоделот претставува боја во три канали:L (lightness), наA (a color spectrum from green to red)иB (a color spectrum from blue to yellow)Овој модел е поблиску до тоа како луѓето ги перцепираат боите и е одговорен за бојата и осветленоста на сликата.

LAB Key Features:

Ѕидот
• L каналот ја контролира светлината, овозможувајќи прилагодување на светлината без промена на бојата.
Ѕидот
• Каналите А и Б ги опишуваат нијансите на боите, овозможувајќи попрецизна контрола над широк спектар на бои.
Ѕидот
• Лаб моделот е особено корисен во професионалното оценување на боите, бидејќи е повеќе разноврсен и овозможува прецизни прилагодувања на боите без да влијае на другите параметри на сликата.
Ѕидот

Во моделот LAB, осветленоста е одвоена од бојата, што овозможува да се прилагодат визуелните параметри на сликата без да се влијае на нејзината рамнотежа на бои.

Color Calculation Algorithm and Using LAB

За пресметување и примена на бои, нашата апликација користиcolorjs.ioИнтегрирање на оваа библиотека во проектот ни овозможува да извршиме прецизни пресметки кои помагаат да се постигнат посакуваните резултати при обработка на слики.

Еве пример за кодот што се користи во нашата апликација за работа со бои во моделот 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;
  }
};

Овој блок на код се занимава со процесот на наоѓање на најблиската боја во дадена палета со пресметување на растојанието помеѓу бојата на целта и боите во палетата.RGBилиLAB. на

How This Works in Practice:

Ѕидот

• LAB Mode: The LAB color space is designed to align with human vision, separating brightness (L) from chromatic components (A and B). When matching colors in LAB, the algorithm ensures that the colors are compared in a perceptually accurate manner, meaning it prioritizes how we perceive color differences, not just the mathematical RGB difference.

Ѕидот
• RGB режим: RGB боја просторот едноставно ја претставува бојата со интензитетот на црвената, зелената и сината светлина.Во овој режим, растојанието се пресметува директно врз основа на вредностите на бојата, што може да доведе до помала перцептивна точност, бидејќи не ги зема предвид нијансите на човечкото перцепција на бојата.
Ѕидот

Во професионално оценување на боите и обработка на слики, споредба на боите врз основа наLABе многу корисно затоа што имитира како човечкото око ги перцепира боите, овозможувајќи повеќе природни и визуелно атрактивни резултати. Користејќи го овој метод, апликацијата може да постигне подобра конзистентност при применување на палети на бои на слики, што го олеснува усогласувањето на боите со посакуваните стилови.

Optimization Challenge: LAB Computation

Работејќи соLABбоја модел бара значително повеќе компјутерски ресурси отколку работа соRGBОва е затоа што, во LAB, секоја боја е претставена не само со три канали (RGB), туку исто така вклучува дополнителни пресметки за да се добијат координатите на боите и нивните растојанија.

За да го оптимизираме овој процес, ние воведевмеpalette cachingза да се избегнат излишни пресметки. Палети создадени воLABрежими се складираат во меморијата, и ако сликата не се промени, системот нема да го пресмета палетата. Ова помага значително да се забрза процесот, особено кога се применуваат палети на повеќе слики, со повторна употреба на претходно пресметаните податоци без да мора да ги изврши скапите пресметки повторно.

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

Ова подобрување помага да се забрза перформансите на апликацијата, особено кога се обработуваат повеќе слични слики постојано.

Palette Extraction and Application

Екстракцијата на палети е процес на идентификување на најкарактеристичните и најживописни бои од сликата, кои потоа може да се користат за да се создадат филтри или визуелни стилови.frequencyБоја на појава и нејзинатаluminance, обезбедување дека палетата не вклучува бои кои се премногу слични едни на други.

Главниот механизам за екстракција на палетата е како што следува:

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

Овој код се користи за да се извлече палета од слика, каде што боите се филтрираат по осветленост и разлика.Со овој механизам, можете брзо да ги соберете најпредставни бои за понатамошна примена.

Додадовме автоматско генерирање на имиња за извлечените палети за да се избегне заплетување на корисничкиот интерфејс со непотребни копчиња.

Custom Palettes

Една од алатките во нашата апликација е блок за создавање на сопствени палети. Оваа функција им овозможува на корисниците да креираат палети погодни за различни проекти, обезбедувајќи целосна контрола над боите.

Процесот започнува со изборот на боја прекуHexColorPickerКорисникот може да избере боја од сликата или од надворешен извор. Секоја избрана боја автоматски се додава на листата со бои на корисникот, од која се создава палета.

По изборот на неколку бои, палетата може да се зачува со прилагодено име. Подоцна, може да се примени на испратената слика за да се постигне специфичен визуелен стил.

Color Neutralization with Color Palettes

Color neutralizationТоа е важен аспект наcolor gradingигра критична улога воfilm post-productionТоа е процес во кој поединечни сцени или снимки, направени под различни услови на осветлување, може да се донесат до заеднички тон на боја.Ова обично се прави за да се обезбеди единствен визуелен стил во целиот филм и да се направат сцените визуелно конзистентни, без оглед на условите на снимање.

Да истражиме како се применуваат палети преку два иконични примери на кинематографски визуелен јазик.

Palettes in the Movie “The Matrix”

Филмот“The Matrix”(1999), режиран од браќата Вачовски, стана иконичен поради својот уникатен визуелен стил, кој вклучува специфична зеленикава палета на бои. Овој стил на бои е дизајниран да ја визуелизира дигиталната реалност во која постојат главните ликови.

Main ColorsЗелена, црна и метална

Palette Application:

Ѕидот
• Извлекување на зелени тонови: За да создадеме палета во стилот на Матрицата, можеме да ги извлечеме сите нијанси на зелено, црно и сиво од сликата. Со примена на овие тонови, можеме да го постигнеме ефектот на "дигиталната реалност" карактеристичен за филмот.
Ѕидот
• Применување на нови слики: Кога ќе ја примениме оваа палета, боите на сликата ќе се променат, заменувајќи ги сите пиксели со оние најблиски до избраните бои од палетата, создавајќи го саканиот "кодиран" стил.
Ѕидот

Palettes in Wes Anderson’s Works

Wes Andersonе познат по своите живописни, шарени и симетрични визуелни решенија.“The Grand Budapest Hotel”,Ѕидот“Moonrise Kingdom”,и“The French Dispatch”, all have his signature style, which features rich pastel colors and carefully selected palettes. One key element of his films is the harmony and contrast in color design.

Main Colors: Пастелни нијанси, светли контрастни бои, црвено, жолто, тиркизно, зелено.

Palette Application:

Ѕидот
• Екстракција на пастелни нијанси: Во филмовите на Вес Андерсон, пастелните бои често се користат. На пример, светли розови, сини и портокалови тонови. Можеме да ги извлечеме овие бои и да ги примениме на нова слика за да создадеме ефект кој личи на винтажна фотографија или да ја нагласиме стилизираната атмосфера. Во нашата апликација, можеме да ја извлечеме палетата од слика со филтрирање на боите по осветленост и контраст, со зачувување само на меките пастелни нијанси.
Ѕидот
• Примена на нови слики: Откако палетата е извлечена, може да се примени на било која слика, давајќи му карактеристичен изглед кој потсетува на делата на Андерсон, со светли, но хармонични бои.
Ѕидот

Сега што можеме да извлечеме палети од референци, време е за некои експерименти!

Бидејќи користиме палети ограничени во бројот на бои и ја извршуваме нашата апликација во прелистувачот (што значи користење на ограничени пресметковни ресурси), не треба да очекуваме извонредни резултати.

Еве примери на обработени слики во двете RGB и LAB режими.

Извлекување и примена на палети е клучен аспект на создавање на визуелни стилови, како што е стилот "Матрицата", стилот на Вес Андерсон или Денис Вилњев. Нашата апликација обезбедува визуелна алатка за работа со бои која им овозможува на корисниците да извлечат палети, да ги применат и да креираат уникатни визуелни ефекти.

Во финалниот дел, ќе се фокусираме на фино прилагодување и оптимизирање на боите.