Micro:bit 1 Animera

Kan du skapa en liknande animation?

Så här ser programmeringsmiljön ut som vi ska använda. Här programmerar man med block eller med programmeringsspråket JavaScript.

Bild av MakeCode editor

Öppna sidan https://microbit.org/ för att börja programmera. Välj “Let’s Code” i menyraden. Scrolla ner tills du ser “MakeCode Editor” och klicka igen på “Let’s Code”. Välj ett nytt projekt. Nu har du kommit till en sida där man programmerar micro:bit. Om du klickar på kugghjulet uppe till höger kan du välja vilket språk du vill använda. I rutan nere där det står “Untitled” kan du namnge ditt program.

Till vänster ser du en simulator. På den kan man se hur programmet fungerar direkt i datorn. I programmeringsfältet finns redan två block. I de blocken kan man placera andra block för att skapa ett program. Blocket Vid start körs en gång när programmet startar och För alltid körs (som det står) för alltid. De block som du kan programmera med finns färgkodade under respektive kategori i fältet i mitten.

1:1 Animerad figur

För att skapa en animation liknande den högst upp på den här sidan kommer du att behöva några block från “Grundläggande” block.

Leta rätt på följande block:
Bild av kodblock
och dra ut dem i programmeringsfältet. När blocken inte är sammankopplade har de en gråaktig färg. När de sen pusslas samman får de sin rätta färg igen. Grå block kommer inte att ingå i programmet när det körs.
Du kommer att behöva två st show leds och två st pausa block för animationen. Blocken placeras i för alltid blocket. Ordningsföljden ska vara: Show leds, pausa, show leds, pausa.
Du bestämmer hur din animation ska se ut genom att klicka i rutorna i show led blocket. De rutor som är i klickade är de som kommer att lysa på led-displayen på micro:bit.

Blocket pausa bestämmer hur länge det block som finns ovanför ska synas innan programmet går vidare.

Placera dina fyra block i för alltid blocket och klicka i de led som ska visa din figur. Se på simulatorn hur din animering ser ut. Du kan ändra värdet i pausa blocket genom att klicka på den lilla nedåt pilen och välja nytt värde, eller genom att skriva in nytt värde. Lägg märke till att det står (ms) bakom värden. Vad tror du att det betyder?

Inom programmering används ordet ALGORITM för att beskriva ett antal instruktioner som ska lösa ett visst problem. De sammansatta blocken du nu gjort i ditt program löser nu problemet “skapa animation”.

En Algoritm är en beskrivning av hur man stegvis utför en beräkning eller löser en uppgift. Algoritmen består av tydliga instruktioner för hur något ska göras.

En Sekvens är i vilken följd stegen i algoritmen utförs. Stegen utförs en i taget i den ordning de skrivits. Varje steg utförs exakt en gång .

När din sekvens placerats i ett för alltid block kommer sekvensen att startas om när den är klar och sekvensen repeteras för alltid.

1:2 Text som scrollar över displayen

För att få en text att scrolla över skärmen kan man använda blocket visa sträng.
Bild av kodblock
Skriv in en egen text där det står “Hello!”. Du behöver inte skriva apostroferna som står kring ordet. De läggs till automatiskt när du skrivit din text. Att de finns där är programmeringsspråkets sätt att säga att “det här är en text”.
Placera textblocket i för alltid istället för i vid start och se vad som sker då.
Vad händer om du använder bokstäverna Å, Ä eller Ö i blocket visa sträng? Vad tror du att det beror på att det blir så? Testa fler olika block som finns under grundläggande för att se vad de gör.

1:3 Animation på fler sätt

Du kan skapa animationer på många olika sätt. Här visas ett sätt där man använder VARIABEL och block från kategorin Bilder vilken du hittar genom att klicka på Avancerat i blockkategorierna och scrollar ner.

En Variabel är en namngiven lagringsplats med ett värde som kan ändras.

För att skapa en variabel klicka på blockkategorin Variabler.

Bild från editorn som visar hur Variabler skapas

Klicka på Skapa en variabel. Du ska nu ge din variabel ett namn. Det kan vara vilket namn som helst men det är bra att ta för vana att namnge sina variabler på ett genomtänkt sätt så att du och andra kan läsa koden och förstå vad variabeln har för syfte. När variabeln skapats kommer tre nya block att finnas i kategorin Variabler.

Bild på kod

Vanligt är att använda variabler till numeriska värden som man sen vill ändra på men det går också bra att lagra annat i dem. Anledningen till att man använder variabler till bilder (som vi ska göra här ) är att koden blir lättare att läsa när den inte blir allt för lång. Blocket för bilder tar stor plats och om man vill ha samma bild många gånger blir koden lång.

Dra ut ett block create image från blockkategorin Images som du hittar genom att klicka på Avancerat. Fyll i de led som ska lysa så att det ser ut som en bil. Dra ut blocket sätt MinBild till och placera det i vid start.

Bild på kodblock

Blocket create image ska nu placeras där siffran 0 står i variabelblocket. Dra blocket upp till variabelblocket. När du ser att den vita ytan runt 0 får en gul kant kan du släppa blocket.

Nu finns bilden på bilen lagrad som en variabel och kan användas i fortsatt kod. I för alltid kommer vi nu att skapa kod som gör att bilden scrollas över led displayen. Blocket som används här finns också i Images. För att välja din egen bild så får du klicka på nedåt pilen i den röda delen där det står myImage och välja din bild (din variabel).

At offset som det står före siffran 0 betyder hur mycket förskjuten bilden ska vara horisontellt. At offset utgår från vänster sida av displayen. Om bilden visas at offset 1 kommer bilden att förskjutas ett steg år vänster.
Bild på microbit
Positiva tal är förskjutning åt vänster och negativa tal är förskjutning åt höger. Hela koden för att få bilen att scrolla över led displayen om och om igen

Bild av kodblock

Ändra i koden så att din variabel ser ut på ett annat sätt. Det gör du genom att markera andra led i blocket som finns i vid start