یہ رنگ آلہ کسی بھی تصویر کو ویز اینڈرسن گرمی کے خواب میں تبدیل کرتا ہے

میںاس سلسلے کا پہلا حصہ، ہم نے رنگ کی اصلاح کے بنیادی اصولوں کا تجربہ کیا اور تصاویر کو ترمیم کرتے وقت رنگوں کے ساتھ کام کرنے کی اہمیت کی وضاحت کی.RGBاورLABرنگوں کا نظام، اور اس کے ساتھ ساتھextracting palettesتصاویر سے اور ان کا استعمال واحد بصری سٹائل بنانے کے لئے.

جیسا کہ ہم نے گزشتہ مضمون میں دیکھا ہے، کچھ رنگوں اور پائلٹوں کو ہم ابتدائی طور پر توقع سے مختلف طریقے سے دکھایا گیا تھا. یہ اس حقیقت کی وجہ سے ہے کہ ہم سب سے زیادہ سادہ آلات کا استعمال کرتے ہیں - RGB ماڈل اور Euclidean فاصلے کا حساب.

سب سے پہلے، تھوڑا سا نظریہ.

The RGB Model

دو سب سے زیادہ مقبول رنگ کے ماڈل -RGBاورLAB- بنیادی طور پر مختلف ہیں کہ وہ رنگوں کی نمائندگی اور پروسیسنگ کیسے کرتے ہیں.

کےRGBماڈل استعمال کرتا ہےRed،GreenاورBlue 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:

کے
• یہ ایک اضافی عمل کا استعمال کرتا ہے جہاں رنگوں کو سرخ، سبز اور نیلے روشنی کا مجموعہ کرتے ہوئے پیدا کیا جاتا ہے.
کے
• یہ پیکسل کی سطح پر سمجھنے اور پروسیسنگ کرنے کے لئے آسان ہے.
کے
• یہ تمام رنگوں کو درست طریقے سے نمائندگی کرنے کی صلاحیت میں محدود ہے، کیونکہ یہ رنگوں کی انسانی پہچان کی وضاحت نہیں کرتا.
کے

The LAB Model

کےLABماڈل تین چینلز میں رنگ کی نمائندگی کرتا ہے:L (lightness)،A (a color spectrum from green to red)اورB (a color spectrum from blue to yellow)یہ ماڈل یہ ہے کہ انسان رنگ کو کیسے دیکھتے ہیں اور ایک تصویر کے رنگ اور روشنی دونوں کا حساب کرتا ہے.

LAB Key Features:

کے

• The L channel controls the brightness, allowing lightness adjustments without changing the color.

کے
• A اور B چینلز رنگوں کے رنگوں کی وضاحت کرتے ہیں، جو ایک وسیع رینج رنگوں پر زیادہ درست کنٹرول کی اجازت دیتا ہے.
کے
• LAB ماڈل خاص طور پر پیشہ ورانہ رنگ کی درجہ بندی میں مفید ہے کیونکہ یہ زیادہ عام ہے اور دیگر تصاویر کے پیرامیٹرز کو متاثر کرنے کے بغیر درست رنگ کی ترتیبات کی اجازت دیتا ہے.
کے

لیب ماڈل میں، روشنیاں رنگ سے جدا ہوتی ہیں، جس سے تصویر کے بصری پیرامیٹرز کو اس کے رنگ کی توازن پر اثر انداز نہیں کیا جا سکتا.

Color Calculation Algorithm and Using LAB

To calculate and apply colors, our application utilizes the colorjs.ioلائبریری، جس میں LAB ماڈل میں رنگوں کے ساتھ مؤثر طریقے سے کام کرتا ہے. پروجیکٹ میں اس لائبریری کو منسلک کرنے کے لئے، ہم تصاویر کو پروسیسنگ کرتے وقت مطلوبہ نتائج کو حاصل کرنے میں مدد ملتی ہے کہ درست محاسبات کو انجام دینے کی اجازت دیتا ہے.

یہاں 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;
  }
};

اس کوڈ کے بکس کو ایک مخصوص پلے میں سب سے قریب رنگ کو تلاش کرنے کا طریقہ کار ہے، مقصد رنگ اور پلے میں رنگوں کے درمیان رنگ فاصلے کا حساب کرتے ہوئے.RGBیاLABکے

How This Works in Practice:

کے
• لیب موڈ: لیب رنگ کی جگہ انسانی بصیرت کے ساتھ مطابقت کرنے کے لئے ڈیزائن کی جاتی ہے، کرومیٹک اجزاء (A اور B) سے روشنی (L) کو جدا کرتی ہے.
کے
• RGB موڈ: RGB رنگ کی جگہ صرف سرخ، سبز، اور نیلے روشنی کی شدت سے رنگ کی نمائندگی کرتا ہے. اس موڈ میں، فاصلہ براہ راست رنگ کے معیار پر مبنی طور پر شمار کیا جاتا ہے، جس میں ذہنی درستگی کم ہوسکتی ہے، کیونکہ یہ انسانی رنگ کی پہچان کے تجاویز کا حساب نہیں کرتا.
کے

پیشہ ورانہ رنگ کی درجہ بندی اور تصویر کے پروسیسنگ میں، رنگوں کی مطابقت کی بنیاد پرLABیہ بہت فائدہ مند ہے کیونکہ یہ نمونہ کرتا ہے کہ انسانی آنکھ رنگوں کو کیسے دیکھتی ہے، جس سے زیادہ قدرتی اور بصری طور پر دلچسپ نتائج حاصل کرنے کی اجازت دیتا ہے. اس طریقہ کار کا استعمال کرتے ہوئے، ایپلی کیشن تصاویر پر رنگ پلے کو لاگو کرتے وقت بہتر مطابقت کو حاصل کرسکتے ہیں، جس سے چاہتے ہوئے سٹائل کے ساتھ رنگوں کو ملنے کے لئے آسان بناتا ہے.

Optimization Challenge: LAB Computation

کے ساتھ کام کرنے کے لئےLABرنگ ماڈل کے ساتھ کام کرنے کے مقابلے میں بہت زیادہ کمپیوٹرنگ وسائل کی ضرورت ہوتی ہےRGBیہ اس وجہ سے ہے کہ، LAB میں، ہر رنگ کو نہ صرف تین چینلز (RGB) کی طرف سے نمائندگی کیا جاتا ہے، بلکہ رنگ کے مرکبوں اور ان کے فاصلے کو حاصل کرنے کے لئے اضافی محاسبات بھی شامل ہیں.

اس عمل کو بہتر بنانے کے لئے، ہم نے پیش کیا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
  };
};

یہ بہتر طریقہ کار ایپلی کیشن کی کارکردگی کو تیز کرنے میں مدد ملتی ہے، خاص طور پر کئی اسی طرح کے تصاویر کو دوبارہ پروسیسنگ کرتے وقت.

Palette Extraction and Application

پیلاٹ نکالنے ایک تصویر سے سب سے زیادہ خصوصی اور زندہ رنگوں کی شناخت کا عمل ہے، جس کا بعد میں فلٹرز یا بصری سٹائل بنانے کے لئے استعمال کیا جا سکتا ہے.frequencyرنگ کی صورت حال اور اس کےluminance، اس بات کو یقینی بنائیں کہ پلے پالٹ میں وہ رنگ شامل نہیں ہوتے جو ایک دوسرے کے ساتھ بہت مختلف ہیں.

پائلٹ کو نکالنے کے لئے بنیادی میکانیزم یہ ہے کہ:

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

اس کوڈ کو ایک تصویر سے پلےٹ نکالنے کے لئے استعمال کیا جاتا ہے، جہاں رنگ روشنی اور فرق کی طرف سے فلٹر کیا جاتا ہے. اس میکانیزم کے ساتھ، آپ کو فوری طور پر مزید درخواست کے لئے سب سے زیادہ نمائندہ رنگوں کو جمع کر سکتے ہیں.

ہم نے غیر ضروری بٹنوں کے ساتھ صارف کے انٹرفیس کو گڑبڑ کرنے سے بچنے کے لئے نکالنے والے پلے کے لئے خود کار طریقے سے نام پیدا کرنے کا اضافہ کیا ہے.

Custom Palettes

ہمارے ایپلی کیشن میں آلے میں سے ایک اپنی مرضی کے ساتھ pallet creation بلاک ہے.This feature allows users to create pallets suitable for various projects, providing full control over colors.

The process starts with selecting a color through the HexColorPickerصارف تصویر سے یا ایک بیرونی ذریعہ سے ایک رنگ منتخب کر سکتا ہے. ہر منتخب رنگ صارف کے رنگ کی فہرست میں خود کار طریقے سے شامل کیا جاتا ہے، جس سے ایک پلاٹ پیدا ہوتا ہے.

چند رنگوں کو منتخب کرنے کے بعد، پلاسٹ کو اپنی مرضی کے نام کے ساتھ محفوظ کیا جا سکتا ہے. بعد میں، یہ ایک مخصوص بصری سٹائل حاصل کرنے کے لئے اپ لوڈ کردہ تصویر پر لاگو کیا جا سکتا ہے.

Color Neutralization with Color Palettes

Color neutralizationایک اہم پہلو ہےcolor gradingاس میں اہم کردار ادا کرتا ہےfilm post-productionیہ وہ عمل ہے جس میں انفرادی منظر یا تصاویر، مختلف روشنی کے حالات کے تحت لیا جا سکتا ہے، ایک مشترکہ رنگ ٹون میں لے جا سکتا ہے. یہ عام طور پر فلم کے دوران ایک واحد بصری سٹائل کو یقینی بنانے کے لئے کیا جاتا ہے اور تصاویر کو بصری طور پر مطابقت رکھتا ہے.

ہم فلمی بصری زبان کے دو مشہور مثالوں کے ذریعے پلےٹس کو کس طرح لاگو کیا جاتا ہے کا تجربہ کریں.

Palettes in the Movie “The Matrix”

فلم“The Matrix”(1999)، Wachowski بھائیوں کی طرف سے ڈیزائن کیا گیا، اس کی منفرد بصری سٹائل کی وجہ سے مشہور ہوا، جس میں ایک مخصوص سبز رنگ پلے شامل ہے. یہ رنگ سٹائل ڈیزائن کیا گیا تھا جس میں ڈیجیٹل حقیقت جس میں اہم کردار موجود ہیں.

Main Colorsسبز، سیاہ، دھاتی

Palette Application:

کے
• سبز ٹونز نکالنے: ایک مٹریکس سٹائل پلے کا تخلیق کرنے کے لئے، ہم تصاویر سے تمام سبز، سیاہ اور گرے رنگوں کو نکال سکتے ہیں. ان ٹونز کو استعمال کرتے ہوئے، ہم فلم کی "ڈیجیٹل حقیقت" اثر کی خصوصیات کو حاصل کرسکتے ہیں.
کے
• نئے تصاویر کے لئے لاگو: جب ہم اس پلے پالٹ کو لاگو کرتے ہیں تو، تصاویر کے رنگ بدل جائیں گے، پےکسل کو پلے پالٹ سے منتخب کردہ رنگوں کے قریب ترین رنگوں کے ساتھ تبدیل کریں گے، اس طرح مطلوبہ "کوڈ" سٹائل بنائیں.
کے

Palettes in Wes Anderson’s Works

Wes Andersonاس کی روشن، رنگارنگ، اور متبادل بصری حل کے لئے جانا جاتا ہے.“The Grand Budapest Hotel”,کے“Moonrise Kingdom”,اور“The French Dispatch”,ہر ایک کے اپنے دستخط سٹائل ہے، جس میں امیر پیسٹل رنگوں اور احتیاط سے منتخب شدہ پلے ٹکڑے ہیں. ان کی فلموں کا ایک اہم عنصر رنگ ڈیزائن میں ہارمون اور تنازع ہے.

Main Colors: پیسٹل رنگوں، روشن متضاد رنگوں، سرخ، زرد، ترکیب، سبز.

Palette Application:

کے
• Pastel Shades نکالنے: Wes Anderson کی فلموں میں، پیسٹل رنگوں کو اکثر استعمال کیا جاتا ہے. مثال کے طور پر، روشنی کے بالغ، نیلے، اور نوری رنگ. ہم ان رنگوں کو نکال سکتے ہیں اور ان کو ایک نیا تصویر پر لاگو کرنے کے لئے ایک اثر پیدا کرنے کے لئے vintage تصویر کی طرح یا ایک سٹائل شدہ ماحول پر توجہ مرکوز کرنے کے لئے. ہماری اپلی کیشن میں، ہم صرف نرم پیسٹل رنگوں کو برقرار رکھنے کے لۓ روشنی اور تنازعہ کی طرف سے رنگوں کو فلٹرنگ کی طرف سے تصویر سے پلےٹ نکال سکتے ہیں.
کے
• نئے تصاویر کے لئے لاگو: پلے پالٹ نکالنے کے بعد، یہ کسی بھی تصویر پر لاگو کیا جا سکتا ہے، اس کی خصوصیات کو ایڈسن کے کاموں کی یاد دہانی کرتا ہے، روشنی میں لیکن ہیرو رنگوں کے ساتھ.
کے

اب کہ ہم حوالہ جات سے پلاسٹ نکال سکتے ہیں، کچھ تجربات کے لئے وقت ہے!

کیونکہ ہم رنگوں کی تعداد میں محدود پلے کا استعمال کرتے ہیں اور براؤزر میں ہمارے ایپلی کیشن کو چلانے کے لئے ہیں (جو محدود کمپیوٹر وسائل کا استعمال کرتے ہیں) ہم غیر معمولی نتائج کی توقع نہیں کرنا چاہئے.

یہاں RGB اور LAB موڈ دونوں میں پروسیسنگ شدہ تصاویر کے مثالیں ہیں.

پلاٹس کو نکالنے اور لاگو کرنے کا ایک اہم پہلو بصری سٹائلوں کی تخلیق کے طور پر ہے، جیسے "مٹریکس" سٹائل، Wes Anderson کی، یا Denis Villeneuve کی. ہماری اپلی کیشن رنگوں کے ساتھ کام کرنے کے لئے ایک بصری آلے فراہم کرتا ہے جو صارفین کو پلاٹس نکالنے، ان کو لاگو کرنے اور منفرد بصری اثرات پیدا کرنے کی اجازت دیتا ہے. اس کے ساتھ، آپ آسانی سے تصاویر کو سٹائل کرسکتے ہیں اور مقبول فلموں میں دیکھے جانے والی بصری نظر پیدا کرسکتے ہیں.

آخر میں، ہم رنگوں کو بہتر بنانے اور بہتر بنانے پر توجہ مرکوز کریں گے.