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

Dalam bagian pertama siri ini, kami meneroka prinsip-prinsip asas koreksi warna dan menjelaskan pentingnya bekerja dengan warna apabila mengedit imej. Dalam bahagian kedua ini, kami menyelam ke dalam konsep-konsep yang lebih maju, seperti perbezaan antara model warna RGB dan LAB, serta proses mengekstrak palet daripada 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.

Tetapi terlebih dahulu sedikit teori.

Model RGB

Dua model warna yang paling popular - RGB dan LAB - sangat berbeza dalam cara mereka mewakili dan memproses warna.

Model RGB menggunakan saluran Red, Green dan Blue untuk mewakili warna. Setiap saluran boleh mempunyai nilai dari 0 hingga 255, menghasilkan lebih daripada 16 juta warna yang mungkin.Model ini sesuai untuk bekerja dengan imej yang dipaparkan pada skrin, kerana monitor komputer, TV, dan telefon pintar semua menggunakan model ini.

RGB Ciri-ciri utama:

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

Perkh Perniagaan

Model LAB mewakili warna dalam tiga saluran: L (cahaya), A (spektrum warna dari hijau ke merah), dan B (spektrum warna dari biru ke kuning).

LAB Ciri-ciri utama:

• Kanal L mengawal kecerahan, membolehkan penyesuaian kecerahan tanpa mengubah warna.

• Kanal A dan B menggambarkan warna warna, membolehkan kawalan yang lebih tepat pada spektrum warna yang luas.

• Model LAB sangat berguna dalam penilaian warna profesional kerana ia lebih serbaguna dan membolehkan penyesuaian warna yang tepat tanpa mempengaruhi parameter imej lain.

  
  

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

Algorithm Pengiraan Warna dan Menggunakan LAB

Untuk mengira dan memohon warna, aplikasi kami menggunakan perpustakaan colorjs.io, yang berfungsi dengan cekap dengan warna dalam model LAB.

Inilah 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.

Bagaimana ini berfungsi dalam amalan:

• LAB Mode: Ruang warna LAB direka untuk diselaraskan 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 cara kita menganggap perbezaan warna, bukan hanya perbezaan RGB matematik.

• RGB Mode: Ruang warna RGB hanya mewakili warna oleh intensiti cahaya merah, hijau, dan biru.

  Dalam penilaian warna profesional dan pemprosesan imej, penyesuaian warna berdasarkan LAB adalah sangat menguntungkan kerana ia meniru bagaimana mata manusia melihat warna, membolehkan hasil yang lebih semulajadi dan menarik secara visual.

  
  

  

  Tantangan Optimisasi: LAB Computation

  Bekerja dengan model warna LAB memerlukan sumber pengiraan yang lebih besar daripada bekerja dengan RGB. Ini kerana, dalam LAB, setiap warna diwakili bukan sahaja oleh tiga saluran (RGB), tetapi juga melibatkan perhitungan tambahan untuk mendapatkan koordinat warna dan jarak mereka.

  
  

  Untuk mengoptimumkan proses ini, kami memperkenalkan palette caching untuk mengelakkan pengiraan berlebihan. palet yang dicipta dalam mod LAB disimpan dalam memori, dan jika imej tidak berubah, sistem tidak akan mengira semula palet.

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

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

  Pengambilan Palet dan Permohonan

  Palet ekstraksi adalah proses mengenal pasti warna yang paling khas dan bersinar dari imej, yang kemudian boleh digunakan untuk mencipta penapis atau gaya visual. kami mengekstrak 10 warna teratas (menjamin kepelbagaian) menggunakan algoritma yang mengambil kira kedua-dua frekuensi kejadian warna dan luminansi, 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.

  Penyakit khas

  Salah satu alat dalam aplikasi kami ialah 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 melalui antara muka HexColorPicker Pengguna boleh memilih warna daripada imej atau sumber luaran.

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

  
  

  

  Netralisasi Warna dengan Palet Warna

  Neutralisasi Warna dengan Palet Warna

  Netralisasi warna adalah aspek penting dalam penilaian warna dan memainkan peranan penting dalam pengeluaran selepas filem.Ia adalah proses di mana adegan individu atau tembakan, yang diambil di bawah keadaan pencahayaan yang berbeza, boleh dibawa kepada nada warna yang sama.

  
  

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

  Paling dalam filem “The Matrix”

  Filem 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 utama wujud.

  
  

  Warna utama: hijau, hitam, logam.

  Perkh Penggunaan:

  • Extracting Green Tones: Untuk mencipta palet gaya Matrix, kita boleh mengekstrak semua warna hijau, hitam, dan kelabu daripada imej. Dengan menerapkan nada ini, kita boleh mencapai kesan "realitas digital" ciri filem.

    Dalam aplikasi kami, ini boleh dilakukan dengan filtering oleh kecerahan dan jarak, mengekalkan hanya warna hijau dan mengabaikan yang lain.

  • Mengaplikasikan kepada Imej Baru: Apabila kita menerapkan palet ini, warna imej akan berubah, menggantikan semua piksel dengan yang terdekat dengan warna yang dipilih dari palet, dengan itu mewujudkan gaya "kod" yang di

    

    Palettes in Wes Anderson's Works

    Wes Anderson dikenali kerana penyelesaian visual yang hidup, berwarna-warni dan simetrik. Karya-karya beliau, seperti “The Grand Budapest Hotel”,“Moonrise Kingdom”, dan “The French Dispatch”, semua mempunyai gaya tanda tangan, yang mempunyai warna pastel yang kaya dan palet yang dipilih dengan teliti.

    
    

    Warna utama: Warna pastel, warna kontras yang cerah, merah, kuning, biru, hijau.

    Perkh Penggunaan:

    • Extracting Pastel Shades: Dalam filem-filem Wes Anderson, warna-warna pastel sering digunakan. Sebagai contoh, warna-warna merah jambu, biru dan oranye 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 mengfilter warna mengikut kecerahan dan kontras, menyimpan hanya warna-warna pastel lembut.

    • Mengaplikasikan kepada Imej Baru

      : Selepas palet itu diekstrak, ia boleh diterapkan kepada imej mana-mana, memberi ia penampilan khas yang

      

      
      

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

      
      

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

      
      

      Inilah 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.