Kuinka rakentaa piirtosovellus p5js: n avulla

Weekly Coding Challengen viikon # 5 teema on:

Piirustussovelluksen luominen

Tämä on ensimmäinen sovellus, jota rakennamme #weeklyCodingChallenge -ohjelmassa. Toistaiseksi olemme rakentaneet pienempiä projekteja, joten tämä on aika jännittävää, jos kysyt minulta!

Tässä artikkelissa käytämme p5js: tä, piirustuskirjastoa, piirustussovelluksen rakentamiseen:

Katso CodePen täältä:

Jos haluat lisätietoja p5js: stä ja siitä, mitä se tekee, voit käydä heidän virallisilla verkkosivuilla. Pohjimmiltaan käytän sitä, koska se toimii erittäin hyvin selaimen kangaselementin päällä tarjoamalla selkeän sovellusliittymän.

HTML

Kuten yllä olevassa esimerkissä voidaan huomata, näytön vasemmalla puolella on .sivupalkki. Laitamme sisälle "työkalut" - värinvalitsimen, painonvalitsimen ja tyhjennyspainikkeen (roskakorikuvake):

CSS

CSS: n avulla siirrämme sivupalkin ja kaiken sen sisällä vasemmalle puolelle. Muotoilemme sitä hiukan, jotta se näyttäisi mukavammalta (ei mitään hienoa, perus CSS):

Nyt tärkeä osa ...

JS / P5JS

Kuten ehkä huomasit, emme ole lisänneet kankaaselementtiä HTML-koodiin, koska p5js luo sen meille.

P5js-kirjastosta käytämme kahta tärkeää toimintoa:

  • asennus - kutsutaan kerran ohjelman käynnistyessä. Sitä käytetään määrittelemään alkuperäiset ympäristöominaisuudet, kuten näytön koko ja taustaväri.
  • piirtää - kutsutaan heti asennuksen jälkeen (). Draw () -toiminto suorittaa jatkuvasti koodirivit lohkonsa sisällä.

Ennen kuin siirrymme eteenpäin, pysähdytämme hetkeksi katsomaan, mitä haluamme saavuttaa.

Joten pohjimmiltaan haluamme lisätä hiiren painalluksen eventListener kankaaseen, joka alkaa 'piirtää' muotoa sen sisälle niin kauan kuin mouseIsPressed.

Luomme joukon pisteitä, joita aiomme käyttää polun (tai muodon) luomiseen käyttämällä beginShape- ja endShape-menetelmiä tämän muodon piirtämiseksi kankaalle. Muoto rakennetaan yhdistämällä sarja huippupisteitä (katso kärki lisätietoja).

Koska haluamme, että tämä muoto piirretään joka kerta, lisäämme tämän koodin piirtomenetelmän sisään:

Kuten huomaat, p5js: llä on mouseIsPressed -lippua, jonka avulla voimme havaita hiiren painikkeita painettaessa.

Kaikki saattaa näyttää hyvältä toistaiseksi, mutta siinä on iso ongelma. Kun hiiren painike on vapautettu ja yritämme piirtää toisen muodon, edellisen muodon viimeinen piste yhdistetään uuden muodon ensimmäiseen pisteeseen. Tämä ei todellakaan ole sitä, mitä haluamme, joten meidän on muutettava lähestymistapaa hieman.

Sen sijaan, että meillä olisi yksi pistematriisi (polkujoukko), luomme polkujoukon ja tallennamme kaikki sen sisällä olevat polut. Periaatteessa meillä on kaksinkertainen taulukko pisteineen. Tätä varten meidän on myös seurattava nykyistä polkua hiiren edelleen painettaessa. Palautamme tämän ryhmän, kun hiiren painiketta painetaan uudelleen. Hämmentävä? Katsotaanpa koodi ja lyön vetoa, että se tulee selkeämmäksi:

Lisäsin myös joitain kommentteja yllä olevaan koodiin, muista tarkistaa ne.

Hiiren painettu toiminto kutsutaan kerran hiiren painikkeen painamisen jälkeen - p5js-tavaraa!

Loistava! Nyt voimme piirtää yksittäisiä muotoja kankaaseemme!

Viimeinen tehtävä on kytkeä ne HTML-koodiin luomat painikkeet ja käyttää muodon muotoiluun niiden sisällä olevia arvoja:

Ja tällä olemme valmistaneet pienen sovelluksemme! Jee!

Koko JS-koodi

Varmista myös, että tuomat p5js-tiedoston myös HTML-tiedostoon, ennen kuin tulet tätä js-tiedostoa.

johtopäätös

Toivon, että pidit tästä rakentamastamme piirtosovelluksesta. Tähän sovellukseen voidaan lisätä joukko toimintoja, ja haastan sinut antamaan luovalle mielellesi keksimään uusia ideoita!

Entä jos voisit tallentaa piirroksen kuvana (.png tai .jpg)? (voit tehdä tämän p5js-kirjaston avulla).

Tällä hetkellä tarkistamme vain hiiretapahtumat. Ehkä voisit saada sen toimimaan myös mobiililaitteissa selvittämällä kosketustapahtumat? Taivas on raja toiminnallisuuksien määrälle, joka voitaisiin lisätä tähän sovellukseen!

Haluaisin nähdä, mitä aiot rakentaa! Tweet me @ florinpop1705 luoksesi!

Saatat pitää myös muista Weekly Coding Challenge -ohjelman haasteista. Katso heidät täältä.

Nähdään ensi kerralla! Hyvää koodausta!

Alun perin julkaistu osoitteessa www.florin-pop.com.