رنگ Color

توی دنیای دیجیتال، وقتی داریم درباره رنگ صحبت می‌کنیم باید دقیق باشیم. مثلاً این که بگیم اون دایره رو برام سرخابی کن فایده‌ای نداره. هر رنگی با استفاده از مجموعه‌ای از اعداد مشخص و متمایز می‌شه. مثلاً عدد 0 یعنی سیاه و 255 یعنی سفید. تا حالا رنگ‌های مختلفی توی اسکیس‌ها استفاده کردیم، الان می‌خوایم ببینیم چطور می‌تونیم رنگ‌ها رو کنترل کنیم و رنگی که نیاز داریمو بسازیم.

تابع رنگ

p5.js به صورت پیش‌فرض از سیستم RGB برای کار کردن با رنگ‌ها استفاده می‌کنه. RGB مخفف این کلماته:

• R ـ Red ـ قرمز
• G ـ Green ـ سبز
• B ـ Blue ـ آبی

رنگ مورد نظرمونو باید از ترکیب این سه عدد به دست بیاریم؛ هر کدوم از این سه عدد می‌تونن مقداری بین 0 و 255 داشته باشن. مثلاً اگه برای تابع background پارامترهای 0, 0, 0 رو استفاده کنیم نتیجه اینه که سیاه به دست آوردیم و اگه 255, 255, 255 استفاده کنیم، پس‌زمینه‌مون سفید می‌شه. البته اگه مثل این دو تا سناریو قرار باشه هر سه تا عدد یکی باشن، فقط کافیه یکی از اعداد رو وارد کنید؛ یعنی به جای 255, 255, 255 فقط کافیه بنویسیم 255 و رنگ سفید رو بسازیم. دقت کنید وقتایی که فقط از یه پارامتر استفاده می‌کنید، یعنی هر سه تا مقدار RGB یک‌سان هستن، رنگ شما فقط می‌تونه سیاه یا سفید یا خاکستریِ تیره یا روشن باشه. اگه نیاز به غلظت‌های متنوع رنگی داشته باشید باید از هر سه پارامتر استفاده کنید.

255 بیشترین غلظتیه که یه رنگ می‌تونه داشته باشه. پس اگه پارامتر‌های 255, 0, 0 رو استفاده کنیم، یه رنگ کاملاً قرمز به دست میاریم، اگه از 0, 255, 0 استفاده کنیم، کاملاً سبز به دست میاریم و اگه از 0, 0, 255 استفاده کنیم، کاملاً آبی.

من معمولاً برای ساختن پالت مورد نیازم و همچنین به دست آوردن کد RGB از یه ابزار آنلاینی که توی این آدرس هست استفاده می‌کنم: https://coolors.co؛ پیشنهاد می‌کنم حتماً یه سری به این سایت بزنید و با امکاناتی که داره آشنا بشید.

پارامترِ چهارم

هر جایی که سه تا پارامتر RGB رو وارد می‌کنید، می‌تونید یه پارامتر چهارم هم وارد کنید؛ به این پارامتر چهارم می‌گن پارامترِ آلفا و برای همین بعضی جاها این استاندارد رو RGBA نام‌گذاری کردن. پارامترِ آلفا، میزان کدورت یا شفافیتِ رنگو مشخص می‌کنه و باز هم می‌تونه عددی بین 0 تا 255 باشه؛ در این صورت 0 یعنی کاملاً شفاف و 255 یعنی کاملاً کِدِر.

در نتیجه موقع انتخاب رنگ با مدل RGB، می‌تونیم یک مقدار، یا سه مقدار، یا چهار مقدار رو به عنوان پارامتر وارد کنیم و یه رنگ به دست بیاریم. نمی‌خوام با اطلاعات خیلی زیاد گیجتون کنم، ولی گوشه ذهنتون این رو هم نگه دارید که موقع استفاده کردن از این مدل می‌تونید فقط دو تا پارامتر هم وارد کنید؛ در این صورت پارامتر اول مشخص کننده‌ی رنگ‌های RGB خواهد بود و پارامتر دوم، مقدارِ آلفا.

خب حالا می‌دونید اعدادی که به عنوان پارامتر توی تابع‌هایی مثل background و fill و stroke استفاده کردیم معنی‌شون چیه. یادآوری می‌کنم که برای رنگ دادن به یه شکل از تابع fill و برای رنگ دادن به دورخطِ یه شکل از تابع stroke استفاده می‌کنیم. رنگ پیش‌فرض همه شکل‌ها توی p5.js سفید و دورخط همه شکل‌های به صورت پیش‌فرض سیاهه؛ یه تابع مفید دیگه هم که خوبه همین جا یاد بگیرید strokeWeight هست که اجازه می‌ده ضخامت دورخط رو مشخص کنید:

function setup() {
     createCanvas(windowWidth, windowHeight);
}
function draw() {
     background(210)

     // circle 1
     fill(50, 50, 50)
     strokeWeight(3)
     stroke(75)
     ellipse(windowWidth/2, windowHeight/2, 300, 300)

     // circle 2
     fill(255, 50, 100)
     stroke(0)
     ellipse(windowWidth/2, windowHeight/2, 270, 270)

     // circle 3
     fill(1, 175, 240)
     ellipse(windowWidth/2, windowHeight/2, 240, 240)

}

توی مثال بالا از تابع fill قبل از کشیدن هر دایره استفاده کردم تا رنگ دایره‌ای که داره کشیده می‌شه رو مشخص کنم؛ دو تا تابع دیگه به نام‌های noFill و noStroke هستن که همون طوری که از اسمشون به پیداس وقتایی استفاده می‌شن که برای شکل به رنگ نیاز نداشته باشیم یا بخوایم شکل دورخط نداشته باشه.

مَپ کردن

توی درس قبلی دیدید که برنامه‌مون می‌تونه اطلاعاتی رو از موقعیتِ مکان‌نمای ماوس روی صفحه به دست بیاره. عددایی که توسط مکان‌نمای ماوس به دست میاد معمولاً باید یه تغییراتی روشون انجام بشه تا داخل برنامه‌ای که داریم می‌نویسیم قابل استفاده باشن. مثلاً فرض کنید عرض یه اسکیس 1920 پیکسل باشه و بخوایم از مکان‌نمای ماوس استفاده کنیم برای تغییر دادن رنگ پس‌زمینه؛ توی این درس هم یاد گرفتید که عددی که نیاز داریم باید بین 0 تا 225 قرار بگیره تا بتونیم رنگ‌ها رو باهاش کنترل کنیم؛ این جاس که باید از تابع map استفاده کنیم و به اصطلاح عددمونو مپ کنیم:

function setup() {
     createCanvas(windowWidth, windowHeight)
}
function draw() {
     const mapWidth = map(mouseX, 0, windowWidth, 0, 255)
     const mapHeight = map(mouseY, 0, windowHeight, 0, 255)
     background(mapWidth, mapHeight, 100)
}

توی این اسکیسِ خیلی ساده، از تابع background توی draw استفاده کردم. برای به دست آوردنِ غلظتِ رنگِ قرمز حرکت افقی ماوس رو مپ کردم، برای به دست آوردن غلظت رنگ سبز حرکت عمودی ماوس رو مپ کردم و غلظت رنگ آبی رو عدد ثابت صد قرار دادم.

تابعِ map پنج تا پارامتر داره:

• اولین پارامتر ـ عددی که قراره مپ بشه
• دومین پارامتر ـ پایین‌ترین عدد توی بازه فعلی
• سومین پارامتر ـ بالاترین عدد توی بازه فعلی
• چهارمین پارامتر ـ پایین‌ترین عدد توی بازه هدف
• پنجمین پارامتر ـ بالاترین عدد توی بازه هدف

map(value, start1, stop1, start2, stop2)

// value (Number)
// the incoming value to be converted

// start1 (Number)
// lower bound of the value's current range

// stop1 (Number)
// upper bound of the value's current range

// start2 (Number)
// lower bound of the value's target range

// stop2 (Number)
// upper bound of the value's target range

ذخیره کردن رنگ

بعضی وقتا نیاز داریم یه رنگ رو توی یه متغیر ذخیره کنیم و بعداً ازش استفاده کنیم. توی اسکیس بعدی با استفاده از تابع frameRate یه برنامه‌ای می‌نویسم که محتویات draw رو توی هر ثانیه فقط یه بار اجرا کنه (بعداً درباره این بیشتر یاد می‌گیریم). بعد با استفاده از تابع color رنگ‌ها رو توی متغیرها ذخیره می‌‌کنم. در نهایت برنامه، توی هر ثانیه، سه تا رنگ تصادفی درست می‌کنه و روی صفحه نمایش بهم نشون می‌ده:

function setup(){
     createCanvas(windowWidth, windowHeight)
     frameRate(1)
}
  
function draw(){
     background(255)
     noStroke()

     const color1 = color(random(255), random(255), random(255))
     fill(color1)
     rect(0, 0, width/3, height)
    
     const color2 = color(random(255), random(255), random(255))
     fill(color2)
     rect(width * 1/3, 0, width/3, height)
    
     const color3 = color(random(255), random(255), random(255))
     fill(color3)
     rect(width * 2/3, 0, width/3, height)
                         
}