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

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

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

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

RGB ماڈل

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

RGB ماڈل رنگوں کی نمائندگی کرنے کے لئے Red، Green، اور Blue چینلز کا استعمال کرتا ہے. ہر چینل 0 سے 255 کے درمیان اقدار رکھ سکتا ہے، اس کے نتیجے میں 16 ملین سے زائد ممکنہ رنگ.

RGB اہم خصوصیات:

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

دوسرے ٹیبل

The LAB ماڈل تین چینلوں میں رنگ کی نمائندگی کرتا ہے: L (lightness)، A (جنگ سے سرخ تک کا رنگ سپیکٹرم)، اور B (جنگ سے زرد تک کا رنگ سپیکٹرم). This model is closer to how humans perceive color and accounts for both the color and the brightness of an image.

LAB اہم خصوصیات:

• The L چینل روشنی کو کنٹرول کرتا ہے، رنگ کو تبدیل کرنے کے بغیر روشنی کی ترتیبات کی اجازت دیتا ہے.

• The A اور B چینل رنگوں کو بیان کرتے ہیں، رنگوں کی ایک وسیع رینج پر زیادہ درست کنٹرول کی اجازت دیتا ہے.

• The LAB ماڈل خاص طور پر پیشہ ورانہ رنگ درجہ بندی میں مفید ہے کیونکہ یہ زیادہ متبادل ہے اور دیگر تصاویر کے پیرامیٹرز کو متاثر نہیں کرتے ہوئے درست رنگوں کی ترتیبات کی اجازت دیتا ہے.

  
  

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

رنگ کا حساب کرنے والا الگورتھم اور LAB کا استعمال

رنگوں کا حساب کرنے اور لاگو کرنے کے لئے، ہمارے ایپلی کیشن 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.

یہ کیسے کام کرتا ہے:

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

• RGB موڈ: RGB رنگ کی جگہ صرف سرخ، سبز، اور نیلے روشنی کی شدت سے رنگ کی نمائندگی کرتا ہے. اس مو

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

  
  

  

  پریمیمنگ چیلنج: LAB کمپیوٹنگ

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

  
  

  اس عمل کو بہتر بنانے کے لئے، ہم palette کیچنگ کو سے بچنے کے لئے متعارف کرایا ہے. LAB موڈ میں تخلیق کردہ pallets کو میموری میں ذخیرہ کیا جاتا ہے، اور اگر تصویر تبدیل نہیں ہوا ہے تو، نظام پائلٹ کو دوبارہ متعارف نہیں کرے گا.

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

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

  پلاٹ نکالنے اور ایپلی کیشن

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

  
  

  پلاٹ نکالنے کا بنیادی میکانیزم مندرجہ ذیل ہے:

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

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

  
  

  

  
  

  We added automatic name generation for extracted pallets to avoid cluttering the user interface with unnecessary buttons.

  مطابقات

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

  یہ عمل HexColorPicker انٹرفیس کے ذریعے ایک رنگ کا انتخاب کرتے ہوئے شروع ہوتا ہے. صارف تصویر یا بیرونی ذریعہ سے ایک رنگ منتخب کرسکتے ہیں.

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

  
  

  

  رنگوں کے پلے کے ساتھ رنگوں کی نائٹرانزیشن

  Color Neutralization with Color Palettes رنگ کے پلے کے ساتھ

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

  
  

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

  مزید فلم “The Matrix”

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

  
  

  مزید رنگیں: سبز، سیاہ، دھاتی.

  پلاسٹ ایپلی کیشن:

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

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

  • نئے تصاویر پر لاگو: جب ہم اس پلے کا استعمال کرتے ہیں تو تصویر کے رنگ بدل جائیں گے،

    

    Wes Anderson's Works میں Palettes

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

    
    

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

    پلاسٹ ایپلی کیشن:

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

      ہماری اپلی کیشن میں، ہم رنگوں کو روشنی اور مقابلہ کی طرف سے فلٹر کر سکتے ہیں، صرف نرم پیسٹل ٹونز کو برقرار رکھیں.

    
    

    New Images پر لاگو کرنے کے بعد، پیسٹل کو نکالنے کے

    

    
    

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

    
    

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

    تاہم، یہ بنیادی اصولوں کو ظاہر کرنے کے لئے کافی ہے کہ پلے رنگ درجہ بندی میں کام کرتے ہیں.

    
    

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

    
    

    

    
    

    

    
    

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

    
    

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