ঠিক আছে, এই উত্তরটি তার নিজের জন্তুতে পরিণত হয়েছে। অনেকগুলি নতুন সংস্করণ, এটি মূর্খ হয়ে উঠছিল। এই উত্তরে দুর্দান্ত অবদানকারীদের সবাইকে অনেক ধন্যবাদ। তবে এটি সাধারণের জন্য সহজ রাখার জন্য। আমি এই উত্তরটির বিবর্তনের সমস্ত সংস্করণ / ইতিহাস আমার গিথুবে সংরক্ষণাগারভুক্ত করেছি । এবং এটি স্ট্যাক ওভারফ্লোতে নতুন সংস্করণ দিয়ে এটিকে পরিষ্কার করে শুরু করে। এই সংস্করণটির জন্য মাইক 'পোম্যাক্স' কামারম্যান্সকে একটি বিশেষ ধন্যবাদ জানানো হয়েছে। তিনি আমাকে নতুন গণিত দিয়েছেন।
এই ফাংশনটি ( pSBC) একটি HEX বা আরজিবি ওয়েব রঙ নেবে। pSBCএটি গা dark় বা হালকা শেড করতে পারে, বা এটি দ্বিতীয় রঙের সাথে মিশ্রিত করতে পারে এবং এটিকে ডান দিক দিয়েও পাস করতে পারে তবে হেক্স থেকে আরজিবি (হেক্স 2 আরজিবি) বা আরজিবিতে হেক্স (আরজিবি 2 হেক্স) রূপান্তর করতে পারে। আপনি কোন রঙিন ফর্ম্যাটটি ব্যবহার করছেন তা না জেনেও সবাই।
এটি সত্যিই দ্রুত সঞ্চালিত হয়, সম্ভবত সবচেয়ে দ্রুত, বিশেষত এর বিভিন্ন বৈশিষ্ট্য বিবেচনা করে। এটি তৈরিতে দীর্ঘ সময় ছিল। আমার গিথুবে পুরো গল্পটি দেখুন । আপনি যদি ছায়াছানা বা মিশ্রণের জন্য একেবারে ক্ষুদ্রতম এবং দ্রুততম উপায় চান তবে নীচের মাইক্রো ফাংশনগুলি দেখুন এবং ২-লাইনার স্পিড ডেভেনগুলির মধ্যে একটি ব্যবহার করুন। তীব্র অ্যানিমেশনগুলির জন্য এগুলি দুর্দান্ত, তবে বেশিরভাগ অ্যানিমেশনের জন্য এই সংস্করণটি যথেষ্ট দ্রুত।
এই ফাংশনটিতে লগ মিশ্রণ বা লিনিয়ার মিশ্রণ ব্যবহার করা হয়। তবে কোনও রঙ হালকা বা গা or় করার জন্য এটি এইচএসএল রূপান্তর করে না। অতএব, এই ফাংশন থেকে প্রাপ্ত ফলাফলগুলি এইচএসএল ব্যবহারকারী অনেক বৃহত্তর এবং ধীর গতির থেকে পৃথক হবে ।
জেএসফিডেল পিএসবিসির সাথে
github> পিএসবিসি উইকি
বৈশিষ্ট্য:
- স্ট্রিং আকারে স্ট্যান্ডার্ড হেক্স রঙগুলি স্বতঃ-সনাক্ত করে এবং গ্রহণ করে। যেমন:
"#AA6622"বা "#bb551144"।
- স্ট্রিং আকারে মানক আরজিবি রঙগুলি স্বতঃ-সনাক্ত করে এবং গ্রহণ করে। যেমন:
"rgb(123,45,76)"বা "rgba(45,15,74,0.45)"।
- শতাংশে শ্বেত বা কালো রঙের ছায়া গো।
- শতাংশ ভাগ করে একত্রিত করে রঙগুলি।
- হেক্স 2 আরজিবি এবং আরজিবি 2 হেক্স একই সময়ে রূপান্তর করতে পারে বা একক।
- # আরজিবি (বা # আরজিবিএ) আকারে 3 ডিজিটের (বা 4 অঙ্কের ডাব্লু / আলফা) এইচএক্স বর্ণ কোডগুলি গ্রহণ করে। এটি তাদের প্রসারিত করবে। উদাহরণস্বরূপ:
"#C41"হয়ে যায় "#CC4411"।
- গ্রহণ এবং (লিনিয়ার) আলফা চ্যানেলগুলির মিশ্রণ করে। যদি হয়
c0 (থেকে) রঙ বা (থেকে) রঙের c1একটিতে আলফা চ্যানেল থাকে তবে প্রত্যাবর্তিত রঙের একটি আলফা চ্যানেল থাকবে। যদি উভয় রঙের একটি আলফা চ্যানেল থাকে, তবে প্রদত্ত শতাংশটি প্রদত্ত শতাংশ (যেমন এটি একটি সাধারণ রঙের চ্যানেল হিসাবে ছিল) ব্যবহার করে দুটি আলফা চ্যানেলের লিনিয়ার মিশ্রণ হবে nd যদি দুটি বর্ণের একটিরও একটি আলফা চ্যানেল থাকে তবে এই আলফাটি কেবলমাত্র ফিরে আসা রঙের মধ্য দিয়ে যাবে। এটি স্বচ্ছতার স্তর বজায় রেখে স্বচ্ছ রঙ মিশ্রিত করতে / শেড করতে দেয়। বা, যদি স্বচ্ছতার স্তরগুলিও মিশ্রিত হয় তবে নিশ্চিত হয়ে নিন যে উভয় বর্ণের বর্ণমালা রয়েছে। শেড করার সময়, এটি আলফা চ্যানেলটি সোজা হয়ে পাস করবে। আপনি যদি বেসিক শেডগুলি চান যা আলফা চ্যানেলকেও শেড করে, তবে ব্যবহার করুন rgb(0,0,0,1)বা rgb(255,255,255,1)আপনার হিসাবেc1(থেকে) রঙ (বা তাদের হেক্স সমতুল্য)। আরজিবি রঙের জন্য, ফিরে আসা রঙের আলফা চ্যানেলটি 3 দশমিক স্থানে গোল করা হবে।
- মিশ্রণটি ব্যবহার করার সময় আরজিবি 2 হেক্স এবং হেক্স 2 আরজিবি রূপান্তরগুলি অন্তর্ভুক্ত।
c0(থেকে) রঙ নির্বিশেষে ; প্রত্যাবর্তিত রঙটি সর্বদা c1(থেকে) রঙের বর্ণ বিন্যাসে থাকবে , যদি কোনও উপস্থিত থাকে। যদি কোনও c1(টু) রঙ 'c'না থাকে তবে c1রঙ হিসাবে প্রবেশ করুন এবং এটি ছায়াযুক্ত হবে এবং c0রঙ যাই হোক না কেন তা রূপান্তরিত করবে । যদি রূপান্তরটি কেবল পছন্দসই 0হয় তবে শতাংশ হিসাবেও পাস করুন ( p)। যদি c1রঙ বাদ দেওয়া হয় বা একটি নন- stringপাস করা হয় তবে তা রূপান্তরিত হবে না।
- গ্লোবাল পাশাপাশি একটি গৌণ ফাংশন যুক্ত করা হয়।
pSBCrএকটি হেক্স বা আরজিবি রঙ পাস করা যেতে পারে এবং এটি এই রঙের তথ্য সম্বলিত কোনও বস্তু প্রদান করে। এটি আকারে: {r: XXX, g: XXX, b: XXX, a: X.XXX}} যেখানে .r, .gএবং এর .bপরিধি 0 থেকে 255 রয়েছে And এবং যখন কোনও আলফা নেই: .a-1 হয়। অন্যথায়: .aএর পরিধি 0.000 থেকে 1.000 রয়েছে।
- আরজিবি আউটপুটের জন্য, যখন আলফা চ্যানেলের সাথে একটি রঙ (থেকে) এবং / অথবা ( থেকে) প্রবেশ করা
rgba()হয় rgb()তখন এটি শেষ হয়ে যায় ।c0c1
- মাইনর ত্রুটি পরীক্ষা করা যুক্ত করা হয়েছে। এটি নিখুঁত নয়। এটি এখনও ক্র্যাশ বা জিব্বারিশ তৈরি করতে পারে। তবে এতে কিছু জিনিস ধরা পড়বে। মূলত, যদি কাঠামোটি কিছু উপায়ে ভুল হয় বা শতাংশ যদি সংখ্যা না হয় বা সুযোগের বাইরে থাকে তবে এটি ফিরে আসবে
null। একটি উদাহরণ: pSBC(0.5,"salt") == nullযেখানে এটি #saltবৈধ রঙ হিসাবে মনে করে । return null;এই বৈশিষ্ট্যটি সরাতে এবং এটিকে আরও দ্রুত এবং আরও ছোট করার জন্য শেষ হওয়া চারটি লাইন মুছুন ।
- লগ মিশ্রণ ব্যবহার করে। পাশ
trueজন্য lলিনিয়ার মিশ্রণ ব্যবহার করতে (4 র্থ প্যারামিটার)।
কোড:
// Version 4.0
const pSBC=(p,c0,c1,l)=>{
let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
if(!this.pSBCr)this.pSBCr=(d)=>{
let n=d.length,x={};
if(n>9){
[r,g,b,a]=d=d.split(","),n=d.length;
if(n<3||n>4)return null;
x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
}else{
if(n==8||n==6||n<4)return null;
if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
d=i(d.slice(1),16);
if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
}return x};
h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
if(!f||!t)return null;
if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
}
ব্যবহার:
// Setup:
let color1 = "rgb(20,60,200)";
let color2 = "rgba(20,60,200,0.67423)";
let color3 = "#67DAF0";
let color4 = "#5567DAF0";
let color5 = "#F3A";
let color6 = "#F3A9";
let color7 = "rgb(200,60,20)";
let color8 = "rgba(200,60,20,0.98631)";
// Tests:
/*** Log Blending ***/
// Shade (Lighten or Darken)
pSBC ( 0.42, color1 ); // rgb(20,60,200) + [42% Lighter] => rgb(166,171,225)
pSBC ( -0.4, color5 ); // #F3A + [40% Darker] => #c62884
pSBC ( 0.42, color8 ); // rgba(200,60,20,0.98631) + [42% Lighter] => rgba(225,171,166,0.98631)
// Shade with Conversion (use "c" as your "to" color)
pSBC ( 0.42, color2, "c" ); // rgba(20,60,200,0.67423) + [42% Lighter] + [Convert] => #a6abe1ac
// RGB2Hex & Hex2RGB Conversion Only (set percentage to zero)
pSBC ( 0, color6, "c" ); // #F3A9 + [Convert] => rgba(255,51,170,0.6)
// Blending
pSBC ( -0.5, color2, color8 ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(142,60,142,0.83)
pSBC ( 0.7, color2, color7 ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(168,60,111,0.67423)
pSBC ( 0.25, color3, color7 ); // #67DAF0 + rgb(200,60,20) + [25% Blend] => rgb(134,191,208)
pSBC ( 0.75, color7, color3 ); // rgb(200,60,20) + #67DAF0 + [75% Blend] => #86bfd0
/*** Linear Blending ***/
// Shade (Lighten or Darken)
pSBC ( 0.42, color1, false, true ); // rgb(20,60,200) + [42% Lighter] => rgb(119,142,223)
pSBC ( -0.4, color5, false, true ); // #F3A + [40% Darker] => #991f66
pSBC ( 0.42, color8, false, true ); // rgba(200,60,20,0.98631) + [42% Lighter] => rgba(223,142,119,0.98631)
// Shade with Conversion (use "c" as your "to" color)
pSBC ( 0.42, color2, "c", true ); // rgba(20,60,200,0.67423) + [42% Lighter] + [Convert] => #778edfac
// RGB2Hex & Hex2RGB Conversion Only (set percentage to zero)
pSBC ( 0, color6, "c", true ); // #F3A9 + [Convert] => rgba(255,51,170,0.6)
// Blending
pSBC ( -0.5, color2, color8, true ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(110,60,110,0.83)
pSBC ( 0.7, color2, color7, true ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(146,60,74,0.67423)
pSBC ( 0.25, color3, color7, true ); // #67DAF0 + rgb(200,60,20) + [25% Blend] => rgb(127,179,185)
pSBC ( 0.75, color7, color3, true ); // rgb(200,60,20) + #67DAF0 + [75% Blend] => #7fb3b9
/*** Other Stuff ***/
// Error Checking
pSBC ( 0.42, "#FFBAA" ); // #FFBAA + [42% Lighter] => null (Invalid Input Color)
pSBC ( 42, color1, color5 ); // rgb(20,60,200) + #F3A + [4200% Blend] => null (Invalid Percentage Range)
pSBC ( 0.42, {} ); // [object Object] + [42% Lighter] => null (Strings Only for Color)
pSBC ( "42", color1 ); // rgb(20,60,200) + ["42"] => null (Numbers Only for Percentage)
pSBC ( 0.42, "salt" ); // salt + [42% Lighter] => null (A Little Salt is No Good...)
// Error Check Fails (Some Errors are not Caught)
pSBC ( 0.42, "#salt" ); // #salt + [42% Lighter] => #a5a5a500 (...and a Pound of Salt is Jibberish)
// Ripping
pSBCr ( color4 ); // #5567DAF0 + [Rip] => [object Object] => {'r':85,'g':103,'b':218,'a':0.941}
নীচের ছবিটি দুটি মিশ্রনের পদ্ধতির মধ্যে পার্থক্য দেখাতে সহায়তা করবে:
মাইক্রো ফাংশন
আপনি যদি সত্যিই গতি এবং আকার চান তবে আপনাকে আরএইচজি হেক্স নয় ব্যবহার করতে হবে। আরজিবি আরও সোজা ও সরল, এইচএক্স খুব ধীরগতিতে লিখেছে এবং একটি সাধারণ দ্বি-লাইনারের জন্য অনেকগুলি স্বাদে আসে (আই। এটি একটি 3, 4, 6 বা 8 সংখ্যার এইএইএক্স কোড হতে পারে)। আপনাকে কিছু বৈশিষ্ট্য ত্যাগ করতে হবে, কোনও ত্রুটি পরীক্ষা করা নেই, কোনও এইচএক্স 2 আরজিবি বা আরজিবি 2 এইচএক্স নেই। পাশাপাশি, রঙ মিশ্রিত গণিতের জন্য আপনাকে একটি নির্দিষ্ট ফাংশন (নীচে এর ফাংশন নামের উপর ভিত্তি করে) চয়ন করতে হবে এবং আপনি যদি ছায়াছানা বা মিশ্রণ চান want এই ফাংশনগুলি আলফা চ্যানেলগুলিকে সমর্থন করে। এবং যখন উভয় ইনপুট রঙের বর্ণমালা থাকে এটি লিনিয়ার মিশ্রিত করবে। যদি দুটি বর্ণের একটিরও একটি আলফা থাকে তবে এটি এটিকে সরাসরি রঙের মাধ্যমে প্রেরণ করবে। নীচে দুটি লাইনারের ফাংশন রয়েছে যা অবিশ্বাস্যভাবে দ্রুত এবং ছোট:
const RGB_Linear_Blend=(p,c0,c1)=>{
var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,j=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
return"rgb"+(x?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+i(e[3]=="a"?e.slice(5):e.slice(4))*p)+","+r(i(b)*P+i(f)*p)+","+r(i(c)*P+i(g)*p)+j;
}
const RGB_Linear_Shade=(p,c)=>{
var i=parseInt,r=Math.round,[a,b,c,d]=c.split(","),P=p<0,t=P?0:255*p,P=P?1+p:1-p;
return"rgb"+(d?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+t)+","+r(i(b)*P+t)+","+r(i(c)*P+t)+(d?","+d:")");
}
const RGB_Log_Blend=(p,c0,c1)=>{
var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,j=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
return"rgb"+(x?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+p*i(e[3]=="a"?e.slice(5):e.slice(4))**2)**0.5)+","+r((P*i(b)**2+p*i(f)**2)**0.5)+","+r((P*i(c)**2+p*i(g)**2)**0.5)+j;
}
const RGB_Log_Shade=(p,c)=>{
var i=parseInt,r=Math.round,[a,b,c,d]=c.split(","),P=p<0,t=P?0:p*255**2,P=P?1+p:1-p;
return"rgb"+(d?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+t)**0.5)+","+r((P*i(b)**2+t)**0.5)+","+r((P*i(c)**2+t)**0.5)+(d?","+d:")");
}
আরও তথ্য চান? পূর্ণ কাজের মধ্যে থাকবেন পড়ুন GitHub ।
পিটি
(পিএস যদি কারও কাছে অন্য মিশ্রন পদ্ধতিতে গণিত থাকে তবে দয়া করে ভাগ করুন))