De eerste stapjes met echt programmeren doen we graag met visuele blokjes. Daarbij puzzel je het programma in elkaar met onderdelen die al klaarstaan op je scherm. Dit gaat veel makkelijker dan het traditionele coderen met tekst omdat je je geen zorgen hoeft te maken over moeilijke dingen zoals syntax en functienamen.

In dit voorbeeld laten we PictoBlox zien. Dit is een aantrekkelijke en toegankelijke omgeving op basis van Scratch 3.0 en Google Blockly. PictoBlox heeft daarbij extra uitbreidingen die we bij Junior IOT graag gebruiken. PictoBlox kan je gebruiken vanuit de browser of als geïnstalleerd programma.

Om te ontdekken hoe een programma werkt, gebruiken we bij dit voorbeeld ‘Junior Blocks’ . Later zullen we zelf ook programma’s bouwen met de ‘Blocks’ mogelijkheid. De gevorderde mogelijkheden voor bijvoorbeeld Python programmeren hebben we vandaag ook niet nodig.

PictoBlox Web vanuit de browser

• Ga in jouw internet browser naar https://pictoblox.ai/

Het scherm geeft meerdere mogelijkheden.

• • Block Coding / Junior Blocks
  • Block Coding / Bocks
  • Python Coding / Py Editor
  • Python Coding / Py Notebook
  • Coming Soon / Machine Learning Environment
  • Coming Soon / 3D and XR Studio

Je hoeft geen account te maken om deze omgeving te gebruiken. Maar een account kan handig zijn om de dingen te bewaren die je hebt gemaakt. Af en toe vraagt het scherm of je een account wilt maken, maar dat is niet nodig.

Junior Blocks

Met Junior Blocks kan je leuke spellen maken. We gebruiken het ook om in de voorbeelden te onderzoeken hoe een programma eigenlijk werkt. Ook voor de wat gevorderde programmeur is het interessant om op deze manier ‘event driven’ programming te ontdekken.

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Junior Blocks’

De eerste keer: Junior Blocks uitleg op je scherm

De eerste keer dat je op deze website komt, kan je kiezen voor extra uitleg. De uitleg werkt het beste als je de onderdelen aanklikt met je muispointer of via je touchpad. Je kunt ook voor ‘skip’ kiezen en de notities hieronder doorlezen.

Je kunt deze optie ook activeren, door in je werkscherm rechtsboven te klikken op het tandwiel, en in het menu de eerste optie te kiezen.

De uitleg vertelt over de onderdelen op je scherm:

• • Stage. Hier worden de opdrachten uitgevoerd. Jouw sprite poppetje staat al op je te wachten.
  • Sprite. Dit poppetje voert straks jouw opdrachten uit. Hier is het een beertje met de naam ‘Tobi’.
  • Blocks. De puzzelstukjes zijn de opdrachten waarmee je een programma maakt.
  • Scripting Area. Hier zet je de blocks om je programma te maken.
  • Proberen: De uitleg vraagt nu om een blauw pijltje naar rechts neer te zetten. Daaraan pak je ook een blauw pijltje naar boven. Klik deze aan het eerste blauwe blokje. Daarna gaat de uitleg verder.
  • Pallettes. Blauwe blokjes laten je sprite bewegen. Een pallette van een andere kleur heeft weer andere soorten blokjes. Deze helpen je om andere dingen te doen.
  • Events. Het gele pallette heeft ‘events’ blokjes. Dit zijn gebeurtenissen. Je hebt een gebeurtenis nodig om het bijbehorende deel van het programma te starten.

Tip: Als het even niet werkt, dan kan je de pagina in je browser herladen.

Een eerste Junior Blocks oefening: Tobi gaat wandelen

• Ga in jouw internet browser naar https://pictoblox.ai/
• Klik op ‘Junior Blocks’

Je start met een leeg werkveld.

• Bij de blauwe blokjes kies je een pijl naar rechts. Zet deze op je werkveld.
• Kies ook een pijl omhoog. Maak deze vast aan het eerste blokje.

Je hebt nu twee stappen in je programma. Je hebt alleen nog een geel blokje nodig. Met een geel blokje vertel je wanneer deze stappen moeten beginnen.

• Klik op het gele rondje om de gele blokjes te zien.
• Kies het gele blokje met het groene vlaggetje.

• Het gele blokje met het groene vlaggetje plak je vooraan aan je programma.

Ik denk dat je eerste programma zo klaar is. Met de groene start vlag aan de onderkant van je scherm kan je jouw programma starten.

• Druk op de groene start vlag.

Lukt het om jouw sprite poppetje te laten wandelen?

Jouw Sprite poppetje aanpassen in Junior Blocks

Op je scherm zie je een plek waar je jouw sprite poppetje kunt aanpassen.

• Klik op het kwastje bij jouw sprite poppetje

Je komt nu in de Sprite Editor.

Ik vind het leuk als mijn poppetje een geel shirt aan heeft.

• Verander je poppetje
• Misschien lukt het ook om letters op het shirt van je poppetje te maken

• Druk op de knop ‘Back’ om terug te gaan naar je programma

Je kunt meerdere poppetjes hebben. Bij elk poppetje kan je een programma maken.

De achtergrond van een scene aanpassen in Junior Blocks

Je ziet op je scherm een plek met de achtergronden.

• Klik op het rondje bij jouw achtergrond

Je komt op de plek waar je jouw achtergrond kunt kiezen en aanpassen. Je kunt met de upload knop rechts onder zelfs een eigen plaatje kiezen.

• Kies een mooie achtergrond.

Ik heb een plaatje gekozen van Junior IOT. Pssst, jij kunt hetzelfde plaatje gebruiken door dit in te vullen: https://junioriot.nl/app/uploads/2020/01/WhatsApp-Image-2020-03-13-at-19.10.09-5.jpeg

• Maak je programma nog wat langer, om jouw sprite poppetje nog meer te laten wandelen.
• Probeer om jouw poppetje op een mooie plek te krijgen.

Veel plezier!

De achtergrond hoort bij een scene. Dat is een plek waar je poppetje iets kan doen. Je kunt meerdere scenes hebben, met elk weer nieuwe poppetjes

Tip: Je project opslaan en weer terughalen

Grotere projecten wil je graag opslaan. Maar dat hoeft niet.

• Geef bovenin je scherm je project een naam. Kies een naam waarmee je weet dat het van jou is, en welk project je hebt gemaakt.
• Druk op het ‘Save’ plaatje.

Er komt nu een download. Deze heeft de naam van je project, en heeft de extensie sb3. Deze download kan je weer inladen via het menu: File/Load from your computer. Let op: iedere keer als je jouw programma aanpast, moet je het opnieuw downloaden en bewaren.

Psst… mijn project download kan je hier vinden: Junior IOT wandelt in de werkplaats

Tips: Omschakelen naar Nederlands

Bij het rondklikken door de website zien we soms in de bovenbalk een wereldbol. Daarmee kan je een taal kiezen. Je kunt deze vinden als je bij het laden van de website kiest voor ‘Blocks’.

Omdat we nog niet goed kunnen uitleggen hoe je dit goed instelt bij ‘Junior Blocks’ laten we de plaatjes nu nog in het engels staan.

Maak een Junior Blocks wandelspelletje

Je kunt makkelijk andere blokken toevoegen. Maak bijvoorbeeld het volgende spel.

Met dit spel kan je met de pijltjestoetsen op je toetsenbord jouw poppetje laten lopen. Als je het poppetje aanklikt doet het zelfs twee dingen tegelijk: geluid maken en huppelen. De roze opdrachten zorgen ervoor dat er allerlei tonen worden gespeeld.

Psst, dit is mijn project download: Wandelen met geluiden

Junior Blocks voorbeeld: Catch The Fruit

Via het menu File / Examples kom je in een overzicht met verschillende voorbeelden.

• Open het eerste voorbeeld ‘Catch the Fruit’

• Druk rechts onder op de groene vlag om het spel te starten.
• Gebruik op je toetsenbord de pijltjes naar links en naar rechts om het poppetje te laten wandelen.

Lukt het je om de appels op te vangen? Speel er even mee om te ontdekken wat er allemaal kan gebeuren.

Uitzoeken hoe het werkt: Catch the Fruit

We kunnen samen eens onderzoeken hoe het werkt.

• Ontdek nu eerst hoeveel dingen je op het scherm ziet. Kijk zonder ze aan te raken:
  • In het programma gebied zie je twee stukjes programma. Deze horen bij de pijltjestoetsen op het toetsenbord.
  • Bij het sprite poppetjes zie je twee dingetjes. Daar staat een poppetje en een appel.
  • Bij de achtergronden zie je twee achtergronden. Een gele woestijn en ook een blauwige achtergrond. Dat zijn twee scenes waar iets kan gebeuren.

Onderzoek wat het poppetje kan doen

Je ziet in het plaatje hieronder dat het poppetje is gekozen. Je ziet twee kleine stukjes programma. Deze vertellen het poppetje om een stap naar links of naar rechts te maken. Aan de gele blokjes zie je dat het programma hoort bij de pijltjestoetsen op het toetsenbord. Dat lijkt helemaal niet zo moeilijk!

Bekijk wat de appel kan doen

• Klik nu op het scherm de appel aan.

Je ziet nu andere stukjes programma. Deze horen bij de appel. De gele blokjes geven aan wanneer iets gebeurt. Wat zien we ongeveer:

• • Groene vlag. Dit gebeurt als het programma start. De appel begint dan ergens bovenaan te vallen. Er zit ook een geluidje bij. De appel blijft eigenlijk altijd vallen.
  • Poppetje. Dit gebeurt als de appel bij het poppetje komt. De appel begint dan weer ergens bovenaan te vallen. Hier zit ook een geluidje bij.
  • Zijkant. Dit gebeurt als de appel op de vloer komt. Dan springt het spel naar het eindscherm.

Ontdek wat er gebeurt in het eindscherm

Klik nu eens op het blauwige achtergrond plaatje.

Je ziet dat hier maar één poppetje bestaat. Dat is een blauwe knop. Als je deze aanraakt, zorgt het programma ervoor dat je weer naar de woestijn gaat. Daar begint het spel dan weer opnieuw.

Probeer het spel nu zelf aan te passen: Catch the Fruit, maar dan met een banaan

Probeer nu het spel te veranderen. Maak van de appel eens een banaan?

Nadat je de appel hebt veranderd, kan je het spel weer spelen. Om het spel te starten moet je het beginscherm aanklikken. Daarna druk je op de groene vlag. Het spel start!

 

En verder?

Na deze oefening kan je verder kijken naar Blocks Web met de Arduino Nano: https://junioriot.nl/blocks-web-arduino-nano/