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

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

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

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

The RGB Модел

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

RGB Клучни карактеристики:

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

Метод на работа

Моделот LAB ја претставува бојата во три канали: L (светлина), A (црвен спектар од зелено до црвено) и B (црвен спектар од сино до жолто).

Кључни карактеристики на ЛАБ:

• Каналот L ја контролира светлината, овозможувајќи прилагодување на светлината без промена на бојата.

• Каналите A и B ги опишуваат нијансите на боите, овозможувајќи попрецизна контрола над широк спектар на бои.

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

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

Алгоритам за пресметување на боите и користење на LAB

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

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

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

Како ова функционира во пракса:

• LAB Mode: Лабораторискиот боен простор е дизајниран да се усогласи со човечкото видување, раздвојувајќи ја светлината (L) од хроматските компоненти (A и B). Кога се совпаѓаат боите во LAB, алгоритамот гарантира дека боите се споредуваат на перцептивно точен начин, што значи дека приоритизира како ги перципираме разликите во боите, а не само математичката RGB разлика.

• RGB Mode: РГБ бојниот простор едноставно ја претставува бојата со интензитетот на црвената, зелената, сината и сината светлина.

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

  
  

  

  Оптимизација предизвик: LAB Computation

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

  
  

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

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

  Извлекување на палета и апликација

  Палет екстракција е процес на идентификување на најкарактеристични и жива боја од слика, која потоа може да се користи за да се создаде филтри или визуелни стилови. Ние екстракција на првите 10 бои (обезбедување на разновидност) со користење на алгоритам кој ги зема предвид и <силна> фреквенција на појава на боја и нејзината <силна> осветлување, обезбедување дека палетата не вклучува бои кои се премногу слични едни на други.

  
  

  Основниот механизам за извлекување на палетата е како што следува:

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

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

  
  

  

  
  

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

  Корисни палети

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

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

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

  
  

  

  Неутрализирање на боите со палети на бои

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

  
  

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

  Палети во филмот „Матрицата“

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

  
  

  Основни бои: зелена, црна, метална.

  Апликација за палета:

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

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

  • Применување на нови слики: Кога ќе ја примени

    

    Палети во делата на Вес Андерсон

    Вес Андерсон е познат по своите живописни, шарени и симетрични визуелни решенија. Неговите дела, како „Големиот хотел Будимпешта“, „Кралството на Месечината“, и „Францускиот диспат“, сите имаат свој стил на потпишување, кој содржи богати пастелни бои и внимателно избрани палети. Еден клучен елемент на неговите филмови е хармонијата и контрастот во дизајнот на боите.

    
    

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

    Апликација за палета:

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

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

    Применување на нови слики

    : По извлеку

    

    
    

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

    
    

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

    
    

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

    
    

    

    
    

    

    
    

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

    
    

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