Kuidas luua jooniserakendust p5js abil

Nädala kodeerimise väljakutse 5. nädala teema on:

Joonistusrakenduse loomine

See on esimene rakendus, mida loome programmis #weeklyCodingChallenge. Siiani oleme ehitanud väiksemaid projekte, nii et see on päris põnev, kui te minult küsite!

Selles artiklis kasutame joonistusrakenduse ehitamiseks joonistekogu p5js:

Tutvu CodePeniga siin:

Kui soovite lisateavet p5js ja selle toimimise kohta, külastage nende ametlikku veebisaiti. Põhimõtteliselt ma kasutan seda, kuna see pakub selget API-d väga hästi brauseri lõuendielemendi peal.

HTML

Nagu ülaltoodud näites võite märgata, on ekraani vasakus servas külgriba. Panime selle sisse oma “tööriistad” - värvivalija, kaaluvalija ja tühjendusnupu (prügikasti ikoon):

CSS

CSS-i abil liigutame külgriba ja kõik, mis selles asub, vasakpoolses servas. Stiilime seda natuke, et see kenam välja näeks (pole midagi väljamõeldud, tavaline CSS):

Nüüd aga olulise osa eest ...

JS / P5JS

Nagu võisite juba märgata, pole me oma HTML-i lõuendielementi lisanud, kuna p5js loob selle meile.

P5js teegist kasutame kahte olulist funktsiooni:

  • häälestus - kutsutakse üks kord, kui programm käivitub. Seda kasutatakse keskkonna algsete omaduste, näiteks ekraani suuruse ja taustavärvi määratlemiseks.
  • viik - kutsutakse kohe pärast seadistamist (). Funktsioon draw () täidab pidevalt oma plokis sisalduvaid koodiridu.

Enne edasiliikumist peatume korraks ja vaatame, mida tahame saavutada.

Nii et põhimõtteliselt tahame lisada lõuendile hiirega vajutatud eventListener'i, mis hakkab sellele kuju kuju joonistama, kuni mouseIsPressed.

Loome hulga punkte, mida kasutame tee (või kuju) loomiseks, kasutades meetodeid beginShape ja endShape, et see kuju lõuendile joonistada. Kuju ehitamiseks ühendatakse rida tippe (lisateavet leiate tipust).

Kuna soovime, et seda kuju joonistataks iga kord uuesti, paneme selle koodi joonistusmeetodi sisse:

Nagu näete, on p5js-l hiireIsPressed lipp, mida saame kasutada hiirenuppude vajutamise tuvastamiseks.

Kõik võib seni hea välja näha, kuid selles on suur probleem. Kui hiirenupp on vabastatud ja proovime joonistada veel ühe kuju, ühendatakse eelmise kuju viimane punkt uue kuju esimese punktiga. See pole kindlasti see, mida me tahame, seega peame oma lähenemist natuke muutma.

Selle asemel, et omada ühte punktide massiivi (teede massiivi), loome teede maatriksi ja salvestame kõik selle sees olevad teed. Põhimõtteliselt on meil kahekordne massiiv punktidega. Selleks peame hiire veel allavajutamisel jälgima praegust rada. Lähtestame selle massiivi uuesti, kui hiire nuppu uuesti vajutatakse. Segane? Vaatame koodi ja võin kihla vedada, et see saab selgemaks:

Lisasin ülalolevasse koodi ka mõned kommentaarid, kontrollige neid kindlasti.

Funktsiooni mousePressed kutsutakse üks kord pärast iga hiirenupu vajutamist - p5js kraam!

Tore! Nüüd saame oma lõuendile joonistada üksikuid kujundeid!

Viimane asi, mis tuleb teha, on haarata need nupud, mille lõime HTML-is, ja kasutada kujunduse kujundamiseks nende sees olevaid väärtusi:

Ja sellega oleme oma väikese rakenduse lõpetanud! Jah!

Kogu JS kood

Enne selle js-faili importimist veenduge ka, et impordiksite p5js-faili ka oma HTML-i.

Järeldus

Loodan, et teile meeldis see meie joonistusrakendus. Sellele rakendusele saab lisada hunniku funktsioone ja ma kutsun teid üles laskma oma loomingulisel meelel uusi ideid välja pakkuda!

Mis oleks, kui saaksite joonise pildina salvestada (.png või .jpg)? (saate seda teha p5js teegiga).

Praeguse seisuga kontrollime ainult hiireüritusi. Võib-olla saaksite selle ka mobiilis toimima panna, kui nuputada puuteüritusi? Taevas on funktsioonide hulga, mida sellesse rakendusse lisada, piiriks!

Mulle meeldiks näha, mida te kavatsete ehitada! Piiksuge mulle @ florinpop1705 oma loominguga!

Võite meeldida ka ühele muule programmi Weekly Coding Challenge väljakutsele. Vaadake neid siit.

Näeme järgmine kord! Head kodeerimist!

Algselt avaldati veebisaidil www.florin-pop.com.