Sadə Playdoh Şekillerinin W/ P5.js və Makey Makey kodlaşdırılması: 7 addım
Sadə Playdoh Şekillerinin W/ P5.js və Makey Makey kodlaşdırılması: 7 addım
Anonim
Kodlaşdırma Sadə Playdoh Formaları W/ P5.js və Makey Makey
Kodlaşdırma Sadə Playdoh Formaları W/ P5.js və Makey Makey

Makey Makey Layihələri »

Bu, Playdoh ilə bir forma, p5.js istifadə edərək kod verən və Makey Makey istifadə edərək Playdoh şəklinə toxunaraq kompüter ekranında görünməsini tetikleyen fiziki bir hesablama layihəsidir.

p5.js, Javascriptdə açıq mənbə, veb əsaslı, yaradıcı kodlaşdırma mühitidir. Daha çox məlumatı buradan əldə edin:

Bu layihəni həyata keçirmək üçün heç bir kodlaşdırma təcrübəsinə ehtiyacınız yoxdur. Bu mətn əsaslı kodlaşdırmaya giriş olaraq istifadə edilə bilər (Scratch kimi blok əsaslı dillərdən fərqli olaraq). Bu layihəni tamamlamaq üçün yalnız 4 sətir kod yazmalısınız. Bu əsas fikri dəyişdirməyin və genişləndirməyin bir neçə yolu var.

Təchizat

Makey Makey Kit (2 Timsah Klipi ilə)

Playdoh (İstənilən rəng)

Noutbuk internet bağlantısı olmadan

Addım 1: Playdoh Forması yaradın

Playdoh Forması yaradın
Playdoh Forması yaradın

Playdohdan bir forma hazırlayın. Bu bir dairə, oval, kvadrat, düzbucaqlı və ya üçbucaq ola bilər. Bu formanı daha sonra kodlamanız lazım olduğunu unutmayın, buna görə forma nə qədər sadə olsa, kodlaşdırma hissəsi də o qədər asan olacaq. Bununla birlikdə, p5.js çox fərqli formaları, hətta xüsusi formaları da kodlaya bilir, buna görə də sınamaq istədiyiniz çətinlik səviyyəsinə qərar verə bilərsiniz.

Addım 2: P5.js -də başlayın

P5.js -də başlayın
P5.js -də başlayın

Daha əvvəl p5.js istifadə etməmisinizsə, veb saytdakı başlanğıc səhifəsinə baxmağı məsləhət görürəm:

P5.js -dən istifadə ilə bağlı əla dərslər üçün Kodlaşdırma Qatarı youtube kanalına da baxmağı məsləhət görürəm. Bütün əsasları keçən bir çalğı siyahısına bir link:

P5.js veb əsaslı olduğundan, p5 Web Redaktorundan istifadə edərək bütün kodlaşdırmanı vebdə edə bilərsiniz. Bu layihəni həyata keçirmək üçün hesaba ehtiyacınız yoxdur, ancaq işinizi saxlamaq istəyirsinizsə, bir hesab üçün qeydiyyatdan keçməlisiniz.

Veb Redaktoru:

P5.js veb redaktorunda kodu yazmaq üçün bir sahə və sağdakı kodun nəticələrini göstərəcək kətan var.

Hər bir p5.js eskizinə bir setup () funksiyası və draw () funksiyası daxildir. Setup () funksiyası eskiz ilk dəfə başlayanda bir dəfə işləyəcək. Setup () funksiyasında, şəklinizin çəkiləcəyi bir yer yaradan createCanvas funksiyası var. CreateCanvas funksiyasının mötərizədə olan nömrələri kətanın X oxunu (soldan sağa) və Y oxunu (yuxarıdan aşağıya) təyin edir. Varsayılan nömrələr 400, 400 -dir, yəni kətanınız soldan sağa 400 piksel və yuxarıdan aşağıya 400 pikseldir (İstədiyiniz zaman bunları dəyişə bilərsiniz). Kətanın sol üst küncünün 0, 0 nöqtəsi olduğunu unutmayın. Şəklinizi kodlaşdıranda bunu bilmək vacibdir.

Draw () funksiyası bir döngə kimi işləyir, yəni daim yenilənir. Saniyədə 60 dəfə. Bu, eskizlərimizdə animasiya yaratmağımıza imkan verə bilər. Draw () funksiyasının içərisində kətanımıza rəng qatan fon funksiyası var. Varsayılan, boz rəngli bir dəyər olan 220 -dir. 0 = qara, 255 = ağ və aralarındakı ədədlər boz rəngli çalarlar olacaq. Arxa fon funksiyası rəng əlavə etməyə imkan verən RGB dəyərlərini də götürə bilər. Növbəti addımda bu barədə daha çox.

Addım 3: Formanızı P5.js -də kodlayın

Formanızı P5.js -də kodlayın
Formanızı P5.js -də kodlayın
Formanızı P5.js -də kodlayın
Formanızı P5.js -də kodlayın

Formanızı kodlaşdırmaq üçün, yalnız draw () funksiyasının içərisindəki kod sətirlərinə əlavə etməlisiniz.

Kətanda görünmək üçün hər bir formanın öz funksiyası var. P5.js-də bütün formalar üçün istinad səhifəsi budur:

Bir dairə yaratmaq üçün ellips funksiyasından istifadə edəcəyik. Bu funksiya 3 arqument götürür (mötərizədə olan ədədlər). Birinci nömrə, kətan üzərindəki dairənin mərkəzinin X mövqeyi, ikinci nömrə isə kətandakı Y mövqesidir. Unutmayın ki, sol üst künc 0, 0 və kətan 400 ilə 400 pikseldir. Dairənin kətanın ortasında görünməsini istəsəm, X oxunda 200, Y oxunda 200 qoyacağam. Kətan üzərində əşyaların necə yerləşdiriləcəyini bilmək üçün bu ədədlərlə təcrübə edə bilərsiniz.

Üçüncü rəqəm dairənin ölçüsünü təyin edir. Bu nümunə üçün 100 piksel diametrə təyin edilmişdir. Ellips funksiyası, üçüncü arqumenti X diametrinə təsir edəcək dördüncü arqumenti Y diametri olan dördüncü arqumenti də götürə bilər. Mükəmməl yuvarlaq dairələr yerinə oval formalar düzəltmək üçün istifadə edilə bilər.

Formamızın rəngini təyin etmək üçün doldurma funksiyasından istifadə edirik. Bu, RGB dəyərləri olan 3 arqumentdən istifadə edir (R = qırmızı, G = yaşıl, B = mavi). Hər bir dəyər 0 ilə 255 arasında bir rəqəm ola bilər. Məsələn, qırmızı etmək üçün 255, 0, 0 qoyarıq ki, hamısı yaşıl və ya mavi olmasın. Bu ədədlərin fərqli birləşmələri fərqli rənglər yaradacaq.

Bir çox fərqli rəng üçün RGB dəyərləri verən bir neçə veb sayt var:

PlayDoh rənginizə uyğun RGB dəyərini tapdıqdan sonra, doldurma funksiyasını forma funksiyasının üstünə yazın.

Daha sonra veb redaktorundakı oynat düyməsini basa bilərsiniz və şəklinizin ekranda göründüyünü görəcəksiniz.

Addım 4: Bir düyməni basaraq şəklinizi görün

Bir düyməni basaraq şəklinizi görün
Bir düyməni basaraq şəklinizi görün
Bir düyməni basaraq şəklinizi görün
Bir düyməni basaraq şəklinizi görün
Bir düyməni basaraq şəklinizi görün
Bir düyməni basaraq şəklinizi görün

P5.js eskizimizin Makey Makey ilə interaktiv olmasını istədiyimiz üçün klaviaturadakı düyməyə basdığımız zaman bir şeyin baş verməsi üçün bəzi kodlar əlavə etməliyik. Bu vəziyyətdə, formanın yalnız bir düyməyə basdığımız zaman görünməsini istəyirik. Bunu etmək üçün şərti bir ifadəyə ehtiyacımız var. Bu o deməkdir ki, kodumuzdakı bir şey yalnız müəyyən bir şərt yerinə yetirildikdə baş verəcək, bu vəziyyətdə bir düyməyə basıldı.

Bu şərti ifadəni şərtləndirmək üçün mötərizənin ardınca sözlə başlayırıq. Parantezin içərisində qarşılanmaq istədiyimiz şərt olacaq. P5.js -də keyIsPressed adlı bir dəyişən var (böyük hərfləri burada yazıldığı kimi eyni istifadə etdiyinizə əmin olun). keyIsPressed bir boolean dəyişəndir. Bu o deməkdir ki, ya doğru, ya da yanlış ola bilər. Düymə basıldıqda dəyəri doğrudur, basılmadıqda isə yalan olur.

Nəhayət, buruq mötərizələr dəsti əlavə edirik {}. Qıvrım mötərizənin içərisində, şərtimiz yerinə yetirilərsə icra etmək istədiyimiz kod olacaq. Beləliklə, bu qıvrım mötərizələr arasında forma yaratmaq üçün kodumuzu qoyacağıq.

İndi eskizimizi işlədərkən, klaviaturadakı düyməni basana qədər şəkli görməyəcəyik.

Vacib Qeyd: Kodumuza düymə basmalarını əlavə edərkən, veb redaktoru, mətn redaktorunda kod yazmaq üçün bir düyməni basdığımızı və ya düyməni basaraq kodlaşdırdığımız şeyi etmək üçün düyməni basdığımızı bilməlidir. Oynat düyməsini tıkladığınız zaman, siçanı kətan üzərində hərəkət etdirin və kətan üzərinə vurun. Bu, redaktorun diqqətini eskizə gətirəcək və bir düyməyə basmaq istədiyimiz düyməni basmaq kodunu işə salacaq

Addım 5: Makey Makey qurun

Makey Makey qurun
Makey Makey qurun
Makey Makey qurun
Makey Makey qurun
Makey Makey qurun
Makey Makey qurun

Makey Makey lövhəsini, USB kabelini və iki timsah klipini çıxarın. Bir timsah klipini Yerə və birini Kosmos düyməsinə yapışdırın (kodumuzda bir açar göstərmədiyimiz üçün basdığımız hər hansı bir düymə formanın görünməsinə səbəb olacaq).

Space düyməsinə bağlı olan timsah klipini götürün və digər ucunu Playdoh şəklinə basın.

USB kabelini dizüstü kompüterə qoşun.

Addım 6: Playdoh Formasına toxunun

Image
Image
Playdoh Formasına toxunun
Playdoh Formasına toxunun

Makey Makeydə Yerə bərkidilmiş timsah klipinin metal ucunu tutun və Playdoh şəklinə toxunun. Playdoh şəklinə toxunduğunuzda, kodlaşdırılmış forma eskizinizin kətanında görünməlidir.

Bu layihə üçün p5.js eskizinə bir link:

Forma görünmürsə:

1. Playdoh -a toxunmadan əvvəl p5.js eskizinin kətanında siçanı tıkladığınızdan əmin olun.

2. Torpaq telinin metal klipini tutduğunuzdan əmin olun.

Addım 7: Fərqli formalar

Fərqli formalar
Fərqli formalar
Fərqli formalar
Fərqli formalar
Fərqli formalar
Fərqli formalar
Fərqli formalar
Fərqli formalar

Sarı Üçbucaq:

Mavi Meydan:

Tövsiyə: