MIKROBIT I NJEGOVA UPOTREBA U PROCESSING APLIKACIJAMA
Pomeranje grafičkih objekata, koje iscrtavamo u nekoj aplikaciji u Processing-u možemo vezati za događaje miša i tastature. Npr. Pomeranje možemo ostvariti pritiskom na tastere sa strelicama, ili na neki drugi taster koji mi odredimo. Umesto toga, možemo upotrebiti i mikrokontroler, npr. Micro:bit, tako što pomoću njega merimo npr. ubrzanje, ili proizvedemo neki događaj, a onda prenesemo tu informaciju preko serijskog porta na računar. Tu informaciju dalje, koristi aplikacija u Processing-u, koja je čita takođe sa serijskog porta. Upoznajmo se u nastavku o Mikro:bit-u i pogledajmo primere u Processing-u koji koriste jedan ili više mikro:bit-ova.
Microbit uređaj
Mikrobit je ručni programabalni mikro računar. Sastoji se od poločice, procesora, senzora, dioda, ulazno-izlaznog serijskog porta, tastera. Može se povezati sa Processingom koji je pogodan za kreiranje vizuelnih aplikacija. Pogodan je za učenje dece programiranju.
Povezivanjem mikrobita i processinga mogu se kreirati zanimljive aplikacije, jer se već bogata biblioteka pogodna za kreiranje animacija i simulacija iz fizike, može obogatiti merenjem temperature, ubrzanja, jačine svetlosti, udaljenosti do predmeta itd. korišćenjem mikrobita.
Može se programirati pomoću programskih jezika scratch, javascript-a ili python-a. Evo nekih preporuka :
Povezivanjem mikrobita i processinga mogu se kreirati zanimljive aplikacije, jer se već bogata biblioteka pogodna za kreiranje animacija i simulacija iz fizike, može obogatiti merenjem temperature, ubrzanja, jačine svetlosti, udaljenosti do predmeta itd. korišćenjem mikrobita.
Može se programirati pomoću programskih jezika scratch, javascript-a ili python-a. Evo nekih preporuka :
- Za programiranje u scratch-u ili javascript-u koristiti Majkrosoftov MakeCode: https://makecode.microbit.org/
- Za programiranje u pajtonu instalirati radno okruženje Mju: https://codewith.mu/en/download
- Na sledećim slikama se može videti prednja i zadnja strana mikrobit-a
Slika 1: Mikrobit-prednja strana
|
Slika 2: Mikrobit-zadnja strana
|
Delovi mikrobita
Delovi mikrobita:
- Prednja ploča
- Zadnja ploča
- Ekran sa 25 LED dioda
- Tasteri, se nalaze sa leve i desne strane ekrana A i B. pritisak na taster se registruje od strane microbita. Postoji i taster za reset, tj. za restartovanje programa, odnosno njegovo ponovno učitavanje
- Kompas, određuje položaj (stranu sveta) i može da meri jačinu magnetnog polja
- Akcelerometar. Detektuje pokrete mikrobita
- Senzor za temperaturu. Ovaj senzor meri temperaturu mikrobit-ovog procesora.
- Pinovi. Na ivici mikrobita nalazi se 25 izvoda, 5 velikih i 20 malih. Preko ovih pinova se mogu povezivati razni dodatni uređaji kao i senzori.
- Bluetooth. Ova antena kojom je opremljen mikrobit služi za bežično povezivanje sa drugim uređajima. ovo povezivanje se može ostvariti sa drugim bluetooth uređajima, sa računarom, mobilnim telefonom ili nekim drugim uređajem.
Na sledećoj slici možete videti delove sa prednje strane mikrobit-a
Slika 3: Delovi na prednjoj strani Mikrobit-a
Na sledećoj slici se može videti detaljan izgled Mikrobit-a sa zadnje strane.
Slika 4: Delovi na zadnjoj strani Mikrobit-a
Mikrobit radionice
Mikrobit radionice su sastavni deo kursa kreativnog programiranja koji organizuje Regionalni Centar za Talente "Mihajlo Pupin" u Pančevu:
Kreativno programiranje
Pogledajte u sledećem videu nekoliko osnovnih radionica sa upotrebom mikrobit-a
Igrica pong
Stara igrica pong koja ostvaruje kretanje pravougaonika u horizontalnoj ravni levo-desno i loptice koja se kreće verikalno i odbija o pravougaonik i zidove može se napraviti u processingu i povezati sa mikrobitom. Sledeći video pokazuje kako to može da se uradi:
Prvo đemo pokazati kako da se poveže mikrobit sa processingovom aplikacijom. Mikrobit proizvodi 3 događaja: TitlLeft, TitleRight i shake, koji redom treba da: promene pravac kretanja pravougaonika, na levo, na desno i da izvrše resetovanje u igrici. U delu programa koji treba da bude na mikrobitu definisaćemo ove događaje i koristeći naredbu selekcije, a u zavisnosti od izazvanog događaja, poslati odgovarajuću poruku na serijski port: "l" za titlLeft, "d" za titlRight i "r" za shake događaj. Pregled svih događaja na mikrobitu možemo videti na sledećoj slici:
Slika 5: Događaji gestova na mikrobitu
Prvo ćemo kreirati kod u mikrobitu koristeći makecode projekat i kopirati ga na mikrobit. Kompletan postupak možete videti u izloženom videu. U okviru događaja onStart ubacićemo blok while petlje sa uslovom true, a unutar petlje blok selekcije, tj. if-else if... naredbu, što se može videti na slici 6:
Slika 6: Igrica Pong-Mikrobit program u scratch-u
Ili javascript kod:
Slika 7: Igrica Pong-Mikrobit program u javascript-u
Kod u Processingu započinjemo kreiranjem setup i draw metode i dodavanjem promenljivih: port(Serial), k(int), dogadjaj(String)
Prvi deo zadatka je da prihvatimo tekst sa serijskog porta i da u zavisnosti da li je "l", "d" ili "r", prepišemo tekst na prozor aplikacije u processingu: Kod koji radi ovo možete videti u nastavku:
Prvi deo zadatka je da prihvatimo tekst sa serijskog porta i da u zavisnosti da li je "l", "d" ili "r", prepišemo tekst na prozor aplikacije u processingu: Kod koji radi ovo možete videti u nastavku:
Slika 7: Igrica Pong- Kod u processingu-početak
Da bi kreirali port, potrebna nam je klasa Serial, koja se nalazi u istoimenoj biblioteci, a koju treba importovati da bi mogli da je koristimo.
Promenljiva k inicijalizovana na nulu će u stvari biti promena položaja po svakom pozivu draw metode(20 puta u sekundi), dakle brzina pomeranja pravougaonika.
Promenljiva događaj je tekst događaja koji ćemo ispisati na prozoru u zavisnosti od događaja koji je proizveo mikrobit.
Unutar setup metode se kreira veličina prozora na 600*600px a zatim se kreira port, kao objekat.
Serial.list je lista dostupnih portova, pa vidimo da je kreiran port na osnovu prvog elementa u listi.
Funkcija bufferUntil(10) daje naznaku da će se čitati samo jedna linija teksta, tj. dok se ne naiđe na karakter sa kodom "10", a to je karakter za kraj reda.
Unutar draw metode posle postavljanja pozadine proverava se da li je neki port dostupan i ako jeste poziva se funkcija serialEvent(Serial port).
U ovoj funkciji se koristi selekcija koja ispituje prvi karakter u pročitanom stringu sa porta i ako je to "l"(titleLeft) onda se vrednost brzine k postavlja na negativnu vrednost u ovom primeru k=-2. Ako je to "d"(titleRight) onda je k=2.
Tekst na ekranu se ispisuje sa processing-ovom funkcijom text(), koja kao prvi parametar prihvata tekst koji se ispisuje,a druga dva se odnose na položaj u xOy koordinatnom sistemu. Nastavak koda možete videti na sledećim slikama:
Promenljiva k inicijalizovana na nulu će u stvari biti promena položaja po svakom pozivu draw metode(20 puta u sekundi), dakle brzina pomeranja pravougaonika.
Promenljiva događaj je tekst događaja koji ćemo ispisati na prozoru u zavisnosti od događaja koji je proizveo mikrobit.
Unutar setup metode se kreira veličina prozora na 600*600px a zatim se kreira port, kao objekat.
Serial.list je lista dostupnih portova, pa vidimo da je kreiran port na osnovu prvog elementa u listi.
Funkcija bufferUntil(10) daje naznaku da će se čitati samo jedna linija teksta, tj. dok se ne naiđe na karakter sa kodom "10", a to je karakter za kraj reda.
Unutar draw metode posle postavljanja pozadine proverava se da li je neki port dostupan i ako jeste poziva se funkcija serialEvent(Serial port).
U ovoj funkciji se koristi selekcija koja ispituje prvi karakter u pročitanom stringu sa porta i ako je to "l"(titleLeft) onda se vrednost brzine k postavlja na negativnu vrednost u ovom primeru k=-2. Ako je to "d"(titleRight) onda je k=2.
Tekst na ekranu se ispisuje sa processing-ovom funkcijom text(), koja kao prvi parametar prihvata tekst koji se ispisuje,a druga dva se odnose na položaj u xOy koordinatnom sistemu. Nastavak koda možete videti na sledećim slikama:
Slika 9: Igrica Pong- Kod u processingu 1 deo
Ovde vidimo da su dodate promenljive:
vx- brzina pravougaonika(umesto k),
x,y - položaj gornjeg levog ugla pravougaonika,
xL,yL -položaj kvadrata u koji je upisana lopta(položaj lopte)
rL- poluprečnik lopte
vL- brzina lopte u y pravcu
udar, dole - logičke promenljive koje govore da li lopta ide na dole(true) ili ne, i druga da li se odbila o pravougaonik ili ne.
Unutar setup metode je dodat poziv metode kreirajLopticu() koja treba da u gornjem delu kreira novu lopticu ispočetka.
vx- brzina pravougaonika(umesto k),
x,y - položaj gornjeg levog ugla pravougaonika,
xL,yL -položaj kvadrata u koji je upisana lopta(položaj lopte)
rL- poluprečnik lopte
vL- brzina lopte u y pravcu
udar, dole - logičke promenljive koje govore da li lopta ide na dole(true) ili ne, i druga da li se odbila o pravougaonik ili ne.
Unutar setup metode je dodat poziv metode kreirajLopticu() koja treba da u gornjem delu kreira novu lopticu ispočetka.
Slika 10: Igrica Pong- Kod u processingu 2 deo
Ovde dalje nema novih izmena, tj. ovaj deo koda je ranije već objašnjen.
Slika 11: Igrica Pong- Kod u processingu 3 deo
U draw metodi, posle ispisivanja teksta, crta se prvo pravougaonik plave boje, a zatim i loptica u crvenoj boji, na svojim trenutnim x i y koordinatama.
Posle toga se proveravaju granični položaji za pravougaonik, tj. da li je otišao izvan vidnog polja prozora aplikacije. U slučaju da jeste, menja se pravac brzine pravougaonika.
Dalje se može videti kod koji povećava položaje pravougaonika u x i lopte u y pravcu za vrednost odgovarajućih brzina vx, odnosno vL.
Posle toga se proveravaju granični položaji za pravougaonik, tj. da li je otišao izvan vidnog polja prozora aplikacije. U slučaju da jeste, menja se pravac brzine pravougaonika.
Dalje se može videti kod koji povećava položaje pravougaonika u x i lopte u y pravcu za vrednost odgovarajućih brzina vx, odnosno vL.
Slika 12: Igrica Pong- Kod u processingu 4 deo
U nastavku koda se može videti kako se proverava da li se loptica odbila o gornju površinu pravougaonika, tako što se prvo proverava uslov da je y koordinata lopte dostigla nivo gornje površine pravougaonika. Ako jeste, treba dalje razlikovati 2 slučaja.
Prvi, da je x koordinata okvira lopte između leve i desne površine pravougaonika i ako jeste, došlo je do udara i lopta se odbija, tj. menja smer brzine na više.
Drugi, ako uslov za x koordinate nije zadovoljen, došlo je do promašaja i lopta nastavlja da se kreće sve dok ne dođe do donje ivice okvira, kada nestaje i kreira se nova loptica.
Prvi, da je x koordinata okvira lopte između leve i desne površine pravougaonika i ako jeste, došlo je do udara i lopta se odbija, tj. menja smer brzine na više.
Drugi, ako uslov za x koordinate nije zadovoljen, došlo je do promašaja i lopta nastavlja da se kreće sve dok ne dođe do donje ivice okvira, kada nestaje i kreira se nova loptica.
Slika 13: Igrica Pong- Kod u processingu 5 deo
Ovde vidimo još dva uslova: Kada lopta izađe iz vidljivog dela prozora po vertikalnom pravcu, u donjem i u gornjem delu. U oba slučaja se kreira nova loptica.
Na kraju vidimo metodu serialEvent() koja je ranije već objašnjena. Posle pokretanja videćemo:
Na kraju vidimo metodu serialEvent() koja je ranije već objašnjena. Posle pokretanja videćemo:
Slika 14: Igrica Pong- Kod u processingu - izvršenje aplikacije
Igrica je dovršena u drugom delu tj u videu broj 3. Pogledajte u nastavku:
|
Prethodno
|< Osnove processinga sa Javom |
Sledeće
Vektori u Processing-u >| |