כיצד ליצור צורות גליות ותבניות ב-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 ל 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() שאין לו תמיכה בדפדפן!

אתה יכול ליישם את אותו היגיון על כל ההדגמות שראינו אפילו עבור הקווים הגליים והתבנית. התחלתי עם הסבר מתמטי מפורט ונתתי את הקוד הגנרי, אבל אתה עלול למצוא את עצמך זקוק לקוד קל יותר במקרה שימוש אמיתי. זה מה שאני עושה כל הזמן. לעתים רחוקות אני משתמש בקוד הגנרי, אבל אני תמיד מחשיב גרסה מפושטת במיוחד שברוב המקרים אני משתמש בכמה ערכים ידועים שאין צורך לאחסן אותם כמשתנים. (התראת ספוילר: אני אשתף כמה דוגמאות בסוף!)

מגבלות לגישה זו

מבחינה מתמטית, הקוד שיצרנו אמור לתת לנו צורות ותבניות גליות מושלמות, אבל במציאות, נתמודד עם כמה תוצאות מוזרות. אז כן, לשיטה הזו יש מגבלות. לדוגמה, המחולל המקוון מסוגל להפיק תוצאות גרועות, במיוחד עם קווים גליים. חלק מהבעיה נובע משילוב מסוים של ערכים שבו התוצאה מעורפלת, כמו שימוש בערך גדול עבור עובי הגבול בהשוואה לגודל:

במקרים האחרים, זו הבעיה הקשורה לעיגול כלשהו שיגרום לאי-יישור ולפערים בין הגלים:

עם זאת, אני עדיין חושב שהשיטה שסיקרנו נשארת טובה מכיוון שהיא מייצרת גלים חלקים ברוב המקרים, ואנחנו יכולים בקלות להימנע מהתוצאות הרעות על ידי משחק עם ערכים שונים עד שנקבל אותה מושלמת.

גלישה את

אני מקווה שאחרי המאמר הזה, לא תתעסק יותר בניסוי וטעייה כדי לבנות צורה גלית או דפוס. בנוסף למחולל המקוון, יש לך את כל הסודות המתמטיים מאחורי יצירת כל סוג של גל שתרצה!

המאמר מסתיים כאן אבל עכשיו יש לך כלי רב עוצמה ליצור עיצובים מפוארים המשתמשים בצורות גליות. הנה השראה להתחיל...

מה איתך? השתמש במחולל המקוון שלי (או כתוב את הקוד באופן ידני אם כבר למדת את כל המתמטיקה בעל פה) והראה לי את היצירות שלך! בואו נעשה אוסף טוב בקטע התגובות.