Zelf programmeren met Scratch

Elke computer zou een zinloze doos vol elektronica zijn als er geen programma's bestonden. Al direct bij het aanzetten van de pc beginnen ze te draaien; de programma's in het Bios die ervoor zorgen dat de verschillende onderdelen met elkaar en met de buitenwereld kunnen communiceren. Daarna laadt het besturingssysteem dat deze communicatie verder vergemakkelijkt en de mogelijkheden ervan uitbreidt. Tot slot start u zelf de programma's die de klus uitvoeren of mogelijk maken die u eigenlijk met de computer wilt doen. Mooi, maar hoe werken al die programma's? Wat zijn de principes van programmeren? Om dat duidelijk te maken hebben de knappe koppen van het Massachusetts Institute of Technology (ofwel MIT) Scratch ontwikkeld. Met deze visuele 'programmeertaal' kunnen zelfs kinderen programmeren. Scratch is dan ook leuk voor jong en oud - én (ook) Nederlandstalig!

Stap 1

Surf naar scratch.mit.edu, download daar het programma en installeer het. Start vervolgens Scratch via het pictogram op uw Bureaublad. U komt nu in het hoofdscherm. Hierin ziet u links allerlei commando's die Scratch kent, in het midden de lege ruimte waar we programma's maken en rechts het uitvoervenster van zulke programma's.

Stap 2

Zoals u ziet bevat het uitvoervenster al een kat op een witte achtergrond. De achtergrond is het plaatje waarop ons programma gaat draaien. Door het pictogram 'scherm' te selecteren kunt u in het middenvenster bij het tabblad Achtergronden een ander plaatje kiezen. Wij laten het echter voor wat het is en selecteren het pictogram van de kat rechtsonder. U ziet dat deze de naam 'sprite1' heeft. Een sprite is een (eventueel geanimeerd) grafisch object waarmee we allerlei dingen kunnen doen. Deze kat is een geanimeerde sprite. Dat kunt u zien door in het middenvenster op het tabblad Uiterlijken te klikken.

Stap 3

Scratch biedt een grote verzameling sprites en u kunt ook uw eigen objecten maken. Om u de basisprincipes van het programmeren te leren voldoet de kat echter prima, dus die gaan we gebruiken. We klikken daarom op het tabblad Scripts om naar het programmeervenster te gaan. We willen de kat in beweging zetten en slepen daarvoor het blokje 'neem 10 stappen' naar het programmavenster. Wanneer we hierop vervolgens dubbelklikken zien we dat de kat een stukje (10 pixels) naar rechts beweegt. Er is echter nog geen sprake van animatie van de sprite. Daarvoor klikken we linksboven op de categorie Uiterlijk en slepen we het commando 'wissel naar uiterlijk Uiterlijk2' naar het programma. Laat u dit commando los vlak onder het vorige dan klikt het er mooi aan vast.

Stap 4

Aan ons programma voegen we nog een 'neem 10 stappen' toe en een 'wissel naar uiterlijk'. Door te klikken op het driehoekje naast 'Uiterlijk2' kunnen we Uiterlijk1 kiezen. Dubbelklikken we nu op het blokje van vier commando's dan zien we inderdaad een razendsnelle animatie. Wat ingelaste pauzes kunnen voor de broodnodige vertraging zorgen. Daarvoor moeten we eerst de commando's uit elkaar trekken. Dat doen we door blokjes omlaag te slepen, in dit geval de tweede 'neem 10 stappen'. Uit de rubriek Besturen voegen we aan beide blokken 'wacht 1 tellen' toe. Dubbelklikken we op de 1 (wat staat voor 1 seconde en da's veel) dan kunnen we er 0.1 van maken (let op: 0 punt 1, niet 0 komma 1!).

Stap 5

Door het onderste blok van drie commando's weer tegen het bovenste aan te slepen maken we er weer één programma van. Dubbelklikken we hierop dan zien we de kat inderdaad wandelen. We kunnen dit proces elke gewenst aantal keer laten herhalen, niet door er steeds op te klikken maar via het herhaal-commando. We slepen daarvoor 'herhaal 10 maal' naar het programma en laten dit los als het hele programma wordt omsloten. U hebt in programmeurs-termen nu een 'lus' gemaakt.

Stap 6

Dubbelklikken we nu op ons programma, dan begint de kat echt te lopen. Helaas loopt hij wel het beeld uit. Dat kunnen we oplossen door een beginpositie toe te voegen. Beweegt u met de muis in het uitvoervenster dan ziet u de coördinaten veranderen. Hiermee kunt u bepalen waar de kat moet beginnen. Uit de categorie Bewegen slepen we 'ga naar x:-2, y:-10' naar boven het bestaande programma en veranderen de coördinaten in -190 en -120. Dubbelklikken we op het commando dan blijkt dat de kat mooi onderin de hoek begint.

Stap 7

We plakken de losse programmadelen weer aan elkaar en zetten er uit de categorie Besturen nog een commando boven, namelijk 'Wanneer [Groene Vlag] wordt aangeklikt'. Hiermee geven we het programma een algemene manier om te starten. Aan het eind van de wandeling willen we de kat een paar keer omhoog laten springen. Dat kan met het commando ‘verander y met...’. De waarden +30 en -30 geven een goed resultaat. Een lus van vijf keer maakt er een echte vreugdedans van. Ook willen we een geluid bij het springen. Dat kan bijvoorbeeld met het commando 'speel slagwerk...' uit de rubriek Geluid. Trommel 45 gedurende 0.1 tellen werkt goed. Plaatsen we het geluid tussen de op- en neersprong dan doet hij tevens dienst als pauze. Probeer dit eerst zelf te programmeren en kijk dan naar onze oplossing.

Stap 8

We kunnen onze kat in een stripfiguur omtoveren met de commando’s 'denk...' en 'zeg...' in de categorie Uiterlijk. We laten de kat 'Computer Idee?' denken gedurende twee tellen en daarna zegt hij even lang 'Goed Idee!'. Probeer dit weer eerst zelf en kijk dan pas naar de afbeelding.

Stap 9

We kunnen de animatie van de wandelende kat verder verlevendigen met effecten. Ook deze vindt u in de categorie Uiterlijk. We slepen het commando 'verander Kleur...' en laten dit los onder 'wissel naar Uiterlijk2'. Het wordt nu keurig in de lus opgenomen. In plaats van Kleur selecteren we echter het Vissenoog-effect met waarde 30. Een effect blijft van toepassing tot het ongedaan wordt gemaakt door zijn tegendeel. Onder 'wissel naar Uiterlijk1' voegen we daarom zo'n zelfde effect toe maar dan met waarde -30. Leuk! Nu alleen nog een geluidje bij het lopen. Slagwerk 76 en 77 kunnen goede diensten bewijzen. Terugkijkend naar Stap 7 moet u dat kunnen...

Tenslotte

Zo, uw eerste programma is klaar. Met de knoppen Opslaan en Opslaan Als slaat u uw werk op en met Publiceren kunt u uw creatie zelfs op de Scratch-site zetten. Wij raden u echter aan om eerst de vele meegeleverde programmaatjes te bekijken. Door die te bestuderen leert u meer geavanceerde programmeertechnieken, bijvoorbeeld voor interactie tussen sprites of voor interactie met gebruikers. Elk commando kunt u naar het programmavenster slepen. Wanneer u er vervolgens op rechtsklikt en Hulp kiest krijgt u een gebruiksvoorbeeld te zien. Zo leert u ook de fijnere kneepjes. Veel programmeerplezier!

Deze workshop komt uit Computer Idee nummer 13, jaargang 2009.