طرح های کاتوره ای در پس زمینه

صورت مسئله

طرح های تکرارپذیر هندسی قشنگ و خوب هستند اما می توانند کمی خسته کننده باشند. در طبیعت هم, خیلی کم پیش می آید تا الگوهای کاملا همسان داشته باشیم. حتی در موارد تکراری نیز, کمی تفاوت و غیر یکسانی و یا همان رفتارهای تصادفی یا کاتوره ای وجود دارد.

به یک دشت گل نگاه کنید, علاوه بر اینکه یک شکل بودن دشت, زیبایی خاص خود را دارد, تفاوت هایی وجود دارد که آن دشت را در چشم بیننده جذابتر و جالبتر جلوه می دهد. هیچ دو گلی وجود ندارند که دقیقا شبیه به هم باشند.

 

 

ما هم می خواهیم تا در ساخت طرح ها و الگوهای تکرار پذیر در پس زمینه از طبیعت الهام بگیریم, اما قرار دادن تفاوت های تصادفی در پس زمینه های تکرار پذیر در CSS کار آسانی نیست, چون CSS بصورت ذاتی چنین قابلیتی در خود ندارد. اجازه بدهید تا مثالی را با هم بررسی کنیم.

فرض کنید طرح راه راهی با رنگ و عرض متفاوت برای هر راه بصورت زیر داشته باشیم (برای ساده بودن مثال فقط از چهار رنگ استفاده می کنیم).

 

background-image: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100px;

 

 

همینطور که در تصویر بالا مشاهده می کنید, تکرار در طرح بسیار واضح است و هر 80 پیسکل یک بار اتفاق می افتد. آیا می توانیم عملکرد بهتری داشته باشیم؟

پیشنیازها

1. آشنایی با انواع گرادینت ها
2. روش ساخت پس زمینه های راه راه
3. ساخت طرح های پیچیده در پس زمینه

 

راه حل

به عنوان اولین ایده برای راه حل, رنگ های مختلف را به صورت لایه های متفاوت در گرادینت های جدا قرار می دهیم و با تنظیم color-stop و background-size برای هر لایه, به نتیجه زیر می رسیم:

 

background: hsl(20, 40%, 90%); 
background-image:
  linear-gradient(90deg, #fb3 10px, transparent 0),
  linear-gradient(90deg, #ab4 20px, transparent 0),
  linear-gradient(90deg, #655 20px, transparent 0); 
background-size: 80px 100%, 60px 100%, 40px 100%;  

 

 

 

همانطور که در تصویر مشاهده می کنید این طرح حالت تصادفی خاصی در خود دارد و در نگاه اول تکراری به چشم نمی آید. اما همانطور که در تصویر با خط چین نشان داده شده است این طرح نیز, هر 240 پیکسل یک بار تکرار می شود.

آخر هر کاشی (قسمتی که با خط چین مشخص شده است) جایی است که قبل از آن هر یک از لایه های ما (گرادینت ها) به تعداد مشخصی تکرار شده اند. همان طور که از زمان مدرسه به خاطر داریم, اگر تعداد کمی عدد داشته باشیم, کوچکترین عددی که می توانند تمام آن اعداد را چند بار در خود جای دهد, کوچکترین مضرب مشترک یا همان ک.م.م معروف نام دارد. در نتیجه در اینجا اندازه هر کاشی تکرار شونده, ک.م.م اندازه پس زمینه ها خواهد بود. یعنی ک.م.م 40,60 و 80 که 240 می باشد.

منطقی است که اگر می خواهیم تصادفی بودن را در طرح بیشتر کنیم باید اندازه یک کاشی را بیشینه کنیم. خوشبختانه راه حل این موضوع در ریاضیات وجود دارد.

برای اینکه ک.م.م بیشینه باشد, باید اعداد ما, اعدادی باشند که نسبت به هم اول هستند و یا به بیانی دیگر اعدادی متباین داشته باشیم.

به عنوان مثال 3,4 و 5 نسبت به هم اول هستند و ک.م.م آنها برابر با 60 = 3 × 4 × 5 می باشد. راه حل آسان این است که همیشه اعداد انتخابی را اعداد اول در نظر بگیریم چون اعداد اول همیشه نسبت به هم اول هستند.

برای اینکه حالت تصادفی را در طرح, حتی بیشتر کنیم, عرض هر راه (یعنی همان مقدار color-stop) را نیز عدد اول در نظر می گیریم پس هم اندازه پس زمینه ها و هم اندازه هر راه اعداد اول خواهند بود:

 

background: hsl(20, 40%, 90%);
background-image:
  linear-gradient(90deg, #fb3 11px, transparent 0),
  linear-gradient(90deg, #ab4 23px, transparent 0),
  linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

 

 

حال دیگر تکراری در تصویر بالا وجود ندارد. (بله کد یکم داغونه, یعنی اعدادش نامیزونه ولی عمرا دیگه بتونی حالت تکراری پیدا کنی :) ). در اینجا اندازه کاشی 207,583 = 41 × 61 × 83 خواهد بود. یعنی بزرگتر از هر رزولوشنی که بتوانید تصور کنید.

ایده استفاده از اعداد اول, توسط Alex Walker برای اولین بار با نام اصل زنجره بیان شد و استفاده از آن در مواردی که تکرار وجود دارد می تواند مفید باشد. مثلا می توان در چرخش تصاویر یک گالری به زاویه های متفاوت از این ایده بهره گرفت. همچنین می توان انیمیشن هایی با مدت زمان های متفاوت ساخت تا حرکات تکراری به نظر نرسند. در مورد این موضوع ها در مطالب آینده بحث خواهیم کرد.

 

See the Pen Pseudorandom stripes by Mojtaba Seyedi (@seyedi) on CodePen.

 

منبع

• CSS Secrets By Lea Verou