Naast het werken met tekst kan je in Small Basic ook werken met grafische elementen: lijnen, vormen en kleuren. Hierbij gebruik je het grafische venster met de witte achtergrond.

Met de bewerking "Show" van het "GraphicsWindow" object toon je het grafische venster.

Standaard wordt een venster getoond van 625,5 pixels (of beeldpunten) breed en 444 pixels hoog.

Je kan uiteraard andere afmetingen instellen door de eigenschap "Width" of "Height" van het "GraphicsWindow" object een andere waarde te geven.

Voor het tekenen van grafische elementen moet je het grafische coördinatensysteem gebruiken. De linkerbovenhoek wordt aangeduid met (0,0). In de breedte-as (van links naar rechts) wordt meestal de variabele "x" gebruikt en in de hoogte-as (van boven naar onder) wordt meestal de variabele "y" gebruikt.

Je kan de tekst in de titelbalk van het grafische venster wijzigen met de eigenschap "Title" van het "GraphicsWindow" object.

Als je lijnen wil tekenen moet je de coördinaten van 2 punten opgeven: het beginpunt en het eindpunt. Het beginpunt wordt aangeduid met (x1,y1). Het eindpunt wordt aangeduid met (x2,y2).

Je kunt de dikte van de lijn instellen met "PenWidth" en de kleur van de lijn met "PenColor".

Alle lijnen en vormen die na deze instellingen worden getekend gebruiken deze kleur en deze dikte!

Met een "For" lus kan je lijnen in alle richtingen tekenen. Eerst zijn de y-coördinaten vastgezet en daarna zijn de x-coördinaten vastgezet.

Je kunt ook allerlei vormen gaan tekenen: een rechthoek of vierkant (rectangle), een ovaal of cirkel (ellipse) en een driehoek (triangle). Elk van deze vormen kan je ook opvullen met een kleur.

Voor het tekenen gebruik je de bewerkingen "DrawRectangle" (rechthoek), "DrawEllipse" (ovaal) en "DrawTriangle" (driehoek) van het object "GraphicsWindow".

Voor het opvullen gebruik je de bewerkingen "FillRectangle", "FillEllipse" en "FillTriangle" van het object "GraphicsWindow".

Merk op dat het startpunt van het ovaal op de coördinaat van de linkerbovenhoek van de denkbeeldige rechthoek is ingesteld (x=20, y=20)! In de afbeelding hiernaast komt die coördinaat ook overeen met het eerste punt van de driehoek (x1=20, y1=20).

Voor het opvullen van vormen gebruik je de eigenschap "BrushColor" van het object "GraphicsWindow". Merk op dat de laatst getekende vorm de vorige vormen kan bedekken!

Je kan met random gegenereerde getallen speciale effecten bekomen. Een voorbeeld:

De x en y coördinaat wordt willekeurig bepaald door een getal van 1 tot de breedte of hoogte van het grafische venster. Om een willekeurige kleur te gebruiken zet je de "BrushColor" eigenschap gelijk aan het resultaat van de bewerking "GetRandomColor" van het "GraphicsWindow" object.

De diameter van de cirkels varieert van 1 tot 40 pixels (beeldpunten).

In Small Basic kan je een schildpad gebruiken om tekeningen te laten maken. Dit idee komt van de programmeertaal "Logo" waarbij men "Turtle Graphics" kon gebruiken (in de jaren 70 van de vorige eeuw).

Er wordt een schildpad (turtle) in het midden in het grafische venster getoond. Deze schildpad kan je laten bewegen in alle richtingen. Als de schildpad zich verplaatst tekent ze de pixels waar ze is geweest in een bepaalde kleur (standaardkleur = zwart) en een bepaalde dikte (standaard = 1).

De schildpad kan zich naar rechts, naar links of in een bepaalde hoek draaien. Je gebruikt daarbij de bewerkingen "TurnRight", "TurnLeft" en "Turn(hoek)".

Als je bijvoorbeeld een veelhoek wil tekenen moet je de hoek bepalen door 360 (graden) te delen door het aantal zijkanten.

Als je de zijkanten verhoogt naar bvb. 100 zal je merken dat er een cirkel wordt getekend. Uiteraard moet je dan de verplaatsing ook delen door het aantal zijkanten.

Stel je de pen dikte in op bvb. 50 dan ziet het er zo uit:

En zullen we eens een slang tekenen…

Door de hoek af te trekken van 360 (graden) verplaatst de schildpad zich in de andere richting.

Er wordt een halve cirkel getekend omdat we maar 50 zijkanten (zijkanten / 2) laten tekenen.

Je kunt de schildpad tijdelijk laten stoppen met tekenen door de bewerking "PenUp" van het object "Turtle" uit te voeren.

Dan kan je de schildpad draaien en verplaatsen om dan ergens anders in het grafische venster verder te gaan met tekenen.

In het onderstaande programma wordt er zo een tunnel getekend.

Na de eerste halve cirkel verplaatst de schildpad zich telkens bijna terug naar het beginpunt.

Met de eigenschap "Angle" bepaal je de hoek waarmee de schildpad zich moet draaien (90 = links, 180 = vooruit, 270 = rechts en 360 = omkeren).

Voor het links en rechts draaien kan je ook de bewerkingen "TurnLeft" en "TurnRight" gebruiken.

1. Schrijf een programma dat een trap tekent zoals in het voorbeeld. Gebruik hierbij 2 "For" lussen. (programma naam: trap)

2. Schrijf een programma dat een schaakbord tekent. Het eerste vakje links van de eerste rij heeft een witte achtergrondkleur en het volgende vakje een bruine achtergrondkleur. De volgende vakjes hebben afwisselend een witte en bruine achtergrondkleur. Bij de tweede rij vakjes is het eerste vakje bruin, het tweede vakje wit, enz… (programma naam: schaakbord)

Tip 1: gebruik 2 "For" lussen van 1 tot 8 Tip 2: teken eerst een vierkant en vul het daarna op Tip 3: als de kolomwaarde even is en de rijwaarde oneven zet je de kleur op bruin anders zet je de kleur op wit.

3. Schrijf een programma dat de verplaatsing van een balletje weergeeft in een grafisch venster met een breedte van 400 pixels en een hoogte van 200. Als het balletje de randen bereikt moet het van richting veranderen om zo binnen het grafische venster te blijven. In het voorbeeld worden 500 balletjes getekend. Tip: gebruik 2 variabelen voor de x en y verplaatsing (bvb. "xverplaats" en "yverplaats"). Als het balletje de rand bereikt maak je de inhoud van deze variabele negatief. Met een wit balletje op de vorige coördinaten kan je het "spoor" verbergen. (programma naam: stuiterbal)

4. Schrijf een programma dat een staafdiagram tekent van de gegevens in de temperatuurmeting array (zie eerste oefening in Small Basic – arrays).

Tip 1: de breedte van de rechthoeken kan je bepalen door de temperatuur te vermenigvuldigen met 10. Tip 2: de datum indexen kan je ophalen door een nieuwe array te laten genereren vanuit de temperatuur array bvb. index = Array.GetAllIndices(temp). De eerste datum is dan index[1] en de eerste temperatuur is dan temp[index[1]]. (programma naam: staafdiagram)