نحوه ایجاد اشکال و الگوهای موجی در CSS

موج احتمالاً یکی از سخت‌ترین شکل‌ها در CSS است. ما همیشه سعی می کنیم آن را با خواصی مانند تقریب کنیم border-radius و تعداد زیادی اعداد جادویی تا زمانی که به چیزی نزدیک شویم. و این قبل از اینکه ما حتی به الگوهای موج دار وارد شویم، که دشوارتر هستند.

"آن را SVG کنید!" ممکن است بگویید، و احتمالاً حق با شماست که این راه بهتری است. اما خواهیم دید که CSS می تواند امواج خوبی ایجاد کند و لزومی ندارد که کد آن کاملاً دیوانه باشد. و حدس بزنید چه؟ من دارم یک ژنراتور آنلاین تا آن را حتی پیش پا افتاده تر کند!

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

برخی از مقادیر ممکن است شبیه به "اعداد جادوییاما در واقع منطقی پشت آنها وجود دارد و ما کد را تشریح می کنیم و تمام رازهای پشت ایجاد امواج را کشف می کنیم.

این مقاله در ادامه مطلب می باشد یک قبلی جایی که من انواع مرزهای زیگ زاگ مختلف، scoped، scalloped و بله، مرزهای مواج را ساختم. من به شدت توصیه می کنم آن مقاله را بررسی کنید زیرا از همان تکنیکی استفاده می کند که در اینجا به آن خواهیم پرداخت، اما با جزئیات بیشتر.

ریاضیات پشت امواج

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

بیایید با یک مثال ساده با استفاده از دو شکل دایره شروع کنیم:

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

ما در حال حاضر موج را می بینیم. حالا بیایید قسمت پایین (یا قسمت بالایی) را پر کنیم تا موارد زیر به دست آید:

تادا! ما یک شکل موج دار داریم و می توانیم با استفاده از یک متغیر برای شعاع دایره آن را کنترل کنیم. این یکی از ساده‌ترین موج‌هایی است که می‌توانیم ایجاد کنیم و این همان موجی است که من در آن خودنمایی کردم this مقاله قبلی

بیایید با گرفتن تصویر اول و کمی جابجایی دایره ها کمی پیچیدگی اضافه کنیم:

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

حالا آن خط را بردارید و آن را تکرار کنید و موج دیگری دریافت می کنید، یک موج صاف تر.

فکر میکنم ایده را فهمیده باشید. با کنترل موقعیت و اندازه دایره ها می توانیم هر موجی را که می خواهیم ایجاد کنیم. ما حتی می توانیم برای آنها متغیرهایی ایجاد کنیم که آنها را فراخوانی می کنم P و Sبود.

احتمالاً متوجه شده اید که در ژنراتور آنلاین، ما موج را با استفاده از دو ورودی کنترل می کنیم. آنها به متغیرهای فوق نگاشت می شوند. S "اندازه موج" است و P "انحنای موج" است.

تعریف میکنم P as P = m*S جایی که m متغیری است که هنگام به روز رسانی انحنای موج تنظیم می کنید. این به ما امکان می دهد که همیشه انحنای یکسانی داشته باشیم، حتی اگر S را به روز کنیم.

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

شعاع دایره خود را فراموش نکنیم! که با استفاده از آن نیز قابل تعریف است S و P مثل این:

R = sqrt(P² + S²)/2

چه زمانی P برابر است با 0، ما خواهیم داشت R = S/2.

ما همه چیز برای شروع تبدیل همه اینها به گرادیان در CSS داریم!

ایجاد گرادیان

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

ما با یک مورد خاص که در آن P برابر است با 0. در اینجا تصویر شیب اول است:

این گرادیان اولین انحنا را ایجاد می کند در حالی که کل ناحیه پایین را پر می کند - اصطلاحاً "آب" موج.

.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

La --size متغیر شعاع و اندازه گرادیان شعاعی را تعریف می کند. اگر آن را با S متغیر، سپس برابر است با S/2.

حالا بیایید گرادیان دوم را اضافه کنیم:

گرادیان دوم چیزی نیست جز یک دایره برای تکمیل موج ما:

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

اگر شما بررسی مقاله قبلی خواهید دید که من به سادگی همان کاری را که قبلاً در آنجا انجام داده ام تکرار می کنم.

من هر دو مقاله را دنبال کردم اما تنظیمات گرادیان یکسان نیست.

این به این دلیل است که ما می توانیم با استفاده از تنظیمات گرادیان مختلف به یک نتیجه برسیم. اگر هر دو پیکربندی را مقایسه کنید، تفاوت جزئی در تراز مشاهده خواهید کرد، اما ترفند یکسان است. اگر با شیب ها آشنا نیستید، ممکن است گیج کننده باشد، اما نگران نباشید. با کمی تمرین، به آنها عادت می کنید و خودتان متوجه می شوید که نحو مختلف می تواند به یک نتیجه منجر شود.

در اینجا کد کامل موج اول ما آمده است:

.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

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

کد ما به شکل زیر خواهد بود:

.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

جدید معرفی کردم --p متغیری که از آن برای تعریف موقعیت مرکزی هر دایره استفاده می شود. گرادیان اول در حال استفاده است 50% calc(-1*var(--p))، بنابراین مرکز آن در حالی که دومی در حال استفاده است به سمت بالا حرکت می کند calc(var(--size) + var(--p)) تا آن را به پایین منتقل کند.

یک نسخه نمایشی به ارزش هزار کلمه است:

دایره ها نه تراز هستند و نه یکدیگر را لمس می کنند. ما آنها را بدون تغییر شعاع آنها از هم دور کردیم، بنابراین موج خود را از دست دادیم. اما می‌توانیم با استفاده از همان ریاضیاتی که قبلاً برای محاسبه شعاع جدید استفاده کردیم، مسائل را اصلاح کنیم. یادت باشد R = sqrt(P² + S²)/2. در مورد ما، --size برابر است با S/2; همینطور برای --p که آن نیز برابر است P/2 از آنجایی که ما در حال حرکت هر دو دایره هستیم. بنابراین، فاصله بین نقاط مرکزی آنها دو برابر مقدار است --p برای این:

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

که نتیجه ای به ما می دهد 55.9px.

موج ما برگشت! بیایید این معادله را به CSS خود متصل کنیم:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

این کد CSS معتبر است. sqrt() بخشی از مشخصات است، اما در زمانی که من این را می نویسم، هیچ مرورگری برای آن پشتیبانی نمی شود. این بدان معناست که ما به مقداری جاوا اسکریپت یا Sass برای محاسبه آن مقدار نیاز داریم تا زمانی که گسترده تر شویم sqrt() پشتیبانی می کند.

این بسیار جالب است: تنها چیزی که لازم است دو گرادیان است تا یک موج خنک به دست آورید که می توانید با استفاده از mask ویژگی. دیگر نیازی به آزمون و خطا نیست - تنها چیزی که نیاز دارید این است که دو متغیر را به روز کنید و شما آماده هستید!

معکوس کردن موج

چه می شود اگر بخواهیم امواج به سمت دیگری بروند، جایی که به جای «آب» «آسمان» را پر می کنیم. باور کنید یا نه، تنها کاری که باید انجام دهیم این است که دو مقدار را به روز کنیم:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}

تمام کاری که من در آنجا انجام دادم اضافه کردن یک افست برابر است 100%، در بالا برجسته شده است. نتیجه این است:

ما می‌توانیم با استفاده از مقادیر کلمات کلیدی، نحوی دوستانه‌تر را برای آسان‌تر کردن آن در نظر بگیریم:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

ما از left و bottom کلمات کلیدی برای تعیین اضلاع و افست. به طور پیش فرض، مرورگر به طور پیش فرض به left و top - به همین دلیل است که استفاده می کنیم 100% برای انتقال عنصر به پایین در واقع، ما آن را از top by 100%، پس واقعاً مثل گفتن است bottom. خواندن بسیار آسان تر از ریاضی!

با این نحو به روز شده، تنها کاری که باید انجام دهیم این است که مبادله کنیم bottom برای top - یا برعکس - جهت تغییر جهت موج.

و اگر می خواهید هر دو موج بالا و پایین را دریافت کنید، ما همه گرادیان ها را در یک اعلان واحد ترکیب می کنیم:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  mask:
    /* Gradient 1 */
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 2 */
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
    /* Gradient 3 */
    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 4 */
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}

اگر کد را بررسی کنید، می بینید که علاوه بر ترکیب تمام گرادیان ها، ارتفاع آنها را نیز از 100% به 51% به طوری که هر دو نیمی از عنصر را پوشش دهند. آره، 51%. ما به آن درصد کمی اضافی برای یک همپوشانی کوچک که از شکاف ها جلوگیری می کند، نیاز داریم.

سمت چپ و راست چطور؟

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

اگر مشکل دارید، همیشه می توانید استفاده کنید ژنراتور آنلاین برای بررسی کد و تجسم نتیجه.

خطوط مواج

قبلاً، اولین موج خود را با استفاده از یک خط قرمز ایجاد کردیم و سپس قسمت پایین عنصر را پر کردیم. آن خط مواج چطور؟ این هم یک موج! حتی بهتر است اگر بتوانیم ضخامت آن را با یک متغیر کنترل کنیم تا بتوانیم دوباره از آن استفاده کنیم. بیایید آن را انجام دهیم!

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

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

من فکر می کنم شما قبلا حدس زده اید که --b متغیر همان چیزی است که ما برای کنترل ضخامت خط استفاده می کنیم. بیایید این را برای گرادیان های خود اعمال کنیم:

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

هنوز دور است، اما ما هر دو انحنای مورد نیاز را داریم! اگر کد را بررسی کنید، می بینید که دو شیب یکسان داریم. تنها تفاوت در موقعیت آنهاست:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)), var(--_g)) 
      50% var(--size)/calc(4*var(--size)) 100%;
}

حالا باید اندازه و موقعیت را برای شکل نهایی تنظیم کنیم. ما دیگر نیازی نداریم که گرادیان تمام قد باشد، بنابراین می توانیم جایگزین کنیم 100% با این:

/* Size plus thickness */
calc(var(--size) + var(--b))

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

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
      50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}

هنوز کاملاً وجود ندارد:

یک گرادیان باید کمی به سمت پایین و دیگری کمی بالا حرکت کند. هر دو باید به اندازه نیمی از قد خود حرکت کنند.

ما تقریباً آنجا هستیم! برای اینکه شعاع همپوشانی کامل داشته باشد به یک اصلاح کوچک نیاز داریم. هر دو خط باید با نیمی از حاشیه (--b) ضخامت:

گرفتیم! یک خط موج دار کامل که به راحتی می توانیم با کنترل چند متغیر آن را تنظیم کنیم:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g)) 
     calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g)) 
     50%  calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}

من می دانم که درک منطق کمی طول می کشد. این خوب است و همانطور که گفتم، ایجاد یک شکل موج دار در CSS کار آسانی نیست، به غیر از ریاضیات پیچیده پشت آن. به همین دلیل است ژنراتور آنلاین یک نجات دهنده است - شما به راحتی می توانید کد نهایی را دریافت کنید حتی اگر منطق پشت آن را کاملاً درک نکنید.

الگوهای موج دار

ما می توانیم از خط موجی که ایجاد کردیم یک الگو بسازیم!

اوه نه، درک کد الگو حتی دشوارتر خواهد بود!

اصلا! ما قبلاً کد را داریم. تنها کاری که باید انجام دهیم این است که حذف کنیم repeat-x از آنچه در حال حاضر داریم، و تادا. 🎉

یک الگوی موج دار زیبا. معادله ای را که گفتم دوباره بررسی می کنیم را به خاطر دارید؟

/* Size plus thickness */
calc(var(--size) + var(--b))

خوب، این چیزی است که فاصله بین خطوط در الگو را کنترل می کند. ما می توانیم از آن یک متغیر بسازیم، اما نیازی به پیچیدگی بیشتر نیست. من حتی از یک متغیر برای آن در ژنراتور استفاده نمی کنم. شاید بعداً آن را تغییر دهم.

در اینجا همان الگوی در جهت متفاوت است:

من کد را در آن نسخه ی نمایشی به شما ارائه می کنم، اما از شما می خواهم که آن را تشریح کنید و متوجه شوید که چه تغییراتی برای انجام آن انجام دادم.

ساده کردن کد

در تمام دموهای قبلی، ما همیشه the را تعریف می کنیم --size و --p به طور مستقل اما آیا به یاد دارید که چگونه قبلاً ذکر کردم که مولد آنلاین ارزیابی می کند P برابر با m*S، که در آن m انحنای موج را کنترل می کند؟ با تعریف یک ضریب ثابت، می توانیم با یک موج خاص کار کنیم و کد ساده تر می شود. این همان چیزی است که در بیشتر موارد به آن نیاز خواهیم داشت: یک شکل موجی خاص و یک متغیر برای کنترل اندازه آن.

بیایید کد خود را به روز کنیم و آن را معرفی کنیم m متغیر:

.wave {
  --size: 50px;
  --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  }

همانطور که می بینید، ما دیگر به آن نیاز نداریم --p متغیر. جایگزینش کردم با var(--m)*var(--size)، و بر این اساس برخی از ریاضیات را بهینه کرد. حال اگر بخواهیم با یک شکل موج دار خاص کار کنیم، می توانیم آن را حذف کنیم --m متغیر و آن را با یک مقدار ثابت جایگزین کنید. بیایید تلاش کنیم .8 به عنوان مثال.

--size: 50px;
--R: calc(var(--size) * 1.28);

mask:
  radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) 
    calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
  radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%) 
    50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

حالا ببینید چگونه کد ساده تر است؟ فقط یک متغیر برای کنترل موج خود، به علاوه دیگر نیازی به تکیه بر آن ندارید sqrt() که هیچ پشتیبانی مرورگری ندارد!

شما می توانید منطق یکسانی را برای تمام دموهایی که حتی برای خطوط موج دار و الگو دیدیم اعمال کنید. من با یک توضیح ریاضی مفصل شروع کردم و کد عمومی را ارائه کردم، اما ممکن است در یک مورد واقعی به کد ساده‌تری نیاز داشته باشید. این کاری است که من همیشه انجام می دهم. من به ندرت از کد عمومی استفاده می کنم، اما همیشه یک نسخه ساده شده را در نظر می گیرم، به خصوص که در بیشتر موارد، از مقادیر شناخته شده ای استفاده می کنم که نیازی به ذخیره شدن به عنوان متغیر ندارند. (هشدار اسپویلر: من در پایان چند نمونه را به اشتراک خواهم گذاشت!)

محدودیت های این رویکرد

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

برای موارد دیگر، این مسئله مربوط به برخی از گرد کردن است که منجر به ناهماهنگی و شکاف بین امواج می شود:

با این حال، من هنوز فکر می‌کنم روشی که پوشش دادیم روش خوبی باقی می‌ماند، زیرا در بیشتر موارد امواج صافی تولید می‌کند و ما به راحتی می‌توانیم با بازی با مقادیر مختلف از نتایج بد جلوگیری کنیم تا زمانی که به آن کامل برسیم.

پسگفتار

امیدوارم که پس از این مقاله، دیگر با آزمون و خطا برای ساختن یک شکل یا الگوی موج دار سر و صدا نکنید. علاوه بر این به ژنراتور آنلاین، شما تمام اسرار ریاضی را پشت ایجاد هر نوع موجی که می خواهید دارید!

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

تو چطور؟ از مولد آنلاین من استفاده کنید (یا اگر قبلاً تمام ریاضیات را از روی قلب یاد گرفته اید، کد را به صورت دستی بنویسید) و خلاقیت های خود را به من نشان دهید! بیایید یک مجموعه خوب در قسمت نظرات داشته باشیم.