Konstruera figurer med datorskärm

När vi vill rita en geometrisk figur på ett papper kan vi använda oss av penna och linjal. Här är en... kvadrat. Men, om man vill rita en likadan kvadrat på en datorskärm, hur gör vi då? Datorn måste veta vissa saker: Hur stor kvadraten ska vara, vad är dess sidlängd?

Orientering, var ska kvadraten ritas ut? På en skärm kan vi inte använda längdenheter som centimeter för att berätta hur stor kvadraten ska vara, eller var den ska ritas. En skärm är inte indelad i centimetrar eller millimetrar utan i små rutor, pixlar. Så istället berättar vi vilka pixlar på skärmen, som ska färgas i den färg vi vill att kvadraten ska ha. Datorskärmen, med alla sina pixlar, är ett koordinatsystem med en x-axel och en y-axel.

I övre vänstra hörnet på skärmen är x lika med noll och y lika med noll. Precis som i ett vanligt koordinatsystem ökar x-värdena åt höger. Men, y-axeln på en datorskärm är upp och ner, om vi jämför med hur det är i vanliga fall i matematiken. Ju längre ner på skärmen, desto högre y-värde. Nog pratat!

Nu ritar vi en kvadrat. Vi börjar i kvadratens övre vänstra hörn. I det här exemplet, har den pixeln positionen x lika med 100 och y lika med 200. Vi ska rita en kvadrat med sidlängden 100 pixlar. Första linjen på kvadraten går rakt åt höger från startpixeln.

Rakt åt höger ökar x-värdet med sidlängden, 100 pixlar. I y-led ändras ingenting eftersom linjen varken går upp eller ner, den är horisontell. X-värdet på linjens sista pixel är 100, alltså värdet där vi började, plus sidlängden 100, tillsammans 200. Y-värdet på den sista pixeln har samma värde som startpixeln, 200. Alla pixlar mellan startpixeln och slutpixeln färgas i den färg vi vill ha.

Nästa linje, den andra sidan i kvadraten, går rakt neråt på skärmen. Den här linjen ändras inte i x-led. Den sista pixeln har samma x-värde som i övre högra hörnet. Men y-värdet ändras med kvadratens sidlängd, 100 pixlar. Eftersom y-värdet ökar när vi rör oss neråt på skärmen blir sista pixelns y-värde: vårt startvärde, 200, plus 100, alltså 300.

Tredje linjen är 100 pixlar åt vänster på x-axeln. Då minskar x-värdet med 100 pixlar. Y-värdet ändras inte. Vi hamnar på x lika med 100 och y lika med 300. Nu är det bara den fjärde linjen kvar, den sista sidan i kvadraten.

Den ritas från x lika med 100 och y lika med 300, till den pixel där vi började. Där är x lika med 100 och y lika med 200. Nu är kvadratens kanter ritade på skärmen. Bra! Nu färgar vi alla pixlar innanför kanten i rött.

Alltså, för att rita på en datorskärm måste vi använda skärmens koordinatsystem. Då vet datorn var den ska rita. Avstånd på skärmen mäts i antalet rutor på skärmen, pixlar. Vi ritar på skärmen genom att färga pixlar. För att rita en geometrisk figur behövs information om figurens egenskaper.

En kvadrat behöver sidlängd, en cirkel behöver mittpunkt och diameter, eller radie och så vidare. Allt det här vi har pratat om, måste vi berätta för datorn. Och det gör vi genom att vi använder ett språk som datorn förstår, ett programmeringsspråk.