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 :

Mikrobit-prednja strana
Slika 1: Mikrobit-prednja strana
Mikrobit-zadnja strana
Slika 2: Mikrobit-zadnja strana

Delovi mikrobita

Delovi mikrobita:           Oznake za 5 velikih pinova: 0,1,2, 3V, GND. Prva tri su opšte namene, na 3V dolazi napajanje od 3,3 V, a GND je uzemljenje.Na sledećoj slici možete videti delove sa prednje strane mikrobit-aDelovi na prednjoj strani Mikrobita
Slika 3: Delovi na prednjoj strani Mikrobit-a
Na sledećoj slici se može videti detaljan izgled Mikrobit-a sa zadnje strane.Delovi na zadnjoj strani Mikrobit-a
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:Događaji gestova na mikrobitu
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:Igrica Pong-Mikrobit program u scratch-u
Slika 6: Igrica Pong-Mikrobit program u scratch-u
Ili javascript kod:Picture
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:Igrica Pong- Kod u processingu-početak
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: Slika 9: Igrica Pong- Kod u processingu 1 deo
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.Igrica Pong- Kod u processingu 2 deo
Slika 10: Igrica Pong- Kod u processingu 2 deo
Ovde dalje nema novih izmena, tj. ovaj deo koda je ranije već objašnjen.Igrica Pong- Kod u processingu 3 deo
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. 

Igrica Pong- Kod u processingu 4 deo
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.Picture
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:Picture
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 >|