Dalga muhtemelen CSS'de yapılması en zor şekillerden biridir. Her zaman aşağıdaki gibi özelliklerle yaklaşmaya çalışırız: border-radius ve çok yakın hissettiren bir şey elde edene kadar bir sürü sihirli sayı. Ve bu, daha zor olan dalgalı desenlere girmeden önce.

"SVG yap!" diyebilirsiniz ve muhtemelen bunun daha iyi bir yol olduğu konusunda haklısınız. Ancak CSS'nin güzel dalgalar oluşturabileceğini ve bunun kodunun tamamen çılgınca olması gerekmediğini göreceğiz. Ve tahmin et ne oldu? Sahibim çevrimiçi bir jeneratör daha da önemsiz hale getirmek için!

Jeneratörle oynarsanız, ortaya çıkardığı CSS'nin yalnızca iki gradyan ve bir CSS maskesi özelliği olduğunu görebilirsiniz - yalnızca bu iki şey ve herhangi bir dalga şekli veya deseni yapabiliriz. Bu sırada dalgaların boyutunu ve eğriliğini kolayca kontrol edebileceğimizden bahsetmiyorum bile.

Değerlerden bazıları “ gibi görünebilir.sihirli sayılar” ama aslında bunların arkasında bir mantık var ve kodu inceleyeceğiz ve dalga oluşturmanın ardındaki tüm sırları keşfedeceğiz.

Bu makale, bir önceki her türden farklı zikzak, dürbünlü, fistolu ve evet, dalgalı sınır bordürleri yaptığım yer. Burada ele alacağımız tekniğin aynısını kullandığından, bu makaleyi kontrol etmenizi şiddetle tavsiye ederim, ancak daha ayrıntılı olarak.

Dalgaların arkasındaki matematik

Kesin konuşmak gerekirse, dalgalı şekillerin arkasında tek bir sihirli formül yoktur. Yukarı ve aşağı giden eğrileri olan herhangi bir şekle dalga denebilir, bu nedenle kendimizi karmaşık matematikle sınırlamayacağız. Bunun yerine, geometrinin temellerini kullanarak bir dalgayı yeniden üreteceğiz.

İki daire şekli kullanarak basit bir örnekle başlayalım:

Yan yana aynı yarıçapa sahip iki dairemiz var. Şu kırmızı çizgiyi görüyor musun? Birinci dairenin üst yarısını ve ikinci dairenin alt yarısını kaplar. Şimdi o satırı alıp tekrarladığınızı hayal edin.

Dalgayı zaten görüyoruz. Şimdi aşağıdakini elde etmek için alt kısmı (veya üst kısmı) dolduralım:

Tada! Daire yarıçapları için bir değişken kullanarak kontrol edebileceğimiz dalgalı bir şeklimiz var. Bu yapabileceğimiz en kolay dalgalardan biri ve benim gösterdiğim dalga this önceki haber

İlk örneği alıp daireleri biraz hareket ettirerek biraz karmaşıklık ekleyelim:

Hala aynı yarıçapa sahip iki dairemiz var ama artık yatay olarak hizalanmış değiller. Bu durumda, kırmızı çizgi artık her dairenin alanının yarısını değil, bunun yerine daha küçük bir alanı kaplıyor. Bu alan kesikli kırmızı çizgi ile sınırlıdır. Bu çizgi, her iki dairenin birleştiği noktayı kesiyor.

Şimdi bu satırı alın ve tekrarlayın ve başka bir dalga elde edin, daha yumuşak bir dalga.

Sanırım fikri anladın. Dairelerin konumunu ve boyutunu kontrol ederek istediğimiz dalgayı yaratabiliriz. Hatta onlar için değişkenler bile oluşturabiliriz, buna ben diyeceğim. P ve S, Sırasıyla.

Çevrimiçi oluşturucuda dalgayı iki giriş kullanarak kontrol ettiğimizi muhtemelen fark etmişsinizdir. Yukarıdaki değişkenlerle eşleşirler. S “dalganın boyutu” ve P "dalganın eğriliği" dir.

tanımlıyorum P as P = m*S nerede m dalganın eğriliğini güncellerken ayarladığınız değişkendir. Bu, S'yi güncellesek bile her zaman aynı eğriliğe sahip olmamızı sağlar.

m arasında herhangi bir değer olabilir 0 ve 2. 0 bize her iki dairenin de yatay olarak hizalandığı ilk özel durumu verecektir. 2 bir tür maksimum değerdir. Daha da büyüyebiliriz, ancak birkaç testten sonra yukarıdaki herhangi bir şeyin olmadığını buldum. 2 kötü, düz şekiller üretir.

Çemberimizin yarıçapını unutmayalım! Bu, kullanılarak da tanımlanabilir S ve P bunun gibi:

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

Ne zaman P eşittir 0sahip olacağız R = S/2.

Tüm bunları CSS'de degradelere dönüştürmeye başlamak için her şeye sahibiz!

degradeler oluşturma

Dalgalarımız daireleri kullanır ve dairelerden bahsederken radyal gradyanlardan bahsederiz. Ve dalgamızı iki daire tanımladığından, mantıksal olarak iki radyal gradyan kullanacağız.

Belirli bir durumla başlayacağız P eşittir 0. İşte ilk degradenin çizimi:

Bu gradyan, tabiri caizse dalganın "suyu" olan tüm alt alanı doldururken ilk eğriliği oluşturur.

.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;
}

The --size değişkeni, radyal degradenin yarıçapını ve boyutunu tanımlar. ile karşılaştırırsak S değişken, o zaman eşittir S/2.

Şimdi ikinci gradyanı ekleyelim:

İkinci gradyan, dalgamızı tamamlamak için bir daireden başka bir şey değildir:

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

işaretlerseniz önceki makale orada zaten yaptığım şeyi basitçe tekrarladığımı göreceksiniz.

Her iki makaleyi de takip ettim ancak gradyan konfigürasyonları aynı değil.

Çünkü farklı gradyan konfigürasyonları kullanarak aynı sonuca ulaşabiliriz. Her iki konfigürasyonu karşılaştırırsanız hizalamada küçük bir fark göreceksiniz, ancak hile aynı. Degradelere aşina değilseniz bu kafa karıştırıcı olabilir, ancak endişelenmeyin. Biraz pratik yaparak bunlara alışırsınız ve farklı sözdizimlerinin aynı sonuca götürebileceğini kendiniz görürsünüz.

İşte ilk dalgamızın tam kodu:

.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;
}

Şimdi bu kodu alıp, istediğimiz herhangi bir dalgayı yaratmak için tamamen yeniden kullanılabilir hale getiren bir değişkeni tanıttığımız yere ayarlayalım. Önceki bölümde gördüğümüz gibi, asıl püf nokta daireleri hareket ettirerek artık hizalanmamalarını sağlamaktır, bu yüzden her birinin konumunu güncelleyelim. İlkini yukarı, ikincisini aşağı hareket ettireceğiz.

Kodumuz şöyle görünecek:

.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;
}

yeni tanıttım --p her dairenin merkez konumunu tanımlamak için onu kullanan değişken. İlk degrade kullanıyor 50% calc(-1*var(--p)), yani ikincisi kullanılırken merkezi yukarı doğru hareket eder calc(var(--size) + var(--p)) aşağı taşımak için.

Bir demo bin kelimeye bedeldir:

Daireler ne hizalıdır ne de birbirine temas eder. Yarıçaplarını değiştirmeden onları birbirinden uzaklaştırdık, bu yüzden dalgamızı kaybettik. Ancak daha önce yeni yarıçapı hesaplamak için kullandığımız aynı matematiği kullanarak bazı şeyleri düzeltebiliriz. Bunu hatırla R = sqrt(P² + S²)/2. Bizim durumumuzda, --size eşittir S/2; için aynı --p bu da eşittir P/2 çünkü her iki daireyi de hareket ettiriyoruz. Bu nedenle, merkez noktaları arasındaki mesafe değerinin iki katıdır. --p bunun için:

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

Bu bize bir sonuç verir 55.9px.

Dalgamız geri döndü! Bu denklemi CSS'imize yerleştirelim:

.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;
}

Bu geçerli bir CSS kodudur. sqrt() şartnamenin bir parçasıdır, ancak bunu yazdığım sırada, bunun için tarayıcı desteği yok. Bu, genişleyene kadar bu değeri hesaplamak için bir dizi JavaScript veya Sass'a ihtiyacımız olduğu anlamına gelir. sqrt() destekler.

Bu oldukça havalı: kullanarak herhangi bir öğeye uygulayabileceğiniz soğuk bir dalga elde etmek için gereken tek şey iki gradyan. mask Emlak. Artık deneme yanılma yok — ihtiyacınız olan tek şey iki değişkeni güncellemek ve hazırsınız!

Dalgayı tersine çevirmek

Ya dalgaların "su" yerine "gökyüzünü" doldurduğumuz diğer yöne gitmesini istiyorsak? İster inanın ister inanmayın, tek yapmamız gereken iki değeri güncellemek:

.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;
}

Tek yaptığım, şuna eşit bir ofset eklemek 100%, yukarıda vurgulanmıştır. İşte sonuç:

Bunu daha da kolaylaştırmak için anahtar kelime değerlerini kullanarak daha kolay bir sözdizimi düşünebiliriz:

.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;
}

Kullanıyoruz left ve bottom kenarları ve ofseti belirtmek için anahtar sözcükler. Varsayılan olarak, tarayıcı varsayılan olarak left ve top — bu yüzden kullanıyoruz 100% öğeyi en alta taşımak için. Gerçekte, onu şu andan itibaren taşıyoruz: top by 100%, bu yüzden gerçekten söylemekle aynı şey bottom. Okuması matematikten çok daha kolay!

Bu güncellenmiş sözdizimi ile tek yapmamız gereken takas bottom için top - veya tam tersi - dalganın yönünü değiştirmek için.

Hem üst hem de alt dalgaları elde etmek istiyorsanız, tüm gradyanları tek bir bildirimde birleştiriyoruz:

.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;
}

Kodu kontrol ederseniz, tüm degradeleri birleştirmenin yanı sıra yüksekliklerini de azalttığımı göreceksiniz. 100% için 51% böylece her ikisi de elemanın yarısını kaplar. Evet, 51%. Boşlukları önleyen küçük bir örtüşme için bu fazladan yüzdeye ihtiyacımız var.

Peki ya sol ve sağ taraflar?

Bu senin ödevin! Üst ve alt taraflarla yaptığımızı alın ve sağ ve sol değerleri elde etmek için değerleri güncellemeye çalışın. Endişelenmeyin, bu kolay ve yapmanız gereken tek şey değerleri değiştirmek.

Sorun yaşarsanız, her zaman kullanabilirsiniz çevrimiçi jeneratör kodu kontrol etmek ve sonucu görselleştirmek için.

dalgalı çizgiler

Daha önce, ilk dalgamızı kırmızı bir çizgi kullanarak yaptık ve ardından elemanın alt kısmını doldurduk. Şu dalgalı çizgiye ne dersin? Bu da bir dalga! Daha da iyisi, kalınlığını bir değişkenle kontrol edebilirsek yeniden kullanabiliriz. Haydi Yapalım şunu!

Sıfırdan başlamayacağız, bunun yerine önceki kodu alıp güncelleyeceğiz. Yapılacak ilk şey degradelerin renk duraklarını güncellemektir. Her iki gradyan da saydam bir renkten opak bir renge doğru başlar veya tersi de geçerlidir. Bir çizgiyi veya kenarlığı simüle etmek için şeffaftan başlamalı, opak'a gitmeli ve ardından tekrar şeffafa dönmeliyiz:

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

Bence zaten tahmin ettin --b değişken, çizgi kalınlığını kontrol etmek için kullandığımız şeydir. Bunu gradyanlarımıza uygulayalım:

Evet, sonuç dalgalı bir çizgiden uzak. Ancak yakından baktığımızda, bir gradyanın doğru bir şekilde alt eğriliği oluşturduğunu görebiliriz. Yani, gerçekten yapmamız gereken tek şey ikinci gradyanı düzeltmek. Tam bir daire tutmak yerine, diğer gradyan gibi kısmi bir daire yapalım.

Hâlâ çok uzaktayız ama ihtiyacımız olan iki eğriliğe de sahibiz! Kodu kontrol ederseniz, iki özdeş degradeye sahip olduğumuzu göreceksiniz. Tek fark, konumlandırmalarıdır:

.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%;
}

Şimdi son şekil için boyutu ve konumu ayarlamamız gerekiyor. Artık gradyanın tam yükseklikte olmasına ihtiyacımız yok, bu yüzden değiştirebiliriz 100% Bununla:

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

Bu değerin arkasında matematiksel bir mantık yoktur. Sadece eğrilik için yeterince büyük olması gerekir. Desen üzerindeki etkisini birazdan göreceğiz. Bu arada, degradeleri dikey olarak ortalamak için konumu da güncelleyelim:

.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;
}

Hala tam olarak orada değil:

Bir degradenin biraz aşağı, diğerinin biraz yukarı hareket etmesi gerekir. Her ikisinin de boylarının yarısı kadar hareket etmesi gerekiyor.

Neredeyse geldik! Mükemmel bir örtüşmeye sahip olmak için yarıçap için küçük bir düzeltmeye ihtiyacımız var. Her iki çizginin de kenarlığın yarısı kadar kaydırılması gerekir (--b) kalınlık:

Anladık! Birkaç değişkeni kontrol ederek kolayca ayarlayabileceğimiz mükemmel bir dalgalı çizgi:

.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;
}

Mantığı kavramanın biraz zaman aldığını biliyorum. Sorun değil ve dediğim gibi, CSS'de dalgalı bir şekil oluşturmak kolay değil, arkasındaki zorlu matematikten bahsetmiyorum bile. bu yüzden çevrimiçi jeneratör bir cankurtarandır — arkasındaki mantığı tam olarak anlamasanız bile son kodu kolayca alabilirsiniz.

dalgalı desenler

Az önce oluşturduğumuz dalgalı çizgiden bir desen yapabiliriz!

Ah hayır, kalıbın kodunu anlamak daha da zor olacak!

Hiç de bile! Kodumuz zaten var. Tek yapmamız gereken kaldırmak repeat-x zaten sahip olduklarımızdan ve tada. 🎉

Güzel bir dalgalı model. Tekrar gözden geçireceğimizi söylediğim denklemi hatırlıyor musun?

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

Desendeki çizgiler arasındaki mesafeyi kontrol eden şey budur. Bundan bir değişken çıkarabiliriz ama daha fazla karmaşıklığa gerek yok. Jeneratörde bunun için bir değişken bile kullanmıyorum. Belki sonra değiştiririm.

İşte aynı model farklı bir yöne gidiyor:

Size bu demodaki kodu sağlıyorum, ancak onu incelemenizi ve bunu gerçekleştirmek için ne gibi değişiklikler yaptığımı anlamanızı istiyorum.

Kodu basitleştirme

Önceki tüm demolarda, her zaman --size ve --p bağımsız. Ancak daha önce çevrimiçi oluşturucunun değerlendirdiğinden nasıl bahsettiğimi hatırlıyor musunuz? P eşit olarak m*S, Burada m dalganın eğriliğini kontrol eder mi? Sabit bir çarpan tanımlayarak, belirli bir dalga ile çalışabilir ve kodu daha kolay hale getirebiliriz. Çoğu durumda ihtiyacımız olan şey budur: belirli bir dalgalı şekil ve boyutunu kontrol etmek için bir değişken.

Kodumuzu güncelleyelim ve tanıtalım m değişken:

.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;
  }

Gördüğünüz gibi artık ihtiyacımız yok. --p değişken. ile değiştirdim var(--m)*var(--size)ve matematiğin bir kısmını buna göre optimize etti. Şimdi, belirli bir dalgalı şekil ile çalışmak istiyorsak, --m değişken ve sabit bir değerle değiştirin. Hadi deneyelim .8 örneğin.

--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;

Kodun şimdi nasıl daha kolay olduğunu gördünüz mü? Dalganızı kontrol etmek için yalnızca bir değişken, artı artık güvenmenize gerek yok sqrt() tarayıcı desteği olmayan!

Dalgalı çizgiler ve desen için bile aynı mantığı gördüğümüz tüm demolara uygulayabilirsiniz. Ayrıntılı bir matematiksel açıklamayla başladım ve genel kodu verdim, ancak gerçek bir kullanım durumunda kendinizi daha kolay koda ihtiyaç duyarken bulabilirsiniz. Her zaman yaptığım şey bu. Genel kodu nadiren kullanırım, ancak her zaman basitleştirilmiş bir sürümü düşünürüm, özellikle çoğu durumda değişken olarak depolanması gerekmeyen bazı bilinen değerleri kullanırım. (Spoiler uyarısı: Sonunda birkaç örnek paylaşacağım!)

Bu yaklaşımın sınırlamaları

Matematiksel olarak yaptığımız kod bize mükemmel dalgalı şekiller ve desenler vermeli ama gerçekte bazı garip sonuçlarla karşılaşacağız. Yani, evet, bu yöntemin sınırlamaları vardır. Örneğin, çevrimiçi oluşturucu, özellikle dalgalı çizgilerle kötü sonuçlar üretebilir. Sorunun bir kısmı, sınır kalınlığı için boyuta kıyasla büyük bir değer kullanmak gibi, sonucun karıştırıldığı belirli bir değer kombinasyonundan kaynaklanmaktadır:

Diğer durumlarda, bazı yuvarlamalarla ilgili sorun, dalgalar arasında yanlış hizalamaya ve boşluklara neden olur:

Bununla birlikte, ele aldığımız yöntemin hala iyi olduğunu düşünüyorum çünkü çoğu durumda düzgün dalgalar üretiyor ve mükemmel olana kadar farklı değerlerle oynayarak kötü sonuçlardan kolayca kaçınabiliriz.

Tamamlayan

Umarım bu makaleden sonra dalgalı bir şekil veya desen oluşturmak için deneme yanılma yoluyla uğraşmayacaksınız. Ek olarak çevrimiçi oluşturucuya, istediğiniz dalgayı yaratmanın ardındaki tüm matematik sırlarına sahipsiniz!

Makale burada sona eriyor ama artık dalgalı şekiller kullanan süslü tasarımlar yaratmak için güçlü bir araca sahipsiniz. İşte başlamanız için ilham…

Senden ne haber? Çevrimiçi oluşturucumu kullanın (veya zaten tüm matematiği ezberlediyseniz kodu manuel olarak yazın) ve bana kreasyonlarınızı gösterin! Yorum kısmında güzel bir derleme yapalım.