içinde , renk düzeltmenin temel ilkelerini keşfettik ve resim düzenlerken renklerle çalışmanın önemini anlattık. ve Renk modelleri ve aynı zamanda görüntülerden ve onları benzersiz görsel stiller oluşturmak için kullanın. Bu serinin ilk bölümü RGB LAB extracting palettes Ö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. But first, a bit of theory. The RGB Model En popüler renk modelleri - ve - Renkleri nasıl temsil ettikleri ve işlediği konusunda temel olarak farklıdırlar. RGB LAB ve model kullanır ve ve Renkleri 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 Red Green Blue RGB Key Features: Şöyle Şöyle Şöyle Şöyle Kırmızı, yeşil ve mavi ışık kombinasyonuyla renklerin oluşturulduğu bir additif süreç kullanır. Piksel düzeyinde anlamak ve işlemek daha kolaydır. Tüm renkleri doğru bir şekilde temsil etme yeteneğinde sınırlıdır, çünkü insan rengi algısını ifade etmez. The LAB Model ve model üç kanalda renk temsil eder: ve ve 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 L (lightness) A (a color spectrum from green to red) B (a color spectrum from blue to yellow) LAB Key Features: Şöyle Şöyle Şöyle Şöyle L kanalı parlaklığı kontrol eder, renk değiştirmeden parlaklık ayarlarını sağlar. A ve B kanalları renk tonlarını tanımlar, geniş bir renk spektrumunda daha hassas bir kontrol sağlar. 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. In the LAB model, brightness is separated from color, making it possible to adjust the visual parameters of an image without impacting its color balance. This results in more accurate and natural color corrections. Color Calculation Algorithm and Using LAB Renkleri hesaplamak ve uygulamak için, uygulamamız Bu kütüphaneyi projeye entegre ederek, görüntüleri işlerken istenen sonuçları elde etmenize yardımcı olan hassas hesaplamalar yapabiliriz. colorjs.io İş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. veya ve . RGB LAB How This Works in Practice: Şöyle Şöyle Şö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. 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. Profesyonel renk derecelendirmesi ve görüntü işleme, renk uyumlu temelinde İ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. LAB Optimization Challenge: LAB Computation ile birlikte çalışmak Renk modeli, çalışmaktan çok daha fazla hesaplama kaynakları gerektirir Bunun 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. LAB RGB Bu süreci optimize etmek için, Ücretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz Ücretsiz Modlar 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. 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
  };
};
 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 Palette extraction is the process of identifying the most characteristic and vibrant colors from an image, which can then be used to create filters or visual styles. We extract the top-10 colors (ensuring diversity) using an algorithm that takes into account both the  Renklerin oluşumu ve Paletlerin birbirlerine çok benzeyen renkler içermemesi, frequency luminance 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. Kullanı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. HexColorPicker Birkaç renk seçildikten sonra, palet özel bir isimle kaydedilebilir. Color Neutralization with Color Palettes Renk paletleri ile renk nötralizasyonu Önemli bir yönü de eleştirel bir rol oynamaktadır Farklı 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. Color neutralization color grading film post-production Paletlerin sinematik görsel dilin iki ikonik örneğiyle nasıl uygulandığını keşfetelim. Palettes in the Movie “The Matrix” filmin (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. “The Matrix” Yeşil, Siyah ve Metal Main Colors Palette Application: Şöyle Şöyle Şö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. 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. Palettes in Wes Anderson’s Works Renkli, renkli ve simetrik görsel çözümleri ile bilinir. Şöyle ve 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. Wes Anderson “The Grand Budapest Hotel”, “Moonrise Kingdom”, “The French Dispatch”, : Pastel tonları, parlak kontrast renkleri, kırmızı, sarı, turkuaz, yeşil. Main Colors Palette Application: Şöyle Şöyle Şö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. 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. Ş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.

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

HackerNoon Kendi Ana Dilinizde 🆕 ‼️ Teknoloji Blog Yazıları için 77 Dil Ana Sayfası

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps