P5js ilə rəsm tətbiqi necə yaradılır

Həftəlik Kodlama Çağırışının 5-ci həftəsinin mövzusu:

Rəsm tətbiqi yaradın

Bu #weeklyCodingChallenge proqramında yaradacağımız ilk tətbiqetmədir. İndiyə qədər daha kiçik layihələr hazırladıq ki, soruşsanız olduqca maraqlıdır!

Bu yazıda rəsm tətbiqi yaratmaq üçün rəsm kitabxanası olan p5js-dən istifadə edəcəyik:

CodePen-ə bu yol:

P5js və xüsusiyyətləri haqqında daha çox məlumat əldə etmək istəyirsinizsə, rəsmi saytlarını ziyarət edə bilərsiniz. Əsasən, səliqəli bir API təqdim edərək brauzerin kətan elementinin üzərində çox yaxşı işlədiyi üçün istifadə edirəm.

HTML

Yuxarıdakı nümunədə gördüyünüz kimi, ekranın sol tərəfində .bir yan çubuğumuz var. "Alətlərimizi" - rəng seçici, çəki seçici və "Sil" düyməsini (zibil qutusunun işarəsi) qoyacağıq:

CSS

CSS istifadə edərək .sidebar və içindəki hər şeyi sola daşıyırıq. Gözəl görünməsi üçün bir az tərtib edəcəyik (xüsusi bir şey yoxdur, sadə CSS):

İndi vacib hissəyə ...

JS / P5JS

Fərq etdiyiniz kimi, HTML-lərimizə p5js tərəfindən yaradıldığı üçün bir kətan elementi əlavə etmədik.

P5js kitabxanasında istifadə edəcəyimiz iki vacib funksiya var:

  • quraşdırma - proqram başlayanda bir dəfə çağırılır. Bu ekran ölçüsü və arxa plan rəngi kimi ilkin mühit xüsusiyyətlərini təyin edir.
  • çəkmək - birbaşa quraşdırıldıqdan sonra çağırılır (). Draw () funksiyası blokunda olan kod sətirlərini davamlı olaraq icra edir.

Davam etməzdən əvvəl bir anlıq duraq və nəyə nail olmaq istədiyimizi görək.

Əsasən, mouseIsPressed düyməsinə basıldığı müddətdə forma çəkən kətana siçanla basılan bir hadisəListener əlavə etmək istəyirik.

Bu formanı artboardun içərisinə çəkmək üçün beginShape və endShape metodlarından istifadə edərək bir yol (və ya forma) yaratmaq üçün istifadə edəcəyimiz bir sıra nöqtələr yaradacağıq. Forma bir sıra zirvələrə qoşulmaqla yaradılır (daha çox məlumat üçün Vertex-ə baxın).

Bu formanı hər dəfə yenidən çəkmək istədiyimiz üçün bu kodu rəsm metoduna əlavə edək:

Gördüyünüz kimi, p5js-də mouseIsPressed bayrağı var ki, siçan düymələrinin basıldığını söyləmək üçün istifadə edə bilərik.

İndiyə qədər hər şey yaxşı görünə bilər, amma bir böyük problem var. Siçan düyməsini sərbəst buraxıb başqa bir forma çəkməyə çalışdığınız anda əvvəlki şəklin son nöqtəsi yeni formanın ilk nöqtəsinə bağlanacaq. Bu qətiliklə istədiyimiz kimi deyil, buna görə yanaşmamızı bir az dəyişdirməliyik.

Bir sıra nöqtələrə (yol massivinə) sahib olmaq əvəzinə, bir yol massivi yaradır və içindəki bütün yolları saxlayırıq. Əsasən bizdə ikiqat xallar var. Bunu etmək üçün, siçan hələ də basıldıqda cari yolu izləməliyik. Bu sıra yenidən siçan düyməsinə basılan kimi yenidən qurulur. Qarışıqdır? Gəlin kodu nəzərdən keçirək və daha aydın olacağını düşünürəm:

Yuxarıdakı kodda bəzi şərhlər də qoymuşam, yoxladığınızdan əmin olun.

MousePressed funksiyası hər dəfə bir siçan düyməsinə basıldıqda çağırılır - p5js stuff!

Əla! İndi kətanımıza xüsusi şəkillər çəkə bilərik!

Etməli olduğunuz son şey HTML-də yaratdığımız düymələri bir-birinə bağlamaq və formanı tərtib etmək üçün içindəki dəyərlərdən istifadə etməkdir:

Bununla da kiçik tətbiqimizi bitirdik! Hey!

Bütün JS kodu

Bu js faylını gətirmədən əvvəl HTML-də p5js faylını da daxil etdiyinizə əmin olun.

Nəticə

Ümid edirəm hazırladığımız bu rəsm tətbiqindən zövq aldınız. Bu tətbiqə əlavə edilə biləcək bir sıra xüsusiyyətlər var və yaradıcı zehninizin yeni ideyalarına sahib olmağa çağırıram!

Rəsmi şəkil şəklində saxlaya bilsəydiniz (.png və ya .jpg)? (bunu p5js kitabxanası ilə edə bilərsiniz).

Hazırda yalnız siçan hadisələrini nəzərdən keçiririk. Bəlkə də toxunma hadisələrini öyrənərək mobil cihazlarda işləyə bilərsən? Göy bu tətbiqə əlavə edilə biləcək xüsusiyyətlərin miqdarı ilə həddi!

Nə quracağınızı görmək istərdim! Məni @ florinpop1705 yaradıcılığınızla tweetləyin!

Həftəlik Kodlama Çağırış proqramının digər çətinliklərindən birini də bəyənə bilərsiniz. Buraya baxın.

Növbəti dəfə qədər! Kodlamada əylənin!

Əvvəlcə www.florin-pop.com saytında yayımlandı.