Alat warna ini mengubah apa-apa imej menjadi impian demam Wes Anderson

In Bahagian pertama siri ini, kami meneroka prinsip asas koreksi warna dan menjelaskan pentingnya bekerja dengan warna apabila mengedit imej.RGBdanLABwarna-warni, dan juga prosesextracting palettesdaripada imej dan menggunakannya untuk mewujudkan gaya visual yang unik.

Seperti yang kami lihat dalam artikel sebelumnya, beberapa warna dan palet dipaparkan berbeza daripada yang kami harapkan pada mulanya. Ini disebabkan oleh fakta bahawa kami menggunakan alat-alat yang paling mudah - model RGB dan pengiraan jarak Euclidean.

Pertama, sedikit teori

The RGB Model

Dua model warna yang paling popular -RGBdanLAB- berlainan secara mendasar dalam cara mereka mewakili dan memproses warna.

yangRGBModel ini menggunakanReddaripadaGreendanBlue channels to represent colors. Each channel can have values ranging from 0 to 255, resulting in over 16 million possible colors. This model is ideal for working with images displayed on screens, as computer monitors, TVs, and smartphones all use this model.

RGB Key Features:

Melayu
• Ia menggunakan proses additif di mana warna dicipta dengan menggabungkan cahaya merah, hijau dan biru.
Melayu
• Ia lebih mudah untuk memahami dan memproses pada tahap pixel.
Melayu
• Ia terhad dalam keupayaan untuk mewakili semua warna dengan tepat, kerana ia tidak mempertimbangkan persepsi manusia tentang warna.
Melayu

The LAB Model

yangLABmodel mewakili warna dalam tiga saluran:L (lightness)daripadaA (a color spectrum from green to red)danB (a color spectrum from blue to yellow)Model ini lebih dekat dengan bagaimana manusia menganggap warna dan bertanggungjawab untuk kedua-dua warna dan kecerahan imej.

LAB Key Features:

Melayu
• Kanal L mengawal kecerahan, membolehkan penyesuaian kecerahan tanpa mengubah warna.
Melayu
• A dan B saluran menggambarkan warna warna, membolehkan kawalan yang lebih tepat pada spektrum warna yang luas.
Melayu
• Model LAB sangat berguna dalam penilaian warna profesional kerana ia lebih serbaguna dan membolehkan penyesuaian warna yang tepat tanpa menjejaskan parameter imej lain.
Melayu

Dalam model LAB, kecerahan dipisahkan daripada warna, membolehkan untuk menyesuaikan parameter visual imej tanpa menjejaskan keseimbangan warna.

Color Calculation Algorithm and Using LAB

Untuk mengira dan memohon warna, aplikasi kami menggunakancolorjs.ioperpustakaan, yang berfungsi dengan cekap dengan warna dalam model LAB. Mengintegrasikan perpustakaan ini ke dalam projek membolehkan kita melakukan perhitungan yang tepat yang membantu mencapai hasil yang diingini apabila memproses imej.

Berikut ialah contoh kod yang digunakan dalam aplikasi kami untuk bekerja dengan warna dalam model 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;
  }
};

Blok kod ini menangani proses mencari warna terdekat dalam palet yang diberikan dengan mengira jarak warna antara warna sasaran dan warna dalam palet.RGBatauLABdaripada

How This Works in Practice:

Melayu
• Mod LAB: Ruang warna LAB direka untuk menyesuaikan dengan penglihatan manusia, memisahkan kecerahan (L) daripada komponen kromatik (A dan B). Apabila mencocokkan warna dalam LAB, algoritma memastikan bahawa warna dibandingkan dengan cara yang tepat secara persepsi, yang bermaksud ia memberi keutamaan kepada bagaimana kita mengiktiraf perbezaan warna, bukan hanya perbezaan RGB matematik.
Melayu
• Mod RGB: Ruang warna RGB hanya mewakili warna oleh intensiti cahaya merah, hijau dan biru. dalam mod ini, jarak dikira secara langsung berdasarkan nilai warna, yang boleh menyebabkan ketepatan persepsi yang kurang, kerana ia tidak mengambil kira nuansa persepsi warna manusia.
Melayu

Dalam penilaian warna profesional dan pemprosesan imej, warna yang sesuai berdasarkanLABadalah sangat menguntungkan kerana ia meniru bagaimana mata manusia melihat warna, membolehkan hasil yang lebih semulajadi dan menarik secara visual.Menggunakan kaedah ini, aplikasi boleh mencapai konsistensi yang lebih baik apabila memohon palet warna kepada imej, menjadikannya lebih mudah untuk mencocokkan warna dengan gaya yang dikehendaki.

Optimization Challenge: LAB Computation

Bekerja denganLABmodel warna memerlukan lebih banyak sumber pengiraan daripada bekerja denganRGBIni kerana, dalam LAB, setiap warna diwakili bukan sahaja oleh tiga saluran (RGB), tetapi juga melibatkan pengiraan tambahan untuk mendapatkan koordinat warna dan jarak mereka.

Untuk mengoptimumkan proses ini, kami telah memperkenalkanpalette cachinguntuk mengelakkan pengiraan berlebihan. palet yang dicipta dalamLABmode disimpan dalam memori, dan jika imej tidak berubah, sistem tidak akan mengira semula palet.Ini membantu untuk mempercepatkan proses, terutamanya apabila memohon palet kepada beberapa imej, dengan menggunakan semula data pra-komputer tanpa perlu melakukan pengiraan mahal lagi.

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

Penambahbaikan ini membantu mempercepatkan prestasi aplikasi, terutamanya apabila memproses beberapa imej yang serupa berulang kali.

Palette Extraction and Application

Ekstraksi palet ialah proses mengenal pasti warna-warna yang paling khas dan berkesan daripada imej, yang kemudian boleh digunakan untuk mewujudkan penapis atau gaya visual.frequencyWarna-warna yang berlaku dan merekaluminance, memastikan bahawa palet tidak termasuk warna yang terlalu serupa satu sama lain.

Mekanisme utama untuk mengekstrak palet adalah sebagai berikut:

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

Kod ini digunakan untuk mengekstrak palet daripada imej, di mana warna difilter oleh kecerahan dan perbezaan.

Kami menambah pengeluaran nama automatik untuk palet yang diekstrak untuk mengelakkan mengganggu antara muka pengguna dengan butang yang tidak perlu.

Custom Palettes

Salah satu alat dalam aplikasi kami adalah blok penciptaan palet tersuai. ciri ini membolehkan pengguna untuk mencipta palet yang sesuai untuk pelbagai projek, menyediakan kawalan penuh atas warna.

Proses ini bermula dengan memilih warna melaluiHexColorPickerPengguna boleh memilih warna daripada imej atau sumber luaran. Setiap warna yang dipilih secara automatik ditambah kepada senarai warna pengguna, dari mana palet dibuat.

Selepas memilih beberapa warna, palet boleh disimpan dengan nama tersuai.Selepas itu, ia boleh digunakan kepada imej yang dimuat naik untuk mencapai gaya visual tertentu.

Color Neutralization with Color Palettes

Color neutralizationAdalah aspek penting daripadacolor gradingmemainkan peranan penting dalamfilm post-productionIa adalah proses di mana adegan individu atau tembakan, diambil di bawah keadaan pencahayaan yang berbeza, boleh dibawa kepada nada warna yang sama.Ini biasanya dilakukan untuk memastikan gaya visual yang bersatu sepanjang filem dan untuk membuat adegan secara visual konsisten, terlepas daripada keadaan penembakan.

Mari kita meneroka bagaimana palet digunakan melalui dua contoh ikonik bahasa visual filem.

Palettes in the Movie “The Matrix”

Filem yang“The Matrix”(1999), diarahkan oleh saudara-saudara Wachowski, menjadi ikonik kerana gaya visual yang unik, yang termasuk palet warna hijau tertentu. gaya warna ini direka untuk memvisualisasikan realiti digital di mana watak-watak utama wujud.

Main Colors: Hijau, hitam dan logam

Palette Application:

Melayu
• Mengekstrak Tone Hijau: Untuk mencipta palet gaya Matrix, kita boleh mengekstrak semua warna hijau, hitam dan kelabu daripada imej. Dengan menggunakan nada ini, kita boleh mencapai kesan "realitas digital" ciri filem. Dalam aplikasi kami, ini boleh dilakukan dengan menapis mengikut kecerahan dan jarak, mengekalkan hanya warna hijau dan mengabaikan yang lain.
Melayu
• Menerapkan kepada Imej Baru: Apabila kami menerapkan palet ini, warna imej akan berubah, menggantikan semua piksel dengan yang terdekat dengan warna yang dipilih dari palet, dengan itu mewujudkan gaya yang dikehendaki "dikodkan".
Melayu

Palettes in Wes Anderson’s Works

Wes Andersonterkenal dengan penyelesaian visual yang cerah, berwarna-warni dan simetrik.“The Grand Budapest Hotel”,Melayu“Moonrise Kingdom”,dan“The French Dispatch”,Semua mempunyai gaya tanda tangannya, yang mempunyai warna pastel yang kaya dan palet yang dipilih dengan teliti.Salah satu elemen utama filem-filemnya ialah keharmonian dan kontras dalam reka bentuk warna.

Main Colors: Shades pastel, warna kontras terang, merah, kuning, turquoise, hijau.

Palette Application:

Melayu
• Mengekstrak Shades Pastel: Dalam filem Wes Anderson, warna pastel sering digunakan. Sebagai contoh, warna merah jambu, biru dan oranye yang ringan. Kami boleh mengekstrak warna-warna ini dan menerapkannya kepada imej baru untuk mewujudkan kesan yang menyerupai fotografi vintage atau untuk menekankan suasana yang stylized. Dalam aplikasi kami, kami boleh mengekstrak palet daripada imej dengan menapis warna mengikut kecerahan dan kontras, mengekalkan hanya warna pastel yang lembut.
Melayu
• Terapkan kepada Imej Baru: Selepas palet dikeluarkan, ia boleh digunakan pada mana-mana imej, memberi ia penampilan khas yang mengingatkan kerja Anderson, dengan warna yang cerah tetapi harmoni.
Melayu

Sekarang bahawa kita boleh mengekstrak palet daripada rujukan, ia adalah masa untuk beberapa eksperimen!

Oleh kerana kami menggunakan palet terhad dalam bilangan warna dan menjalankan aplikasi kami dalam pelayar (yang bermakna menggunakan sumber pengiraan terhad), kita tidak boleh mengharapkan hasil yang luar biasa.

Berikut ialah contoh imej yang diproses dalam kedua-dua mod RGB dan LAB.

Mengekstrak dan menerapkan palet adalah aspek penting dalam mewujudkan gaya visual, seperti gaya "Matrix", Wes Anderson, atau Denis Villeneuve. aplikasi kami menyediakan alat visual untuk bekerja dengan warna yang membolehkan pengguna untuk mengekstrak palet, menerapkannya, dan mewujudkan kesan visual yang unik.

Pada bahagian akhir, kami akan memberi tumpuan kepada penyesuaian halus dan pengoptimuman warna.