Kuinka luoda aaltoilevia muotoja ja kuvioita CSS:ssä

Aalto on luultavasti yksi vaikeimmista muodoista CSS:ssä. Pyrimme aina arvioimaan sitä ominaisuuksilla, kuten border-radius ja paljon maagisia numeroita, kunnes saamme jotain, joka tuntuu jotenkin läheltä. Ja se on ennen kuin pääsemme edes aaltoileviin kuvioihin, jotka ovat vaikeampia.

"SVG se!" saatat sanoa, ja olet todennäköisesti oikeassa, että se on parempi tapa edetä. Mutta näemme, että CSS voi tehdä mukavia aaltoja ja sen koodin ei tarvitse olla hullu. Ja arvaa mitä? minulla on online-generaattori tehdäksesi siitä vielä triviaalemman!

Jos pelaat generaattorilla, voit nähdä, että sen sylkemässä CSS:ssä on vain kaksi gradienttia ja CSS-maskiominaisuus – vain nämä kaksi asiaa, ja voimme tehdä minkä tahansa aaltomuodon tai kuvion. Puhumattakaan siitä, että voimme helposti hallita aaltojen kokoa ja kaarevuutta samalla kun olemme sitä.

Jotkut arvot voivat näyttää tältä "maagisia numeroita", mutta niiden takana on itse asiassa logiikka, ja me selvitämme koodin ja löydämme kaikki salaisuudet aaltojen luomisen takana.

Tämä artikkeli on jatkoa edellinen jossa rakensin kaikenlaisia ​​erilaisia ​​siksak-, skooppi-, scaloped- ja kyllä, aaltoilevia reunuksia. Suosittelen lämpimästi tarkistamaan artikkelin, koska se käyttää samaa tekniikkaa, jota käsittelemme tässä, mutta yksityiskohtaisemmin.

Matematiikka aaltojen takana

Tarkkaan ottaen aaltoilevien muotojen takana ei ole yhtä maagista kaavaa. Mitä tahansa muotoa, jossa käyrät menevät ylös ja alas, voidaan kutsua aalloksi, joten emme aio rajoittua monimutkaiseen matematiikkaan. Sen sijaan toistamme aallon geometrian perusteiden avulla.

Aloitetaan yksinkertaisella esimerkillä käyttämällä kahta ympyrän muotoa:

Meillä on kaksi ympyrää, joilla on sama säde vierekkäin. Näetkö tuon punaisen viivan? Se peittää ensimmäisen ympyrän yläosan ja toisen alaosan. Kuvittele nyt, että otat tämän rivin ja toistat sen.

Näemme jo aallon. Täytä nyt alaosa (tai yläosa), jotta saadaan seuraava:

Tada! Meillä on aaltomainen muoto, jota voimme ohjata yhdellä ympyrän säteiden muuttujalla. Tämä on yksi helpoimmista aalloista, joita voimme tehdä, ja se on se, jolla näytin this edellinen artikkeli

Lisätään hieman monimutkaisuutta ottamalla ensimmäinen kuva ja siirtämällä ympyröitä hieman:

Meillä on edelleen kaksi ympyrää, joilla on sama säde, mutta ne eivät ole enää vaakatasossa. Tässä tapauksessa punainen viiva ei enää kata puolta kunkin ympyrän alueesta, vaan sen sijaan pienemmän alueen. Tämä alue on rajoitettu punaisella katkoviivalla. Tämä viiva leikkaa pisteen, jossa molemmat ympyrät kohtaavat.

Ota nyt tuo viiva ja toista se, niin saat uuden aallon, tasaisemman.

Luulen, että ymmärrät idean. Hallitsemalla ympyröiden sijaintia ja kokoa voimme luoda minkä tahansa haluamamme aallon. Voimme jopa luoda niille muuttujia, joita kutsun P ja SVastaavasti.

Olet luultavasti huomannut, että online-generaattorissa ohjaamme aaltoa käyttämällä kahta tuloa. Ne kartoitetaan yllä oleviin muuttujiin. S on "aallon koko" ja P on "aallon kaarevuus".

Olen määrittelevä P as P = m*S jossa m on muuttuja, jota säädät, kun päivität aallon kaarevuutta. Näin saamme aina saman kaarevuuden, vaikka päivittäisimme S.

m voi olla mikä tahansa arvo välillä 0 ja 2. 0 antaa meille ensimmäisen erityistapauksen, jossa molemmat ympyrät on kohdistettu vaakasuoraan. 2 on eräänlainen maksimiarvo. Voimme mennä isommaksi, mutta muutaman testin jälkeen huomasin, että jotain yllä olevaa 2 tuottaa huonoja, litteitä muotoja.

Älkäämme unohtako ympyrän sädettä! Se voidaan myös määritellä käyttämällä S ja P kuten tämä:

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

Kun P on yhtä suuri kuin 0, meillä tulee olemaan R = S/2.

Meillä on kaikki, jotta voimme muuttaa kaiken tämän gradienteiksi CSS:ssä!

Gradienttien luominen

Aallojemme käyttävät ympyröitä, ja kun puhumme ympyröistä, puhumme säteittäisistä gradienteista. Ja koska kaksi ympyrää määrittelevät aaltomme, käytämme loogisesti kahta säteittäistä gradienttia.

Aloitamme erityistapauksesta, jossa P on yhtä suuri kuin 0. Tässä on esimerkki ensimmäisestä gradientista:

Tämä gradientti luo ensimmäisen kaarevuuden täyttäessään koko pohja-alueen - niin sanotusti aallon "veden".

.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 muuttuja määrittää säteen gradientin säteen ja koon. Jos vertaamme sitä S muuttuja, niin se on yhtä suuri kuin S/2.

Lisätään nyt toinen gradientti:

Toinen gradientti on vain ympyrä, joka täydentää aaltomme:

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

Jos valitset edellinen artikkeli huomaat, että toistan vain sen, mitä tein siellä.

Seurasin molempia artikkeleita, mutta gradientin kokoonpanot eivät ole samat.

Tämä johtuu siitä, että voimme saavuttaa saman tuloksen käyttämällä erilaisia ​​gradienttikonfiguraatioita. Huomaat pienen eron kohdistuksessa, jos vertaat molempia kokoonpanoja, mutta temppu on sama. Tämä voi olla hämmentävää, jos et tunne kaltevuudet, mutta älä huoli. Harjoittelemalla niihin tottuu ja huomaat itse, että eri syntaksi voi johtaa samaan tulokseen.

Tässä on koko koodi ensimmäiselle aallolle:

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

Otetaan nyt tämä koodi ja sovitetaan se siihen, missä otamme käyttöön muuttujan, joka tekee tästä täysin uudelleenkäytettävän minkä tahansa haluamamme aallon luomiseen. Kuten näimme edellisessä osiossa, tärkein temppu on siirtää ympyröitä niin, etteivät ne ole enää kohdakkain, joten päivitetään jokaisen sijainti. Siirrämme ensimmäisen ylös ja toisen alas.

Koodimme näyttää tältä:

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

Olen esitellyt uuden --p muuttuja, jota käytetään määrittämään kunkin ympyrän keskipiste. Ensimmäinen gradientti on käytössä 50% calc(-1*var(--p)), joten sen keskikohta liikkuu ylöspäin, kun toinen on käytössä calc(var(--size) + var(--p)) siirtääksesi sen alas.

Demo on tuhannen sanan arvoinen:

Ympyrät eivät ole kohdakkain eivätkä kosketa toisiaan. Sijoitimme ne kaukana toisistaan ​​muuttamatta niiden säteitä, joten menetimme aaltomme. Mutta voimme korjata asiat käyttämällä samaa matematiikkaa, jota käytimme aiemmin uuden säteen laskemiseen. Muista se R = sqrt(P² + S²)/2. Meidän tapauksessamme --size on yhtä suuri kuin S/2; sama varten --p joka on myös yhtä suuri P/2 koska liikutamme molempia ympyröitä. Joten niiden keskipisteiden välinen etäisyys on kaksinkertainen arvoon verrattuna --p tätä varten:

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

Se antaa meille tuloksen 55.9px.

Meidän aaltomme on palannut! Liitä tämä yhtälö CSS:ään:

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

Tämä on kelvollinen CSS-koodi. sqrt() on osa spesifikaatiota, mutta tätä kirjoittaessani selain ei tue sitä. Tämä tarkoittaa, että tarvitsemme ripaus JavaScriptiä tai Sassia laskeaksemme tämän arvon, kunnes saamme laajemman sqrt() Tukea.

Tämä on todella siistiä: tarvitset vain kaksi gradienttia saadaksesi viileän aallon, jota voit soveltaa mihin tahansa elementtiin käyttämällä mask omaisuutta. Ei enää yritystä ja erehdystä – sinun tarvitsee vain päivittää kaksi muuttujaa ja olet valmis!

Aallon kääntäminen

Entä jos haluamme aallot kulkevan toiseen suuntaan, missä täytämme "taivaan" "veden" sijaan. Usko tai älä, meidän tarvitsee vain päivittää kaksi arvoa:

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

Tein siellä vain lisäyksen, joka on yhtä suuri kuin 100%, korostettu yllä. Tässä tulos:

Voimme harkita ystävällisempää syntaksia käyttämällä avainsanaarvoja, jotta se olisi entistä helpompaa:

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

Käytämme left ja bottom avainsanoja sivujen ja siirtymän määrittämiseksi. Oletuksena selain on oletuksena left ja top - siksi käytämme 100% siirtääksesi elementin alas. Todellisuudessa siirrämme sen pois top by 100%, joten se on oikeastaan ​​sama kuin sanoa bottom. Paljon helpompi lukea kuin matematiikka!

Tämän päivitetyn syntaksin avulla meidän tarvitsee vain vaihtaa bottom varten top — tai päinvastoin — muuttaaksesi aallon suuntaa.

Ja jos haluat saada sekä ylä- että alaaaltoja, yhdistämme kaikki gradientit yhteen ilmoitukseen:

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

Jos tarkistat koodin, huomaat, että sen lisäksi, että olen yhdistänyt kaikki kaltevuudet, olen myös vähentänyt niiden korkeutta 100% että 51% niin, että ne molemmat peittävät puolet elementistä. Joo, 51%. Tarvitsemme sen pienen ylimääräisen prosentin pientä päällekkäisyyttä varten, jotta vältetään aukot.

Entä vasen ja oikea puoli?

Se on kotitehtäväsi! Otetaan se, mitä teimme ylä- ja alasivuilla ja yritä päivittää arvot oikean ja vasemman puolen arvojen saamiseksi. Älä huoli, se on helppoa, ja sinun tarvitsee vain vaihtaa arvoja.

Jos sinulla on ongelmia, voit aina käyttää online-generaattori tarkistaaksesi koodin ja visualisoidaksesi tuloksen.

Aaltoilevat linjat

Aiemmin teimme ensimmäisen aallon punaisella viivalla ja täytimme sitten elementin alaosan. Entä se aaltoviiva? Sekin on aalto! Vielä parempi on, jos voimme ohjata sen paksuutta muuttujalla, jotta voimme käyttää sitä uudelleen. Tehdään se!

Emme aio aloittaa tyhjästä, vaan otamme edellisen koodin ja päivitämme sen. Ensimmäinen asia on päivittää liukuvärien väripysähdykset. Molemmat gradientit alkavat läpinäkyvästä väristä läpinäkymättömään tai päinvastoin. Viivan tai reunuksen simuloimiseksi meidän on aloitettava läpinäkyvästä, siirryttävä läpinäkymättömään ja sitten takaisin läpinäkyvään:

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

Luulen, että arvasit jo, että --b muuttuja on se, mitä käytämme viivan paksuuden ohjaamiseen. Sovelletaan tätä gradientteihimme:

Joo, tulos on kaukana aaltoviivasta. Mutta tarkastelemalla tarkasti voimme nähdä, että yksi gradientti luo oikein pohjakaarevuuden. Joten meidän tarvitsee vain korjata toinen gradientti. Täyden ympyrän pitämisen sijaan tehdään osittainen gradientti kuten toinen.

Vielä kaukana, mutta meillä on molemmat tarvitsemamme kaarevuus! Jos tarkistat koodin, näet, että meillä on kaksi identtistä gradienttia. Ainoa ero on niiden sijainti:

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

Nyt meidän on säädettävä koko ja sijainti lopulliseen muotoon. Emme enää tarvitse kaltevuuden olevan täyskorkeaa, joten voimme vaihtaa 100% tämän kanssa:

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

Tämän arvon takana ei ole matemaattista logiikkaa. Sen täytyy olla vain tarpeeksi suuri kaarevuutta varten. Näemme sen vaikutuksen kuvioon hetken kuluttua. Päivitetään sillä välin myös sijaintia niin, että kaltevuudet keskitetään pystysuoraan:

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

Ei vieläkään aivan perillä:

Toisen gradientin on liikuttava hieman alaspäin ja toisen hieman ylöspäin. Molempien täytyy liikkua puolet pituudestaan.

Olemme melkein siellä! Tarvitsemme pienen korjauksen, jotta säde olisi täydellisesti päällekkäinen. Molempien rivien on siirrettävä puolet reunasta (--b) paksuus:

Me saimme sen! Täydellinen aaltoviiva, jota voimme helposti säätää muutamaa muuttujaa ohjaamalla:

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

Tiedän, että logiikan ymmärtäminen vaatii hieman. Se on hienoa, ja kuten sanoin, aaltoilevan muodon luominen CSS:ssä ei ole helppoa, puhumattakaan sen takana olevasta hankalasta matematiikasta. Siksi online-generaattori on hengenpelastaja – voit helposti saada lopullisen koodin, vaikka et täysin ymmärtäisi sen taustalla olevaa logiikkaa.

Aaltoilevat kuviot

Voimme tehdä kuvion juuri luomastamme aaltoviivasta!

Voi ei, kuvion koodista tulee vielä vaikeampi ymmärtää!

Ei lainkaan! Meillä on jo koodi. Meidän tarvitsee vain poistaa repeat-x siitä, mitä meillä jo on, ja tada. 🎉

Hieno aaltoileva kuvio. Muistatko yhtälön, jonka sanoin, että palaamme uudelleen?

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

No, tämä ohjaa kuvion viivojen välistä etäisyyttä. Voimme tehdä siitä muuttujan, mutta monimutkaisempaa ei tarvita. En edes käytä siihen muuttujaa generaattorissa. Ehkä muutan sen myöhemmin.

Tässä sama kuvio eri suuntaan:

Annan sinulle koodin tuossa esittelyssä, mutta pyydän sinun analysoivan sitä ja ymmärtävän, mitä muutoksia tein saadakseni sen tapahtumaan.

Koodin yksinkertaistaminen

Kaikissa aiemmissa demoissa määrittelemme aina --size ja --p itsenäisesti. Mutta muistatko kuinka mainitsin aiemmin, että online-generaattori arvioi P yhtä suuri kuin m*S, Jossa m hallitsee aallon kaarevuutta? Määrittämällä kiinteän kertoimen voimme työskennellä yhden tietyn aallon kanssa ja koodista voi tulla helpompaa. Tätä tarvitsemme useimmissa tapauksissa: tietyn aaltoilevan muodon ja muuttujan sen koon hallitsemiseksi.

Päivitetään koodimme ja esitellään m muuttuja:

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

Kuten näet, emme enää tarvitse --p muuttuja. Vaihdoin sen kanssa var(--m)*var(--size)ja optimoinut osan matematiikasta vastaavasti. Nyt, jos haluamme työskennellä tietyn aaltoilevan muodon kanssa, voimme jättää pois --m muuttuja ja korvaa se kiinteällä arvolla. Kokeillaan .8 esimerkiksi.

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

Katso kuinka koodi on nyt helpompi? Vain yksi muuttuja aallon ohjaamiseen, eikä sinun tarvitse enää luottaa sqrt() jolla ei ole selaintukea!

Voit soveltaa samaa logiikkaa kaikkiin demoihin, joita näimme, jopa aaltoileville viivoille ja kuviolle. Aloitin yksityiskohtaisella matemaattisella selityksellä ja annoin yleisen koodin, mutta saatat joutua tarvitsemaan helpompaa koodia todellisessa käyttötapauksessa. Tätä teen koko ajan. Käytän harvoin geneeristä koodia, mutta pidän aina yksinkertaistettua versiota, varsinkin, että useimmiten käytän joitain tunnettuja arvoja, joita ei tarvitse tallentaa muuttujiksi. (Spoileri hälytys: Kerron lopuksi muutaman esimerkin!)

Tämän lähestymistavan rajoitukset

Matemaattisesti tekemämme koodin pitäisi antaa meille täydelliset aaltoilevat muodot ja kuviot, mutta todellisuudessa kohtaamme outoja tuloksia. Joten kyllä, tällä menetelmällä on rajoituksensa. Esimerkiksi online-generaattori pystyy tuottamaan huonoja tuloksia, etenkin aaltoilevilla viivoilla. Osa ongelmasta johtuu tietystä arvojen yhdistelmästä, jossa tulos sekoitetaan, kuten suuren arvon käyttäminen reunuksen paksuudelle verrattuna kokoon:

Muissa tapauksissa ongelma liittyy johonkin pyöristämiseen, joka johtaa virheisiin ja aukkoihin aaltojen välillä:

Olen kuitenkin sitä mieltä, että käsittelemämme menetelmä on edelleen hyvä, koska se tuottaa tasaisia ​​aaltoja useimmissa tapauksissa, ja voimme helposti välttää huonot tulokset pelaamalla eri arvoilla, kunnes saamme sen täydelliseksi.

Käärimistä

Toivon, että tämän artikkelin jälkeen et enää haparoi yrityksen ja erehdyksen kanssa rakentaaksesi aaltoilevaa muotoa tai kuviota. Lisäksi online-generaattoriin, sinulla on kaikki matemaattiset salaisuudet minkä tahansa aallon luomisen takana!

Artikkeli päättyy tähän, mutta nyt sinulla on tehokas työkalu luodaksesi upeita malleja, joissa käytetään aaltoilevia muotoja. Tässä inspiraatiota, jolla pääset alkuun…

Entä sinä? Käytä online-generaattoriani (tai kirjoita koodi manuaalisesti, jos olet jo oppinut kaiken matematiikan ulkoa) ja näytä luomuksesi! Otetaan hyvä kokoelma kommenttiosiossa.