كيفية إنشاء أشكال وأنماط متموجة في CSS

ربما تكون الموجة واحدة من أصعب الأشكال التي يمكن صنعها في CSS. نحاول دائمًا تقريبه بخصائص مثل border-radius والكثير من الأرقام السحرية حتى نحصل على شيء يبدو قريبًا نوعًا ما. وذلك قبل أن ندخل في أنماط متموجة ، والتي تكون أكثر صعوبة.

"SVG ذلك!" قد تقول ، وربما تكون على حق في أنها طريقة أفضل للذهاب. لكننا سنرى أن CSS يمكن أن تصنع موجات لطيفة وأن الشفرة الخاصة بها لا يجب أن تكون مجنونة تمامًا. وتخيل ماذا؟ أملك منشئ عبر الإنترنت لجعلها أكثر تافهة!

إذا لعبت مع المولد ، يمكنك أن ترى أن CSS الذي يبثه هو عبارة عن تدرجين فقط وخاصية قناع CSS - فقط هذين الشيئين ويمكننا عمل أي نوع من أشكال الموجات أو الأنماط. ناهيك عن أنه يمكننا بسهولة التحكم في حجم وانحناء الأمواج أثناء تواجدنا فيها.

قد تبدو بعض القيم مثل "أرقام سحريةلكن هناك منطقًا وراءهم بالفعل وسنقوم بتشريح الشفرة واكتشاف كل الأسرار وراء إنشاء الموجات.

هذه المقالة هي متابعة ل سابقة حيث قمت ببناء جميع أنواع الحدود المتعرجة والمتعرجة والصدفية ونعم الحدود المتموجة. أوصي بشدة بالتحقق من هذه المقالة لأنها تستخدم نفس التقنية التي سنغطيها هنا ، ولكن بمزيد من التفصيل.

الرياضيات وراء الأمواج

بالمعنى الدقيق للكلمة ، لا توجد صيغة سحرية وراء الأشكال المتموجة. يمكن تسمية أي شكل به منحنيات تتجه لأعلى ولأسفل بموجة ، لذلك لن نقصر أنفسنا على الرياضيات المعقدة. بدلاً من ذلك ، سنقوم بإعادة إنتاج موجة باستخدام أساسيات الهندسة.

لنبدأ بمثال بسيط باستخدام شكلين دائريين:

لدينا دائرتان لهما نفس نصف القطر بجوار بعضهما البعض. هل ترى هذا الخط الأحمر؟ وهي تغطي النصف العلوي من الدائرة الأولى والنصف السفلي من الدائرة الثانية. تخيل الآن أنك تأخذ هذا الخط وتكرره.

لقد رأينا بالفعل الموجة. الآن دعونا نملأ الجزء السفلي (أو الجزء العلوي) للحصول على ما يلي:

تادا! لدينا شكل متموج ، ويمكننا التحكم فيه باستخدام متغير واحد لنصف قطر الدائرة. هذه واحدة من أسهل الموجات التي يمكننا صنعها وهي الموجة التي أظهرتها فيها 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;
}

• --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() جزء من المواصفات، ولكن في الوقت الذي أكتب فيه هذا ، لا يوجد دعم للمتصفح له. هذا يعني أننا بحاجة إلى رش JavaScript أو 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 For 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))

حسنًا ، هذا هو ما يتحكم في المسافة بين الخطوط في النمط. يمكننا عمل متغير منه ، لكن لا داعي لمزيد من التعقيد. أنا لا أستخدم حتى متغيرًا لذلك في المولد. ربما سأغير ذلك لاحقًا.

هنا نفس النمط يسير في اتجاه مختلف:

أقدم لك الكود في هذا العرض التوضيحي ، لكن أود أن تقوم بتشريحه وفهم التغييرات التي أجريتها لتحقيق ذلك.

تبسيط الكود

في جميع العروض السابقة ، نحدد دائمًا ملف --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() الذي لا يدعم المتصفح!

يمكنك تطبيق نفس المنطق على جميع العروض التوضيحية التي رأيناها حتى بالنسبة للخطوط المتموجة والنمط. لقد بدأت بشرح مفصل للرياضيات وأعطيت الكود العام ، ولكن قد تجد نفسك بحاجة إلى رمز أسهل في حالة استخدام حقيقية. هذا ما أفعله طوال الوقت. نادرًا ما أستخدم الكود العام ، لكنني أعتبر دائمًا إصدارًا مبسطًا خاصةً أنه في معظم الحالات ، أستخدم بعض القيم المعروفة التي لا تحتاج إلى تخزينها كمتغيرات. (المفسد تنبيه: سأشارك بعض الأمثلة في النهاية!)

القيود على هذا النهج

رياضياً ، يجب أن يمنحنا الكود الذي صنعناه أشكالًا وأنماطًا متموجة مثالية ، لكن في الواقع ، سنواجه بعض النتائج الغريبة. لذا ، نعم ، هذه الطريقة لها حدودها. على سبيل المثال ، المولد عبر الإنترنت قادر على تحقيق نتائج سيئة ، خاصة مع الخطوط المتموجة. يرجع جزء من المشكلة إلى مجموعة معينة من القيم حيث يتم خلط النتيجة ، مثل استخدام قيمة كبيرة لسمك الحد مقارنة بالحجم:

بالنسبة للحالات الأخرى ، فإن المشكلة المتعلقة ببعض التقريب سيؤدي إلى عدم محاذاة وفجوات بين الموجات:

ومع ذلك ، ما زلت أعتقد أن الطريقة التي غطيناها تظل جيدة لأنها تنتج موجات سلسة في معظم الحالات ، ويمكننا بسهولة تجنب النتائج السيئة من خلال اللعب بقيم مختلفة حتى نحصل عليها بشكل مثالي.

اختتام

آمل أنه بعد هذه المقالة ، لن تتعثر بعد الآن مع التجربة والخطأ لبناء شكل أو نمط متموج. بالإضافة الى إلى المولد عبر الإنترنت، لديك كل الأسرار الرياضية وراء إنشاء أي نوع من الموجات التي تريدها!

تنتهي المقالة هنا ولكن لديك الآن أداة قوية لإنشاء تصميمات خيالية تستخدم أشكالًا متموجة. إليك مصدر إلهام لتبدأ ...

وماذا عنك؟ استخدم منشئ الإنترنت الخاص بي (أو اكتب الكود يدويًا إذا كنت قد تعلمت بالفعل كل الرياضيات عن ظهر قلب) وأظهر لي إبداعاتك! دعونا نحصل على مجموعة جيدة في قسم التعليقات.