اصل سیکادا و چرا برای طراحان وب اهمیت دارد (به روز شده)

من امروز با یک مماس به ظاهر وحشی شروع خواهم کرد، اما تحمل کنید – قول می دهم دارم هدفی دارم. چند سال پیش، مطالعه جالبی درباره زندگی سیکاداهای دوره ای خواندم. ما معمولاً تعداد زیادی از این بچه های کوچک را نمی بینیم، زیرا آنها اکثریت قریب به اتفاق زندگی خود را به آرامی در زیر زمین تونل می زنند و ریشه های درختان را می خورند. با این حال، هر 7، 13 یا 17 سال (بسته به گونه)، این سیکاداهای دوره ای به طور ناگهانی از لانه های خود بیرون می آیند، به موجوداتی پر سر و صدا و پرنده تبدیل می شوند، جفتی پیدا می کنند، و در نهایت سرگردان می شوند تا مدت کوتاهی منقضی شوند. بعد از. طراحی سایت

در حالی که این یک مرگ شوک‌آور «پانک راک» برای سیکادای سابق ما است، اما یک سوال واضح را ایجاد می‌کند: آیا تصادفی است که آنها این چرخه‌های زندگی ۷، ۱۱ یا ۱۳ ساله را اتخاذ کرده‌اند؟ یا این اعداد به نوعی خاص هستند؟

همانطور که مشخص است، این اعداد DO اشتراکاتی دارند. همه آنها اعداد اول هستند – اعدادی که فقط می توانند بر خودشان و 1 (یعنی 2، 3) تقسیم شوند. ، 5، 7، 11، 13، 17، 19، 23، و غیره).

اما چرا این مهم است؟

تحقیقات نشان داده است که جمعیت موجوداتی که سیکادا را شکار می‌کنند – معمولاً پرندگان، عنکبوت‌ها، زنبورها، ماهی‌ها و مارها – معمولاً در دوره‌های کوتاه‌تر 2-6 ساله خود تولید مثل می‌کنند.

بنابراین، اگر سیکاداهای ما مثلاً هر 12 سال یکبار پدیدار شوند، هر شکارچی که در چرخه‌های 2، 3، 4 یا 6 ساله کار می‌کند، می‌تواند به تدریج سال‌های شکوفایی خود را با این جشن قابل پیش‌بینی سیکادو همگام کند. . در واقع، آنها احتمالاً آن را به عنوان یک تعطیلات عمومی به نام «روز ملی سیکادا» با باربیکیو و همه در لباس پوشیدن تبدیل می‌کنند.

بدیهی است که اگر سیکادا هستید، آنقدرها هم جشن نیست.

از سوی دیگر، اگر یک جوجه سیکادای 17 ساله در طول فصل زنبور 3 ساله به اندازه کافی بدشانس بود، 51 سال دیگر (یعنی 3×17) قبل از آن خواهد بود. آن رویداد دوباره رخ می دهد در سال‌های بعد، سیکاداهای ما می‌توانند با خوشحالی ده‌ها هزار نفر ظاهر شوند، جمعیت شکارچیان محلی را کاملاً تحت تأثیر قرار دهند و عمدتاً در آرامش رها شوند.

چه بچه های کوچولوی مدبر، نه!؟

عالی است. اما همه اینها چه ربطی به طراحی وب دارد؟

چندی پیش ما به روند ساخت کاشی های بدون درز نگاه کردیم. الف>. همانطور که کاشی‌های بدون درز فوق‌العاده مفید هستند، ایجاد تعادل درست درست می‌تواند دشوار باشد.

از یک طرف، می‌خواهید ابعاد فایل تصویر را تا حد امکان کوچک نگه دارید تا از آن جلوه کاشی کاری بهترین استفاده را ببرید. با این حال، وقتی متوجه یک ویژگی متمایز می شوید – به عنوان مثال، یک گره در برخی از غلات چوبی – که در فواصل منظم تکرار می شود، واقعاً توهم تصادفی بودن ارگانیک را از بین می برد. شاید ما ایده هایی را از آن سیکاداها قرض بگیریم تا کاشی هایمان کمتر تکرار شوند؟

معرفی سایت: https://salehmedia.ir/نحوه-یادگیری-طراحی-وب-در-9-مرحله/

ایجاد تصادفی ارگانیک با CSS

مثال 1: کاشی جادویی

حرف کافی است. در اینجا یک اثبات سریع مفهوم وجود دارد. این قرار نیست از نظر بصری عالی باشد، اما کار خوبی برای نشان دادن آنچه در حال وقوع است انجام می دهد. با در نظر گرفتن «اصل سیکادا»، من سه PNG مربع و نیمه شفاف به ترتیب 29 پیکسل، 37 پیکسل و 53 پیکسل (همه اعداد اول) ساخته‌ام و آنها را به‌عنوان پس‌زمینه‌های متعدد در عنصر DIV گسترده یک صفحه آزمایشی تنظیم کرده‌ام. .

div {
پس زمینه-تصویر: url(29-a.png)، url(37-a.png)، url(53-a.png);
بالشتک: 0; حاشیه: 0; ارتفاع: 100%;
}

و نتیجه اینجاست. نوار اسکرول افقی را به سمت راست بکشید تا الگوی جدیدی را که ایجاد کرده‌ایم ببینید.

به قلم مراجعه کنید
نمونه اصلی سیکادا توسط SitePoint (@SitePoint )
در CodePen.

همان‌طور که می‌بینید، کاشی‌ها روی هم قرار می‌گیرند و برای ایجاد الگوها و رنگ‌های جدید با هم تعامل دارند. و از آنجایی که ما از اعداد اول جادویی استفاده می کنیم، این الگو برای مدت طولانی و طولانی تکرار نمی شود.

دقیقا چه مدت؟ ۲۹ پیکسل × ۳۷ پیکسل × ۵۳ پیکسل… یا ۵۶۸۶۹ پیکسل!

حالا، این چیزی برای من یک مکاشفه بود. احساس دیوانگی می کرد. من در واقع مجبور شدم محاسباتم را سه بار بررسی کنم، اما ریاضی کاملاً محکم است. به یاد داشته باشید که اینها گرافیک‌های کوچکی هستند — در مجموع کمتر از 7 کیلوبایت — اما در حال تولید ناحیه‌ای از بافت اصلی تقریباً 57000 پیکسل عرض هستند.

می‌توانید تصور کنید چه اتفاقی می‌افتد اگر بخواهید لایه چهارم کاشی کاری را اضافه کنید – مثلاً یک کاشی 43 پیکسلی. یا شاید نتوانید آن را تصور کنید، زیرا اعداد کمی وحشیانه می شوند و اگر بیش از حد به گوش ها خیره شوید، ممکن است سیلی به گوش شما بزنند.

گفتن کافی است، تعداد بیشتری نسبت به طراحی وب به صفحه‌سازی سیاره مربوط می‌شود.

باشه. بنابراین، راه راه‌های هندسی و انتزاعی خوب هستند، اما چگونه می‌توانید این ایده را اعمال کنید؟

مثال 2: پرده قرمز

بیایید یک مثال واقعی‌تر عکس بگیریم که احتمالاً همه ما در مقطعی دیده‌ایم: پرده تئاتر مخملی قرمز. من یک گرافیک پرده زیبا را اینجا پیدا کردم به لطف Unsplash برای استفاده به عنوان نقطه شروع. با نگاهی به پرده ما می توانید ببینید که به تقریبا واحدهای عمودی مساوی شکسته شده است.

برای این مثال، من قصد دارم به این فاصله به عنوان یک “واحد قلاب” اشاره کنم، و (برخلاف مثال اول) این واحد قرار است مهمتر از ابعاد پیکسل تصاویری که در حال کار با آنها هستیم.

ابتدا، من یکی از این روفله ها را انتخاب می کنم و آن را به یک کاشی بدون درز تبدیل می کنم. این یک PNG است و وزن آن 7 کیلوبایت بسیار مرتب است .

این گرافیک که به‌صورت یک کاشی ارائه شده است، هر چیزی است که ما در زمینه کاشی‌کاری پس‌زمینه نمی‌پسندیم. اتصالات واضح هستند و به عنوان یک پرده واقعی بسیار مکانیکی و غیرقابل قبول است.

کاشی 3 واحدی