Bu Renk Aracı Herhangi Bir Görüntüyi Wes Anderson Fırtına Rüyasına Dönüyor

içindeBu serinin ilk bölümü, renk düzeltmenin temel ilkelerini keşfettik ve resim düzenlerken renklerle çalışmanın önemini anlattık.RGBveLABRenk modelleri ve aynı zamandaextracting palettesgörüntülerden ve onları benzersiz görsel stiller oluşturmak için kullanın.

Önceki makalede gördüğümüz gibi, bazı renkler ve paletler başlangıçta beklediğimizden farklı görüntülendi. Bu, en basit araçları – RGB modeli ve Euclidean mesafe hesaplaması – kullandığımız gerçeğinden kaynaklanıyor.

Ama önce biraz teori.

The RGB Model

En popüler renk modelleri -RGBveLAB- Renkleri nasıl temsil ettikleri ve işlediği konusunda temel olarak farklıdırlar.

veRGBmodel kullanırRedveGreenveBlueRenkleri temsil etmek için kanallar. Her kanal 0 ila 255 arasında değerlere sahip olabilir, bu sayede 16 milyondan fazla renk elde edilebilir. Bu model, bilgisayar monitörleri, televizyonlar ve akıllı telefonlar bu modeli kullanırken, ekranlarda görüntülenen görüntülerle çalışmak için idealdir.

RGB Key Features:

Şöyle
• Kırmızı, yeşil ve mavi ışık kombinasyonuyla renklerin oluşturulduğu bir additif süreç kullanır.
Şöyle
• Piksel düzeyinde anlamak ve işlemek daha kolaydır.
Şöyle
• Tüm renkleri doğru bir şekilde temsil etme yeteneğinde sınırlıdır, çünkü insan rengi algısını ifade etmez.
Şöyle

The LAB Model

veLABmodel üç kanalda renk temsil eder:L (lightness)veA (a color spectrum from green to red)veB (a color spectrum from blue to yellow)Bu model, insanların renk algılamasına daha yakındır ve hem bir görüntü rengi hem de parlaklığına bağlıdır.

LAB Key Features:

Şöyle
• L kanalı parlaklığı kontrol eder, renk değiştirmeden parlaklık ayarlarını sağlar.
Şöyle
• A ve B kanalları renk tonlarını tanımlar, geniş bir renk spektrumunda daha hassas bir kontrol sağlar.
Şöyle
• LAB modeli, profesyonel renk sınıflandırmasında özellikle faydalıdır, çünkü daha çok yönlü ve diğer görüntü parametrelerini etkilemeden doğru renk ayarlarını sağlar.
Şöyle

LAB modelinde, parlaklık renkten ayrılır, böylece görüntülerin görsel parametrelerini renk dengesini etkilemeden ayarlanabilir.

Color Calculation Algorithm and Using LAB

Renkleri hesaplamak ve uygulamak için, uygulamamızcolorjs.ioBu kütüphaneyi projeye entegre ederek, görüntüleri işlerken istenen sonuçları elde etmenize yardımcı olan hassas hesaplamalar yapabiliriz.

İşte LAB modelinde renklerle çalışmak için uygulamamızda kullanılan kodun bir örneği:

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

Bu kod bloku, belirli bir palette en yakın renk bulma sürecini, hedef renk ve paletteki renkler arasındaki renk mesafesini hesaplayarak yönetir.RGBveyaLABve .

How This Works in Practice:

Şöyle
• LAB Modu: LAB renk alanı, insan görme ile uyum sağlamak için tasarlanmıştır, parlaklığı (L) kromatik bileşenlerden (A ve B) ayırır.
Şöyle
• RGB Modu: RGB renk alanı sadece kırmızı, yeşil ve mavi ışığın yoğunluğunu temsil eder.Bu modda, mesafe doğrudan renk değerlerine göre hesaplanır, bu da insan renk algısının nüanslarını dikkate almadığı için daha az algısel doğruluğa yol açabilir.
Şöyle

Profesyonel renk derecelendirmesi ve görüntü işleme, renk uyumlu temelindeLABİnsan gözünün renkleri nasıl algıladığını taklit eder, daha doğal ve görsel olarak çekici sonuçlar sağlar.Bu yöntemi kullanarak, uygulama resimlere renk paletlerini uyguladığında daha iyi bir tutarlılık elde edebilir, istediğiniz tarzlara renklerin eşleşmesini kolaylaştırır.

Optimization Challenge: LAB Computation

ile birlikte çalışmakLABRenk modeli, çalışmaktan çok daha fazla hesaplama kaynakları gerektirirRGBBunun nedeni, LAB'de, her renk sadece üç kanal (RGB) tarafından temsil edilmez, aynı zamanda renk koordinatlarını ve mesafelerini elde etmek için ek hesaplamalar içerir.

Bu süreci optimize etmek için,palette cachingÜcretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz ÜcretsizLABModlar hafızada depolanır ve görüntü değişmemişse, sistem paleti yeniden hesaplamaz.Bu, özellikle paletleri birden fazla görüntüye uygulandığında, maliyetli hesaplamaları tekrar yapmak zorunda kalmadan, önceden hesaplanan verileri yeniden kullanarak, süreci önemli ölçüde hızlandırmaya yardımcı olur.

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

Bu gelişme, uygulamanın performansını hızlandırmaya yardımcı olur, özellikle aynı görüntüleri tekrar tekrar işlerken.

Palette Extraction and Application

Palet çıkarma, bir görüntüden en karakteristik ve canlı renkleri tanımlama sürecidir, bu da filtreler veya görsel stiller oluşturmak için kullanılabilir.frequencyRenklerin oluşumu veluminancePaletlerin birbirlerine çok benzeyen renkler içermemesi,

Palet ekstraksiyonunun ana mekanizması aşağıdaki gibidir:

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

Bu kod, renklerin parlaklık ve farkla filtrelendiği bir görüntüden bir palet çıkarmak için kullanılır.Bu mekanizma ile, daha fazla uygulama için en temsilci renkleri hızlı bir şekilde toplayabilirsiniz.

Kullanıcı arayüzünü gereksiz düğmelerle karıştırmamak için çıkarılan paletler için otomatik isim üretimi ekledik.

Custom Palettes

Uygulamamızdaki araçlardan biri, özelleştirilmiş palet oluşturma blokudur.Bu özellik, kullanıcıların çeşitli projeler için uygun paletleri oluşturmalarını sağlar, renkler üzerinde tam kontrol sağlar.

Bu işlem, bir renk seçerek başlar.HexColorPickerKullanıcı, görüntüden veya dış kaynaktan bir renk seçebilir.Her seçilen renk otomatik olarak bir palet oluşturulan kullanıcı rengi listesine eklenir.

Birkaç renk seçildikten sonra, palet özel bir isimle kaydedilebilir.

Color Neutralization with Color Palettes

Color neutralizationÖnemli bir yönü decolor gradingeleştirel bir rol oynamaktadırfilm post-productionFarklı aydınlatma koşulları altında çekilen bireysel sahneler veya fotoğraflar, genellikle film boyunca tek bir görsel tarzı sağlamak ve sahnelerin, çekim koşullarına bakılmaksızın görsel olarak tutarlı hale getirmek için ortak bir renk tonuna getirilebileceği süreçtir.

Paletlerin sinematik görsel dilin iki ikonik örneğiyle nasıl uygulandığını keşfetelim.

Palettes in the Movie “The Matrix”

filmin“The Matrix”(1999), Wachowski kardeşler tarafından yönetilen, benzersiz görsel tarzı, belirli bir yeşil renk paleti içerir. Bu renk tarzı ana karakterlerin var olduğu dijital gerçekliği görselleştirmek için tasarlanmıştır.

Main ColorsYeşil, Siyah ve Metal

Palette Application:

Şöyle
• Yeşil tonları çıkarmak: Matrix tarzı bir palet oluşturmak için, resimden yeşil, siyah ve gri tüm tonları çıkarabiliriz. Bu tonları uygulayarak, filmin karakteristik “dijital gerçeklik” etkisini elde edebiliriz.
Şöyle
• Yeni Görüntüler için Uygulama: Bu paleti uyguladığımızda, görüntü renkleri değişir, tüm piksellerin paletteki seçilen renklere en yakın olanlarla değiştirilir, böylece istenen "kodlanmış" stili oluşturur.
Şöyle

Palettes in Wes Anderson’s Works

Wes AndersonRenkli, renkli ve simetrik görsel çözümleri ile bilinir.“The Grand Budapest Hotel”,Şöyle“Moonrise Kingdom”,ve“The French Dispatch”,Hepsi zengin pastel renkleri ve dikkatle seçilmiş paletleri içeren imza tarzına sahiptir. filmlerinin bir anahtarı renk tasarımında uyum ve kontrasttır.

Main Colors: Pastel tonları, parlak kontrast renkleri, kırmızı, sarı, turkuaz, yeşil.

Palette Application:

Şöyle
• Pastel tonları çıkarmak: Wes Anderson'ın filmlerinde, pastel renkler sıklıkla kullanılır. Örneğin, hafif pembe, mavi ve portakal tonları. Bu renkleri çıkarabilir ve vintage fotoğrafçılığına benzeyen bir etki yaratmak veya stilize edilmiş bir atmosferi vurgulamak için yeni bir görüntüye uygulayabiliriz. Uygulamamızda, sadece yumuşak pastel tonları koruyarak renklerin parlaklığı ve kontrastla filtrelenerek bir görüntüden paleti çıkarabiliriz.
Şöyle
• Yeni Görüntüler için Uygulama: Palet çıkarıldıktan sonra, herhangi bir görüntüye uygulanabilir, Anderson'un eserlerini hatırlatan karakteristik bir görünüm sağlar, parlak ama uyumlu renklerle.
Şöyle

Şimdi referanslardan paletleri çıkarabileceğimize göre, bazı deneyler için zamanı geldi!

Renk sayısında sınırlı paletler kullanıyoruz ve uygulamanızı tarayıcıda çalıştırıyoruz (bu sınırlı hesaplama kaynaklarını kullanmak anlamına gelir), olağanüstü sonuçlar beklememeliyiz.

İşte RGB ve LAB modlarında işlenen görüntülerin örnekleri.

Paletlerin çıkarılması ve uygulanması, “Matrix” tarzı, Wes Anderson veya Denis Villeneuve tarzı gibi görsel stiller oluşturmanın önemli bir yönüdür. uygulamamız, kullanıcıların paletleri çıkarmalarını, uygulamalarını ve benzersiz görsel efektler oluşturmalarını sağlayan renklerle çalışmak için görsel bir araç sağlar.

Son bölümde, renk ayarlaması ve optimizasyonu üzerinde duracağız.