Bu Basit Uygulama Hollywood'un Duygularınızla Nasıl Karıştığını Görmenizi Sağlar

Şöyle

Joker neden bu kadar rahatsız edici bir şekilde yeşil ve sarı hissediyor?

Şöyle

Why does Joker feel so unsettlingly green and yellow?

Şöyle

Blade Runner neden teal ve portakal ile ıslatılır?

Şöyle

Why is Blade Runner soaked in teal and orange?

Şöyle

Film neden cildin yumuşak ve sıcak görünmesini sağlar?

Şöyle

Why does film make skin look soft and warm?

Bu bir sihir değil, renktir.

Ve kim renk kontrol eder – çerçeve duygusal ağırlığını kontrol eder. Renk derecelendirme sinemanın görsel dilidir – bir atmosferi şekillendirmek, izleyicinin dikkatini yönlendirmek ve bir hikayenin tonunu ayarlamak için bir yoldur. Bu ince ve neredeyse görünmez olabilir. Ya da Wong Kar-Wai, Fincher, Nolan veya Villeneuve'nin çalışmalarında olduğu gibi cesur ve stilize edilmiştir. Ama bu dili akıcı bir şekilde konuşmak için, öncelikle dilbilgisini anlamak gerekir.

Renk çalışması nereden başlar? “doğru” rengi nereden biliriz? ve yaratıcı niyetini teknik eyleme nasıl çeviriyorsunuz?

Spoiler: LUT veya filtrelerle başlamaz.Renk hedefleri, kalibrasyon ve dikkatle seçilmiş paletlerle başlar.ve .

Bu seride şunları keşfedeceğiz:

Şöyle
• en temel düzeyde hangi renk sınıflandırması;
Şöyle
• neden paletinizi kısıtlamak bir özellik, bir hata değil;
Şöyle
• Renk grafikleri nasıl çalışır (ve neden önemlidir);
Şöyle
• ve tarayıcıda kendi derecelendirme aracınızı nasıl oluşturursunuz - React ve bazı basit matematiklerle.
Şöyle

Bunu sadece anlatmayacağız, göstereceğiz.Ve deneyimleyebileceksiniz, tinker ve belki de ilk kez gerçektenseeHangi renklerden yapılmıştır.

What is Color Grading, and Why Start with Color Targets?

Renk sınıflandırması, bir görüntüyi belirli bir görsel ton, duygusal etki veya teknik standart elde etmek için ayarlamak ve stilize etme sürecidir. film, fotoğrafçılık veya dijital üretimde olsun, sınıflandırma genellikle şunları içerir:

Şöyle
• Beyaz nokta ve ekspozisyon dengesi;
Şöyle
• Teknik renk değişikliklerinin düzeltilmesi;
Şöyle
• Kontrast, tonlar ve renk eğilimleri ile görsel bir stil yaratmak.
Şöyle

Ama derecelendirme sadece “iyi hale getirmek”le ilgili değildir. – Mood, izleyicinin odaklanma, tüm anlatının görsel dilinin kontrolü ile ilgili.

Herhangi bir yaratıcı görünüm uygulamadan önce, resmini birneutral stateBu demektir ki:

Şöyle
• İstenmeyen renk düzeltmeleri ( renk düzeltmeleri )
Şöyle
• Standart bir renk aralığına (Rec.709 veya sRGB gibi) görüntü normalleştirme;
Şöyle
• Farklı kameraların materyallerini tutarlı bir başlangıç çizgisine dönüştürün.
Şöyle

Bunun için renkler kullanılır.color targetsTıpkı *Renklivekromozom,** veya diğer referans haritaları.

Bir renk hedefi, bir renk patch grafikidirDoğru ölçülen değerlerBu değerler istisnai değildir – X-Rite veya X-Rite gibi profesyonel ekipmanlar kullanılarak kontrol edilen ortamlarda spektroskopik ölçümlerle elde edilir.Konica Minolta Spektrofotometre.

İlk yaygın olarak kabul edilen hedeflerden biri deKodak Gray Ölçeği— nötr gri tonların bir çizgi, maruz kalma kontrolü için kullanılır. Daha sonra tam renkli patchlerle daha gelişmiş grafikler geldi - örneğinMacbeth ColorChecker1976 yılında kurulmuştur (Şimdi adıylaX-Rite ColorCheckerGerçek dünyadaki ortak renkleri temsil etmek için tasarlanmış 24 renk çubuğu vardır: insan derisi, mavi gökyüzü, yeşil yaprak ve daha fazlası.

Dijital fotoğrafçılık ve dijital sinema gelişiyle birlikte, renk hedefleri daha da kritik hale geldi. Onlar artık sadece kameralar değil, aynı zamanda monitörler, yazıcılar, tarayıcılar - ve renkleri ele alan herhangi bir cihazı kalibrasyon için gerekli araçlardır. renk eşleştirme, profilleme ve tarafsız dengeleme iş akışları - film üretiminden bilimsel görüntülemeye kadar.

Örneğin, X-Rite'in ColorChecker'ı alın. Her patch standart aydınlatma altında ölçülür (genellikleD65veyaD50) tarafından kaydedilen sonuçlar ileCIE XYZ coordinates- Cihaz bağımsız bir renk modeli. Bu koordinatlar daha sonraRGB valuesÇalışma renk alanına bağlı olarak (örneğinsRGBveRec.709ya daAdobeRGB) için

Bu nedenle, uygulamamızda kullandığımız RGB aralıkları tahmin değil - bunlar standartlaştırılmış, fiziksel olarak ölçülen düzeltmelerin hassas dijital temsilidir.

ColorChecker Classic'deki cilt tonu patch RGB'de [194, 150, 130] olarak tanımlanırsa, doğru koşullar altında bu şekilde görünmelidir.

The Catch: Color Charts Are Just the Beginning

Renk hedefleri kalibrasyon için gereklidir - ama hepsi bu.Bir başlangıçBunun hesabını yapmazlar:

Şöyle
• Renkler gölgelerde veya aydınlatmalarda nasıl davranır?
Şöyle
• film stoklarının veya lenslerin benzersiz özellikleri;
Şöyle
• Belirli bir bakışın arkasındaki yaratıcı niyet.
Şöyle

Profesyonel araçlar gibiDaVinci ÇözümleriveyaDehancer, renk grafikleri uzun bir boru hattında sadece bir adımdır. Oradan, film emülasyon, ton haritası, tahıl, halasyon, çiçeklenme ve diğer stilistik dönüşümler gibi gelişmiş süreçlere geçiyorsunuz.a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

Bir palet seçimin bir görüntüye nasıl etki ettiğini göstermek için,CinePalette- Renk alanınızı kısıtladığınızda neler olup bittiğini görselleştiren basit bir web uygulaması (kullanıcı olarak bilinen bir süreç)Palet azaltma) için

What You Can Do with CinePalette:

Şöyle
• Herhangi bir görüntü yükleyin;
Şöyle
• bir palet seçin (ColorChecker, Portra, Sepia vb.);
Şöyle
• Her piksel, bu paletteki en yakın renge dönüştürülür.
Şöyle
• Önce ve sonra interaktif bir slider ile karşılaştırın;
Şöyle
• Sonuçları kaydetmek için;
Şöyle
• Ya da kendinize ait bir çerçeve oluşturun.
Şöyle

How It Works in Code

Uygulamamız tamamen kullanan tarayıcıda çalışırReactVe oCanvas APIProje - Adı SoyadıCinePalette— açık kaynaklı olacak ve GitHub'da kullanılabilir olacak (serinin sonunda bağlantı).

Önceden tanımlanmış paletlerin bir dizi ile başlayabiliriz, ancak kullanıcılar kendi paletleri oluşturabilir ve kaydedebilirler.Kodak Portra 400Palette şöyle görünüyor:

"Portra 400": [
  [75, 60, 50],     // shadows
  [160, 130, 110],  // skin tones
  [220, 200, 180],  // highlights
  [60, 100, 80],    // foliage
  [180, 150, 100]   // neutral
],

Seçilen palet, nihai görüntüde hangi renkleri “geçmesine izin verilir” tanımlar. Bunlar çerçeveyi görsel dil olarak tanımlar – ruh halini ve tarzını belirleyen temel tonlar.

Bir kullanıcı bir görüntü yükler ve bir palet seçerken, kapak altında neler olur:

Şöyle
1. Görüntü gizli bir <canvas>'e dönüştürülür - bu da verileri manipüle etmek için piksel düzeyinde erişim sağlar.
Şöyle
2. ImageData nesnesini, her pikselin dört değerle temsil edildiği bir array içerir: [R, G, B, A].
Şöyle
3. Her pikselin içine giriyoruz, RGB rengini çıkarıyoruz.
Şöyle
4. Her piksel için, RGB alanında Euclid mesafesini kullanarak seçilen paletten en yakın eşleşen renkleri bulur ve değiştiririz.
Şöyle

Bir Shirley kartı yükleyin ve farklı paletleri uygulayın - palet seçimi resmin nasıl şekillendiğini hemen göreceksiniz.

Sihirbazlığın temeli, analiz eden bir işlevseldir.each individual pixelVe onu bulurclosest matching colorSeçilen palet için:

const findClosestColor = (r, g, b) => {
  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;
};

Daha sonra, ImageData'da pikselin orijinal rengini paletteki en yakın eşleşmeyle değiştiririz.for every single pixelGörüntü içinde .

for (let i = 0; i < data.length; i += 4) {
  const [r, g, b] = [data[i], data[i + 1], data[i + 2]];
  const [nr, ng, nb] = findClosestColor(r, g, b);
  data[i] = nr;
  data[i + 1] = ng;
  data[i + 2] = nb;
}

Tüm piksellerin işlenmesinden sonra, sonucu <canvas>'a geri döndürüyoruz ve .toDataURL() kullanarak bir görüntüye dönüştürüyoruz.see the result instantly in the browser- ve filtrelenmiş görüntüyü tek bir tıklama ile indirin.

ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());

İşte biz kullanıyoruzEuclidean distance in RGB space- İki rengin ne kadar “yakın” olduğunu ölçmek için klasik bir yöntem:

const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);

Burada (r, g, b) mevcut pikselin rengidir ve (pr, pg, pb) paletdeki renklerden biridir.closest visual matchSeçilen palet içinde.

Bu yaklaşım sezgisel ve uygulanması kolaydır, ancak sınırlamaları vardır:RGB uzay, insanların aslında renk algılamalarını anlamıyorÖrneğin, yeşil ile mavi arasında daha duyarlıyız ve parlaklık farklılıkları yanıltıcı olabilir.

Biz bu yaklaşımı kullanıyoruzCinePaletteAncak, mevcut biçiminde bile, bazı renkleri beklenmedik veya “dışarı” hissettiren şekillerde değiştirildiğini fark edebilirsiniz.

Gelecekteki versiyonlarda, bir bağlantı eklemeyi planlıyoruzRGB and CIELABRenk aralıkları: Kullanıcıların farklı modellerin renk karşılaştırmanın doğruluğunu nasıl etkilediğini karşılaştırmalarını sağlar.

Why Does This Matter?

CinePalette, renk sınıflandırmasında temel ama temel bir adım sunar:palette restrictionHer görsel tarzın başladığı yer budur - soru:“What if we only used these colors?”.

Bir Portra paleti sıcak, nostaljik tonlar getirir. Pro 400 serin ve hafif hisseder. Teal & Orange yüksek kontrastlı sinema puçları sağlar. Dehancer veya Resolve gibi araçlardan farklı olarak, CinePalette film fiziklerini simüle etmez.Renk stil ve hikaye anlatımı için bir araçtır.

What’s Next?

Bu sadece bir başlangıçtır.Sonraki bölümlerde:

Şöyle
• CinePalette'i referans görüntüsünden bir palet seçme yeteneği ile genişleteceğiz;
Şöyle
• herhangi bir çerçeve veya fotoğrafta renk şemalarını otomatik olarak çıkarmak;
Şöyle
• Görsel olarak daha doğru bir uyum için RGB ve LAB arasında bir geçiş yapın;
Şöyle
• Renk uyumunun nasıl çalıştığını - ve gerçek dünyada sınıflandırmada nasıl kullanabileceğinizi ayırın.
Şöyle

Düzenli kalın - ve sadece renk öğrenmeye değil, gerçekten görmeye hazır olun.