Tekenen met een Pen

Inleiding

 In de voorgaande hoofdstukken hebben we kennis gemaakt met heel wat standaardblokken die in Scratch 3 worden aangeboden. Deze blokken werden onderverdeeld in de categorieën Beweging, Uiterlijken, Geluid, Gebeurtenissen… Tevens hebben we zelf al heel wat nieuwe blokken (procedures) aangemaakt onder de categorie Mijn blokken.

Voor de standaardversie van Scratch 3 worden ook een aantal uitbreidingen aangeboden. Deze uitbreidingen worden meestal ontwikkeld door externe partijen (bijvoorbeeld Lego, Google…) in samenwerking met het MIT Media Lab. Uitbreidingen zijn opvraagbaar via de knop onderaan deel A. De volgende afdruk toont een aantal beschikbare uitbreidingen:

In deze les kiezen we voor de uitbreiding Pen. We zullen deze uitbreiding gebruiken om een staafdiagram met een pen te tekenen.

De Pen-uitbreiding voegt nieuwe blokken toe aan de standaardversie van Scratch 3: wis alles, stempel, pen neer, pen op, maak penkleur, verander penkleur met, maak pendikte, …

De betekenis van deze nieuwe blokken is gemakkelijk te begrijpen. De blokken verwijzen naar een pen maar eigenlijk is het steeds de actieve Sprite die tekent. Je kan in dit geval dus best Line of Pencil kiezen als actieve Sprite. Tevens maak ik steeds de Sprite steeds onzichtbaar.

 Het tekenen met een pen is erg eenvoudig. Bij pen neer wordt de pen tegen het speelveld gedrukt. Als de pen daarna wordt verplaatst dan wordt een lijn getrokken van de oorspronkelijke plaats naar een nieuwe locatie. Bij pen op wordt een verplaatsing van de actieve sprite niet op het speelveld weergegeven.

De uitdaging: een staafdiagram tekenen

Het programma dat we wensen te ontwikkelen met de Scratch Pen-uitbreiding is voorgesteld in bovenstaande afbeelding.

Laat ons even de onderdelen van de schermafdruk analyseren. 

De grafiek bestaat uit een assenstelsel: onderaan de horizontale X-as, links de verticale Y-as en vijf horizontale hulplijnen om de waarde van elke staaf gemakkelijker te kunnen visualiseren. De waarde toegekend aan elke hulplijn wordt links van de Y-as weergegeven.

Elke staaf is van een andere kleur. De waarde van elke staaf wordt onderaan de X-as afgedrukt. De hoogte van elke staaf wordt correct getekend binnen het assenstelsel.

De ontwikkeling van het programma zullen we in vier stappen realiseren:

1. Een reeks willekeurige gegevens in een lijst (tabel) toevoegen;
2. Het assenstelsel en de hulplijnen opbouwen;
3. De staafdiagrammen tekenen;
4. De waarde van elke staaf toevoegen onder de X-as.

De tabel ‘data’ vullen met willekeurige gegevens

Het blok initialiseerData werd ontwikkeld om 25 willekeurige gegevens tussen 1 en 100 te genereren en te bewaren in een lijst (tabel) met de naam data.

Het Scratch-blok ziet er dan als volgt uit:

Het assenstelsel bouwen

Initialiseer gegevens

Om de plaats van het assenstelsel op het speelveld aanpasbaar te maken, hebben we vier variabelen gecreëerd om het begin- en het eindpunt op de X- en Y-as bij te houden: xminpositie (links), xmaxpositie (rechts), yminpositie (onderaan) en ymaxpositie (bovenaan). Deze variabelen worden geïnitialiseerd in het blok initialiseerGegevens.

Het speelveld van Scratch is 480 pixels breed (X-as) en 360 pixels hoog (Y-as). De X-coördinaten lopen van -240 tot +240 en de Y-as van -180 tot +180. Het punt (0,0) ligt in het midden van het speelveld.

Het assenstelsel tekenen

Het tekenen van de X- en Y-as is nu vrij eenvoudig. We plaatsen eerst de Sprite op de kruising van de variabelen xminpositie en yminpositie zetten daarna de pen neer en veranderen de positie van de sprite naar xmaxpositie om de X-as te tekenen en daarna vanaf xminpositie en yminpositienaar ymaxpositie om de Y-as te tekenen.

Tussen de vijf horizontale hulplijnen hebben we steeds 50 pixels geplaatst vertrekkend vanaf yminpositie (dus op -100, -50, 0, +50, +100). Om de waarde van yminpositie niet te moeten veranderen, wordt een nieuwe variabele gecreëerd: ywaarde. ywaarde wordt eerst geïnitialiseerd met de waarde van de variabele yminpositie en wordt in vijf stappen iedere keer met de waarde 50 verhoogd.

Het blok wis alles verwijdert alle getekende lijnen. Het blok maak pen kleur biedt de mogelijkheid om de kleur van de getekende lijn te bepalen. De kleur met waarde 0 komt bijvoorbeeld overeen met de rode kleur. De dikte van een lijn kan dan nog worden veranderd door middel van het blok maak pendikte.

De variabelen y1, y2, y3, y4, y5 en y6 werden gecreëerd om de hulplijnen een waarde te geven. Om de mogelijke waarden over de hulplijnen gelijkmatig te verdelen, werden deze variabelen geïnitialiseerd met 0, 20, 40, 60, 80 en 100. Deze variabelen worden naast de Y-as getoond.

Staafdiagrammen tekenen

Eén staaf tekenen

Het tekenen van één staaf is niet erg moeilijk. We moeten enkel nog correct de hoogte van de staaf bepalen op basis van de waarde die we wensen te tekenen. Bemerk even dat we vijf hulplijnen hebben getekend die steeds op een afstand van 50 pixels uit elkaar liggen. De totale afstand tussen de X-as en de laatste hulplijn is dus 250 pixels. De waarde toegekend aan de laatste hulplijn is opgenomen in de variabele y6. Een element uit de lijst met de waarde 1 kan worden voorgesteld  met een hoogte van 250/y6. Het bekomen getal kunnen we nadien vermenigvuldigen met de waarde die we wensen voor te stellen om de correcte hoogte in pixels van eender welk getal te berekenen.

De variabele hoogte in het blok tekenEenStaaf berekent de hoogte in pixels van het getal (de ‘blok’-variabele waarde) dat moet worden voorgesteld. De variabele xpositie verwijst naar de plaats op de X-as van waaruit een verticale lijn moet worden getekend. Deze variabele zal een startwaarde krijgen in een ander blok. In dit blok wordt de startwaarde eerst met 10 verhoogd. Elke staaf start namelijk 10 pixels verder dan het einde van de vorige staaf.

De lus herhaal 5 lijkt wellicht wat eigenaardig. Elke staaf bestaat uit 5 lijnen vertrekkend vanuit 5 opeenvolgende pixels. De variabele xpositie wordt dan ook 5 maal met 1 pixel verhoogd in de herhaal 5-structuur. We hadden dit ook kunnen realiseren door de pendikte te verhogen. De aansluiting van een staaf met de X-as is in dit geval echter van iets lagere kwaliteit.

Op het einde van het blok wordt het signaal toonWaarde verstuurd. Dit signaal zal worden gebruikt om de waarde van de staaf te ‘tekenen’ onder de X-as.

Alle staven tekenen

Om nu alle staven te tekenen is het voldoende om het blok tekenEenStaaf op te roepen voor elk element in de lijst data. Bij het oproepen van tekenEenStaaf wordt iedere keer de waarde van het actieve element in de tabel data doorgegeven.

Het hoofdprogramma kan nu als volgt worden samengevat:

De waarde van de staaf toevoegen

Gebruik van variabelen

Als we de waarde van elke staaf onderaan de X-as willen toevoegen door middel van een variabele dan zouden we 25 nieuwe variabelen moeten definiëren. Dit is natuurlijk de meest eenvoudige oplossing. Het zou evenwel heel erg moeilijk zijn om deze variabelen correct te positioneren onder elke staaf. De mogelijkheid om de voorstelling van de variabelen te wijzigen op het speelveld is namelijk heel erg beperkt.

Scratch biedt vier voorstellingswijzen aan voor variabelen: normaal uitlezen, groot uitlezen, schuif of verdwijn. Deze keuzemogelijkheden zijn beschikbaar door de variabele op het speelveld aan te klikken. De variabelen y1, y2, y3… op de zijkant van de Y-as worden als groot uitlezen voorgesteld.

De tekst stempelen

Hoe kunnen we dan de waarden onderaan de X-as zo klein voorstellen?

Een eenvoudige manier om dit probleem op te lossen is gebruik te maken van een nieuwe Sprite waarbij de cijfers van 0 tot 9 als een uiterlijk (een kostuum) van deze Sprite worden getekend. Hou deze nieuwe Sprite ook verborgen zodat deze niet op het speelveld verschijnt.

Bovenstaande schermafdruk toont de werkwijze die werd gebruikt om alle uiterlijken van Sprite2 te definiëren. Voor Sprite2 werden voor alle cijfers 0 tot 9 een uiterlijk aangemaakt. De naam van elk kostuum verwijst naar het cijfer dat door de Sprite wordt voorgesteld.

Sprite2 wordt in werking gesteld op het moment dat Sprite2 het signaal toonWaarde ontvangt van het blok tekenEenStaaf. Na positionering onder de staaf (iets onder de waarde van de variabele yminpositie en links van de variabele xpositie) wordt cijfer na cijfer opgehaald uit het actieve element (variabele positie in de lijst data) en krijgt Sprite2 het correcte kostuum (het kostuum aangeduid door het opgehaalde cijfer) aangetrokken. Het gekozen uiterlijk wordt daarna gestempeld (afgedrukt) op het speelveld. Met een stempel is verder niks aan te vangen. Een stempel kan niet meer worden verplaatst, kan niet van kleur veranderen, kan niet meer groter of kleiner worden gemaakt… Na de afdruk van een eerste cijfer wordt de x-waarde van Sprite2 met 5 verhoogd om eventueel het volgende cijfer te kunnen afdrukken.

De grootte van de gestempelde waarde hebben we in het programma aangepast naar 50% van de oorspronkelijke grootte. Indien de stempel nog té groot is dan kan de grootte nog verder worden aangepast via het blok .