{"id":1134,"date":"2025-12-10T16:37:00","date_gmt":"2025-12-10T15:37:00","guid":{"rendered":"https:\/\/scratch.itbib4you.be\/?page_id=1134"},"modified":"2025-12-12T15:41:15","modified_gmt":"2025-12-12T14:41:15","slug":"teken-met-een-pen","status":"publish","type":"page","link":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/","title":{"rendered":"Tekenen met een Pen"},"content":{"rendered":"\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background has-small-font-size has-custom-font-size wp-element-button\" href=\"https:\/\/scratch.itbib4you.be\/\">Lesoverzicht<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Inleiding<\/h2>\n\n\n\n<p>&nbsp;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\u00ebn <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Beweging<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Uiterlijken<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Geluid<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Gebeurtenissen<\/mark>\u2026 Tevens hebben we zelf al heel wat nieuwe blokken (procedures) aangemaakt onder de categorie <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Mijn blokken<\/mark>.<\/p>\n\n\n\n<p>Voor de standaardversie van Scratch 3 worden ook een aantal uitbreidingen aangeboden. Deze uitbreidingen worden meestal ontwikkeld door externe partijen (bijvoorbeeld Lego, Google\u2026) in samenwerking met het MIT Media Lab. Uitbreidingen zijn opvraagbaar via de knop onderaan deel A.&nbsp;De volgende afdruk toont een aantal beschikbare uitbreidingen:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-1024x591.png\" alt=\"\" class=\"wp-image-1142\" style=\"aspect-ratio:1.7327042638564312;width:562px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-1024x591.png 1024w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-300x173.png 300w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-768x443.png 768w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-1536x887.png 1536w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-2048x1182.png 2048w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-1200x693.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<p>In deze les kiezen we voor de uitbreiding <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Pen<\/mark>. We zullen deze uitbreiding gebruiken om een staafdiagram met een pen te tekenen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"986\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_03.png\" alt=\"Pen-blokken\" class=\"wp-image-1150\" style=\"aspect-ratio:0.4908773968622894;width:223px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_03.png 484w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_03-147x300.png 147w\" sizes=\"auto, (max-width: 484px) 85vw, 484px\" \/><\/figure>\n<\/div>\n\n\n<p>De <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Pen<\/mark>-uitbreiding voegt nieuwe blokken toe aan de standaardversie van Scratch 3: <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">wis alles<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">stempel<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">pen neer<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">pen op<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">maak penkleur<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">verander penkleur met<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">maak pendikte<\/mark>, &#8230;<\/p>\n\n\n\n<p>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 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Line<\/mark> of <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Pencil<\/mark> kiezen als actieve Sprite. Tevens maak ik steeds de Sprite steeds onzichtbaar.<\/p>\n\n\n\n<p>&nbsp;Het tekenen met een pen is erg eenvoudig. Bij <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">pen neer<\/mark> wordt de pen tegen het <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">speelveld<\/mark> gedrukt. Als de pen daarna wordt verplaatst dan wordt een lijn getrokken van de oorspronkelijke  plaats naar een nieuwe locatie. Bij <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">pen op<\/mark> wordt een verplaatsing van de actieve sprite niet op het <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">speelveld<\/mark> weergegeven.<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">De uitdaging: een staafdiagram tekenen<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"618\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_04.png\" alt=\"\" class=\"wp-image-1160\" style=\"aspect-ratio:1.5081354030297363;width:494px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_04.png 932w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_04-300x199.png 300w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_04-768x509.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<p>Het programma dat we wensen te ontwikkelen met de Scratch <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Pen<\/mark>-uitbreiding is voorgesteld in bovenstaande afbeelding. <\/p>\n\n\n\n<p>Laat ons even de onderdelen van de schermafdruk analyseren.&nbsp;<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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&nbsp;getekend binnen het assenstelsel.<\/p>\n\n\n\n<p>De ontwikkeling van het programma zullen we in vier stappen realiseren:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Een reeks willekeurige gegevens in een lijst (tabel) toevoegen;<\/li>\n\n\n\n<li>Het assenstelsel en de hulplijnen opbouwen;<\/li>\n\n\n\n<li>De staafdiagrammen tekenen;<\/li>\n\n\n\n<li>De waarde van elke staaf toevoegen onder de X-as.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">De tabel &#8216;data&#8217; vullen met willekeurige gegevens<\/h3>\n\n\n\n<p>Het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">initialiseerData<\/mark> werd ontwikkeld om 25 willekeurige gegevens tussen 1 en 100 te genereren en te bewaren in een lijst (tabel) met de naam <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">data<\/mark>.<\/p>\n\n\n\n<p>Het Scratch-blok ziet er dan als volgt uit:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"436\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_05.png\" alt=\"\" class=\"wp-image-1164\" style=\"aspect-ratio:1.7247722120032511;width:406px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_05.png 752w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_05-300x174.png 300w\" sizes=\"auto, (max-width: 752px) 85vw, 752px\" \/><figcaption class=\"wp-element-caption\">initialiseerData<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Het assenstelsel bouwen<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Initialiseer gegevens<\/h4>\n\n\n\n<p>Om de plaats van het assenstelsel op het speelveld aanpasbaar te maken, hebben we vier variabelen gecre\u00eberd om het begin- en het eindpunt op de X- en Y-as bij te houden: <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xminpositie<\/mark> (links), <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xmaxpositie<\/mark> (rechts), <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark> (onderaan) en <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">ymaxpositie<\/mark> (bovenaan). Deze variabelen worden ge\u00efnitialiseerd in het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">initialiseerGegevens<\/mark>. <\/p>\n\n\n\n<p>Het speelveld van Scratch is 480 pixels breed (X-as) en 360 pixels hoog (Y-as). De X-co\u00f6rdinaten lopen van -240 tot +240 en de Y-as van -180 tot +180. Het punt (0,0) ligt in het midden van het speelveld.<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"448\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_06.png\" alt=\"\" class=\"wp-image-1170\" style=\"aspect-ratio:0.7857486759749639;width:192px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_06.png 352w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_06-236x300.png 236w\" sizes=\"auto, (max-width: 352px) 85vw, 352px\" \/><figcaption class=\"wp-element-caption\">initialiseerGegevens<\/figcaption><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Het assenstelsel tekenen<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"382\" height=\"1024\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_07-382x1024.png\" alt=\"\" class=\"wp-image-1176\" style=\"aspect-ratio:0.3730539363978455;width:231px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_07-382x1024.png 382w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_07-112x300.png 112w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_07.png 510w\" sizes=\"auto, (max-width: 382px) 85vw, 382px\" \/><\/figure>\n<\/div>\n\n\n<p>Het tekenen van de X- en Y-as is nu vrij eenvoudig. We plaatsen eerst de Sprite op de kruising van de variabelen <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xminpositie<\/mark> en <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark> zetten daarna de <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">pen neer<\/mark> en veranderen de positie van de sprite naar <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xmaxpositie<\/mark> om de X-as te tekenen en daarna vanaf <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xminpositie<\/mark> en <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark>naar <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">ymaxpositie<\/mark> om de Y-as te tekenen.<\/p>\n\n\n\n<p>Tussen de vijf horizontale hulplijnen hebben we steeds 50 pixels geplaatst vertrekkend vanaf <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark> (dus op -100, -50, 0, +50, +100). Om de waarde van <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark> niet te moeten veranderen, wordt een nieuwe variabele gecre\u00eberd: <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">ywaarde<\/mark>. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">ywaarde<\/mark> wordt eerst ge\u00efnitialiseerd met de waarde van de variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark> en wordt in vijf stappen iedere keer met de waarde 50 verhoogd.<\/p>\n\n\n\n<p>Het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">wis alles<\/mark> verwijdert alle getekende lijnen. Het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">maak pen kleur<\/mark> 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 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">maak pendikte<\/mark>.<\/p>\n\n\n\n<p>De variabelen <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y1<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y2<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y3<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y4<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y5<\/mark> en <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y6<\/mark> werden gecre\u00eberd om de hulplijnen een waarde te geven. Om de mogelijke waarden over de hulplijnen gelijkmatig te verdelen, werden deze variabelen ge\u00efnitialiseerd met 0, 20, 40, 60, 80 en 100. Deze variabelen worden naast de Y-as getoond.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Staafdiagrammen tekenen<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">E\u00e9n staaf tekenen<\/h4>\n\n\n\n<p>Het tekenen van \u00e9\u00e9n 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 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y6<\/mark>. Een element uit de lijst met de waarde 1 kan worden voorgesteld&nbsp; met een hoogte van 250\/<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y6<\/mark>. 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.<\/p>\n\n\n\n<p>De variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">hoogte<\/mark> in het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">tekenEenStaaf<\/mark> berekent de hoogte in pixels van het getal (de \u2018blok\u2019-variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">waarde<\/mark>) dat moet worden voorgesteld. De variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xpositie<\/mark> 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"1024\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_08-612x1024.png\" alt=\"\" class=\"wp-image-1180\" style=\"aspect-ratio:0.5976667023440009;width:313px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_08-612x1024.png 612w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_08-179x300.png 179w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_08.png 614w\" sizes=\"auto, (max-width: 612px) 85vw, 612px\" \/><figcaption class=\"wp-element-caption\">tekenEenStaaf<\/figcaption><\/figure>\n<\/div>\n\n\n<p>De lus <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">herhaal 5<\/mark> lijkt wellicht wat eigenaardig. Elke staaf bestaat uit 5 lijnen vertrekkend vanuit 5 opeenvolgende pixels. De variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xpositie<\/mark> wordt dan ook 5 maal met 1 pixel verhoogd in de <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">herhaal 5<\/mark>-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.<\/p>\n\n\n\n<p>Op het einde van het blok wordt het signaal <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">toonWaarde<\/mark> verstuurd. Dit signaal zal worden gebruikt om de waarde van de staaf te \u2018tekenen\u2019 onder de X-as.<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Alle staven tekenen<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"508\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_09.png\" alt=\"\" class=\"wp-image-1184\" style=\"aspect-ratio:1.1024025865432856;width:280px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_09.png 560w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_09-300x272.png 300w\" sizes=\"auto, (max-width: 560px) 85vw, 560px\" \/><figcaption class=\"wp-element-caption\">tekenAlleStaven<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Om nu alle staven te tekenen is het voldoende om het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">tekenEenStaaf<\/mark> op te roepen voor elk element in de lijst <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">data<\/mark>. Bij het oproepen van <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">tekenEenStaaf <\/mark>wordt iedere keer de waarde van het actieve element in de tabel <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">data<\/mark> doorgegeven.<\/p>\n\n\n\n<div style=\"height:2px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Het hoofdprogramma kan nu als volgt worden samengevat:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"430\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_10.png\" alt=\"Teken met een pen\" class=\"wp-image-1186\" style=\"aspect-ratio:0.772121079981104;width:184px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_10.png 332w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_10-232x300.png 232w\" sizes=\"auto, (max-width: 332px) 85vw, 332px\" \/><figcaption class=\"wp-element-caption\">Hoofdprogramma<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">De waarde van de staaf toevoegen<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Gebruik van variabelen<\/h4>\n\n\n\n<p>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\u00ebren. 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.<\/p>\n\n\n\n<p>Scratch biedt vier voorstellingswijzen aan voor variabelen: <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">normaal uitlezen<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">groot uitlezen<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">schuif<\/mark> of <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">verdwijn<\/mark>. Deze keuzemogelijkheden zijn beschikbaar door de variabele op het speelveld aan te klikken. De variabelen <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y1<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y2<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">y3<\/mark>&#8230; op de zijkant van de Y-as worden als <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">groot uitlezen<\/mark> voorgesteld.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">De tekst stempelen<\/h4>\n\n\n\n<p>Hoe kunnen we dan de waarden onderaan de X-as zo klein voorstellen? <\/p>\n\n\n\n<p>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 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">uiterlijk<\/mark> (een kostuum) van deze Sprite worden getekend. Hou deze nieuwe Sprite ook verborgen zodat deze niet op het speelveld verschijnt.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"965\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_11-1024x965.png\" alt=\"\" class=\"wp-image-1189\" style=\"aspect-ratio:1.0611643330876934;width:454px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_11-1024x965.png 1024w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_11-300x283.png 300w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_11-768x724.png 768w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_11-1200x1131.png 1200w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_11.png 1522w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption class=\"wp-element-caption\">Een uiterlijk defini\u00ebren<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Bovenstaande schermafdruk toont de werkwijze die werd gebruikt om alle uiterlijken van Sprite2 te defini\u00ebren. Voor Sprite2 werden voor alle cijfers 0 tot 9 een  uiterlijk aangemaakt. De naam van elk <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">kostuum<\/mark> verwijst naar het cijfer dat door de Sprite wordt voorgesteld. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"790\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_12.png\" alt=\"\" class=\"wp-image-1191\" style=\"aspect-ratio:1.1139352414631452;width:376px;height:auto\" srcset=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_12.png 880w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_12-300x269.png 300w, https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_12-768x689.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption class=\"wp-element-caption\">Code van Sprite2<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Sprite2 wordt in werking gesteld op het moment dat Sprite2 het signaal <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">toonWaarde<\/mark> ontvangt van het blok <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">tekenEenStaaf<\/mark>. Na positionering onder de staaf (iets onder de waarde van de variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">yminpositie<\/mark> en links van de variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">xpositie<\/mark>) wordt cijfer na cijfer opgehaald uit het actieve element (variabele <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">positie<\/mark> in de lijst <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">data<\/mark>) en krijgt Sprite2 het correcte <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">kostuum<\/mark> (het kostuum aangeduid door het opgehaalde cijfer) aangetrokken. Het gekozen <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">uiterlijk<\/mark> wordt daarna <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">gestempeld<\/mark> (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\u2026 Na de afdruk van een eerste cijfer wordt de <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">x<\/mark>-waarde van Sprite2 met 5 verhoogd om eventueel het volgende cijfer te kunnen afdrukken. <\/p>\n\n\n\n<p>De grootte van de gestempelde waarde hebben we in het programma aangepast naar 50% van de oorspronkelijke grootte. Indien de stempel nog t\u00e9 groot is dan kan de grootte nog verder worden aangepast via het blok <img loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"38\" class=\"wp-image-1193\" style=\"width: 120px;\" src=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_13.png\" alt=\"\">.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inleiding &nbsp;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\u00ebn Beweging, Uiterlijken, Geluid, Gebeurtenissen\u2026 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 &hellip; <a href=\"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/\" class=\"more-link\">Lees verder<span class=\"screen-reader-text\"> &#8220;Tekenen met een Pen&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1134","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tekenen met een Pen - Scratch 3<\/title>\n<meta name=\"description\" content=\"In de les &#039;teken met een pen&#039; gebruiken wij de Scratch - uitbreiding &#039;Pen&#039; om een reeks gegevens in een staafdiagram voor te stellen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/\" \/>\n<meta property=\"og:locale\" content=\"nl_BE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tekenen met een Pen - Scratch 3\" \/>\n<meta property=\"og:description\" content=\"In de les &#039;teken met een pen&#039; gebruiken wij de Scratch - uitbreiding &#039;Pen&#039; om een reeks gegevens in een staafdiagram voor te stellen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/\" \/>\n<meta property=\"og:site_name\" content=\"Scratch 3\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-12T14:41:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2546\" \/>\n\t<meta property=\"og:image:height\" content=\"1470\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/\",\"url\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/\",\"name\":\"Tekenen met een Pen - Scratch 3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/scratch.itbib4you.be\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Les_15_02-1024x591.png\",\"datePublished\":\"2025-12-10T15:37:00+00:00\",\"dateModified\":\"2025-12-12T14:41:15+00:00\",\"description\":\"In de les 'teken met een pen' gebruiken wij de Scratch - uitbreiding 'Pen' om een reeks gegevens in een staafdiagram voor te stellen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/#breadcrumb\"},\"inLanguage\":\"nl-BE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-BE\",\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/scratch.itbib4you.be\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Les_15_02.png\",\"contentUrl\":\"https:\\\/\\\/scratch.itbib4you.be\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Les_15_02.png\",\"width\":2546,\"height\":1470},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/index.php\\\/teken-met-een-pen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/scratch.itbib4you.be\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tekenen met een Pen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/scratch.itbib4you.be\\\/#website\",\"url\":\"https:\\\/\\\/scratch.itbib4you.be\\\/\",\"name\":\"Scratch 3\",\"description\":\"Leer programmeren met Scratch 3\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/scratch.itbib4you.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-BE\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tekenen met een Pen - Scratch 3","description":"In de les 'teken met een pen' gebruiken wij de Scratch - uitbreiding 'Pen' om een reeks gegevens in een staafdiagram voor te stellen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/","og_locale":"nl_BE","og_type":"article","og_title":"Tekenen met een Pen - Scratch 3","og_description":"In de les 'teken met een pen' gebruiken wij de Scratch - uitbreiding 'Pen' om een reeks gegevens in een staafdiagram voor te stellen.","og_url":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/","og_site_name":"Scratch 3","article_modified_time":"2025-12-12T14:41:15+00:00","og_image":[{"width":2546,"height":1470,"url":"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"10 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/","url":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/","name":"Tekenen met een Pen - Scratch 3","isPartOf":{"@id":"https:\/\/scratch.itbib4you.be\/#website"},"primaryImageOfPage":{"@id":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/#primaryimage"},"image":{"@id":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/#primaryimage"},"thumbnailUrl":"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02-1024x591.png","datePublished":"2025-12-10T15:37:00+00:00","dateModified":"2025-12-12T14:41:15+00:00","description":"In de les 'teken met een pen' gebruiken wij de Scratch - uitbreiding 'Pen' om een reeks gegevens in een staafdiagram voor te stellen.","breadcrumb":{"@id":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/#breadcrumb"},"inLanguage":"nl-BE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/"]}]},{"@type":"ImageObject","inLanguage":"nl-BE","@id":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/#primaryimage","url":"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02.png","contentUrl":"https:\/\/scratch.itbib4you.be\/wp-content\/uploads\/2025\/12\/Les_15_02.png","width":2546,"height":1470},{"@type":"BreadcrumbList","@id":"https:\/\/scratch.itbib4you.be\/index.php\/teken-met-een-pen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/scratch.itbib4you.be\/"},{"@type":"ListItem","position":2,"name":"Tekenen met een Pen"}]},{"@type":"WebSite","@id":"https:\/\/scratch.itbib4you.be\/#website","url":"https:\/\/scratch.itbib4you.be\/","name":"Scratch 3","description":"Leer programmeren met Scratch 3","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/scratch.itbib4you.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-BE"}]}},"_links":{"self":[{"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/1134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/comments?post=1134"}],"version-history":[{"count":52,"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/1134\/revisions"}],"predecessor-version":[{"id":1205,"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/1134\/revisions\/1205"}],"wp:attachment":[{"href":"https:\/\/scratch.itbib4you.be\/index.php\/wp-json\/wp\/v2\/media?parent=1134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}