Grafički prozor i kornjačina grafika – Microsoft Small Basic 4. dio

gogaS

Dosad su se svi naši programi izvodili u tekstualnom prozoru Small Basica. U ovom nastavku upoznat ćemo vas grafičkim prozorom, njegovim mogućnostima i kornjačinom grafikom. Da, dobro ste pročitali: u Small Basicu, baš kao i u Logu, možemo crtati pomoću kornjače :-).

Small Basic uistinu pruža izvrsnu podršku za rad s grafikom. Grafički prozor pokrećemo naredbom GraphicsWindow.Show(), jednom od dvadesetak kontrola Small Basica. Radi se o kontroli kojom započinjemo bilo kakav rad s grafikom. Sadrži mnoštvo naredbi koje možete vidjeti u okviru Intellisense kad upišete naredbu GraphicsWindow te nakon nje stavite točku. Ukoliko želite pogledati sve naredbe koje se nalaze u ovoj kontroli, potražiti ih na stranicama Small Basic API Reference.

slika4.1 slika4.2
Naredbe u kontroli GraphicsWindow potražite u okviru Intellisense      Grafički prozor pokrenut pomoću naredbe GraphicsWindow.Show()

Oblikovanje grafičkog prozora

Prije nego krenemo s rješavanjem grafičkih problema, pogledajmo kako se dodatno može oblikovati grafički prozor. Small Basic omogućuje da svaki grafički prozor prilagodimo svojim potrebama: možemo odrediti veličinu prozora, odnosno njegovu širinu i visinu. Za podešavanje veličine, širine i visine prozora koristimo dvije naredbe iz klase GraphicsWindowWidth i Height. Pogledajmo sljedeći primjer:

GraphicsWindow.Width = 320
GraphicsWindow.Height = 200.

Ove dvije naredbe zadaju grafički prozor veličine 320 x 200. Nadalje, prozoru pomoću naredbe GraphicsWindow.BackgroundColor možemo zadati i pozadinsku boju. Naredbi treba pridružiti boju, njen engleski naziv, ili heksadecimalni kôd boje. Primjerice:

GraphicsWindow.BackgroundColor = "#FFC0CB"
ili
GraphicsWindow.BackgroundColor = "Yellow".

slika4.3Ukoliko vas zanima potpuna lista naziva boja koje možete upotrijebiti u Small Basicu, potražite je na portalu „Suradnici u učenju“ među materijalima o Small Basicu.

Uz određivanje veličine i pozadinske boje prozora, grafičkom prozoru možete dodijeliti i naziv pomoću naredbe Title. I ova naredba dolazi u klasi GraphicsWindow te ima sintaksu GraphicsWindow.Title = "Moj prvi grafički prozor". Spojimo li sve ove naredbe u jedan program, lako možemo oblikovati grafički prozor poput ovog na slici.

 

 

Program kojim oblikujemo grafički prozor žute boje

Grafički prozor i geometrijski likovi

slika4.4Nakon što postavimo grafički prozor, unutar njega možemo crtati geometrijske likove, tekst i slike. U nekoliko sljedećih primjera upoznat ćemo vas s crtanjem raznih geometrijskih likova. Krenut ćemo od crte za čije crtanje ćemo upotrijebiti naredbu GraphicsWindow.DrawLine(x1, y1, x2, y2) u kojoj x1, y1 predstavljaju x i y koordinate početne točke, a x2 i y2 koordinate završne točke kojima je crta određena. Važno je napomenuti da se koordinatna točka (0,0), odnosno ishodište ovog sustava, nalazi u gornjem lijevom kutu. Stoga, prilikom određivanja mjesta lika koji crtate, imajte na umu da je ishodište grafičkog prozora smješteno u gornjem lijevom kutu prozora.

 

Primjer programa pomoću kojeg smo nacrtali crte koje se sijeku

Sljedeća zanimljiva grafička naredba je GraphicsWindow.PenColor pomoću koje mijenjamo boju crte. Kako biste promijenili boju crte, naredbi pridružite vrijednost neke boje. Primjerice, želite li nacrtati crvenu crtu, upotrijebite naredbu GraphicsWindow.PenColor = "Red". Za promjenu boje također upotrebljavamo engleske nazive. No, umjesto naziva boja, možemo koristiti i web-notaciju za boje (#RRGGBB). Primjerice, #FF0000 označava crvenu boju, #FFFF00 žutu itd.

Pogledajmo kako to izgleda na jednom jednostavnom primjeru u kojemu ćemo nacrtati dvije prekrižene crte. Program na svijetloplavoj pozadini prozora crta crvenu i tamnoplavu crtu.

Nakon boje crta, bilo bi zgodno promijeniti i njihove debljine. Za promjenu debljine crte kojom crtamo upotrijebit ćemo naredbu GraphicsWindow.PenWidth te joj pridružiti vrijednost debljine. Napominjemo da je zadana vrijednost debljine crte 1, a što veći broj zadamo, to će crta biti deblja. U primjeru na slici postavili smo debljinu crte na 10.

Naredbe PenWidth i PenColor mijenjaju olovku kojom crtamo. One ne samo što utječu na crte koje crtamo, već utječu i na sve likove nacrtane nakon njihova zadavanja. Stoga, ukoliko želite u nastavku svog programa crtati zadanim vrijednostima olovke, morat ćete ih vratiti na njih.

slika4.5slika4.6 
Crtamo crte u boji                                                                   Crte mijenjaju debljinu

Pogledajmo primjer u kojemu ćemo uz upotrebu samo jedne For petlje nacrtati niz plavih crta različitih debljina. Debljine crta kretat će se od 1 do 15.

GraphicsWindow.BackgroundColor = "LightBlue"
GraphicsWindow.Width = 320
GraphicsWindow.Height = 400
GraphicsWindow.PenColor = "DarkBlue"
For i = 1 To 15
GraphicsWindow.PenWidth = i
GraphicsWindow.DrawLine(i * 20, 20, i * 20, 380)
EndFor

Crtanje geometrijskih likova

Uz crte, u grafičkom prozoru Small Basica možemo crtati i nekoliko geometrijskih likova: pravokutnike, kvadrate, elipse i krugove. Za crtanje ovih likova koristit ćemo samo dvije naredbe – DrawRectangle i DrawEllipse. Želimo li nacrtati pravokutnik, upotrijebit ćemo naredbu GraphicsWindow.DrawRectangle(x, y, width, height) gdje su x i y koordinate gornjeg lijevog kuta pravokutnika, width predstavlja širinu pravokutnika, dok je height njegova visina. Ukoliko zadamo jednaku visinu i širinu pravokutnika, nacrtat ćemo kvadrat.

slika4.7Slično je i s elipsom. Elipsa je također zadana x i y koordinatama lijevog gornjeg kuta pravokutnika u koji je upisana zadana elipsa te širinom i visinom elipse, odnosno pravokutnika u koji je upisana. Ukoliko želimo nacrtati kružnicu, potrebno je navesti istu širinu i visinu pravokutnika u koji je upisana. Sljedeći niz naredbi nacrtat će redom pravokutnik, kvadrat, elipsu i kružnicu.

GraphicsWindow.DrawRectangle(20, 20, 300, 60)
GraphicsWindow.DrawRectangle(60, 60, 200, 200)
GraphicsWindow.DrawEllipse(120, 80, 300, 60)
GraphicsWindow.DrawEllipse(80, 120, 200, 200)

 

Nacrtani likovi

Osim crtanja obruba geometrijskih likova, možemo crtati i ispunjene (engl. fill) likove. U tu svrhu koristit ćemo naredbe FillRectangle i FillEllipse. Za crtanje ispunjenih pravokutnika potrebna su četiri broja – prva dva predstavljaju x i y koordinate gornjeg lijevog kuta pravokutnika, treći određuje širinu pravokutnika, a četvrti njegovu visinu. Isto vrijedi i za crtanje ispunjene elipse.

Ove naredbe omogućuju izradu mnoštva zanimljivih crteža. U nastavku pogledajte još neke primjere naših grafičkih programa.

slika4.8 
Primjeri ispunjenih i neispunjenih likova

slika4.9 slika4.10
Niz kvadrata                                       Koncentrične kružnice

 

Primjer 4.1. (.sb / .exe)
Primjer 4.2. (.sb / .exe)
Primjer 4.3. (.sb / .exe)
Primjer 4.4. (.sb / .exe)
Primjer 4.5. (.sb / .exe)
Primjer 4.6. (.sb / .exe)
Primjer 4.7. (.sb / .exe)
Primjer 4.8. (.sb / .exe)
Primjer 4.9. (.sb / .exe)
Primjer 4.10. (.sb / .exe)
Primjer 4.11. (.sb / .exe)

Kornjačina grafika

Iako kornjačina grafika nije tipična za programske jezike poput Basica, Small Basic je u tome poseban. Kako je crtanje pomoću kornjače koja se kreće po grafičkom prozoru jedan od najboljih načina da se učenicima predoči izvršenje pojedine naredbe, primjerice Move Forward (pomakni se prema naprijed), kornjača i njena grafika su našle svoje mjesto i unutar Small Basica.

Small Basic nudi kontrolu Turtle u kojoj se nalaze brojne naredbe koje se mogu pozivati iz programa. Kako bismo započeli rad s kornjačom, moramo ju najprije prikazati na zaslonu. To radimo pomoću naredbe Turtle.Show() koja bi, u prijevodu s engleskog jezika, značila „pokaži kornjaču“. Nakon izvođenja ove naredbe, prikazat će se bijeli prozor u čijem se središtu nalazi kornjača. Ta će kornjača izvršavati naše naredbe i crtati sve što joj naredimo.

  slika4.11slika4.12
Prozor s kornjačom                                                  Kornjača je povukla crtu pomičući
                                                                               se naprijed za 100 piksela

Za rad s kornjačom često ćemo koristiti naredbu Move. Ova naredba prihvaća broj kao ulaznu vrijednost, a broj kornjači govori koliko daleko se mora pomaknuti. Primjerice, naredba Turtle.Move(100) pomiče kornjaču naprijed za 100 piksela i pritom, ukoliko je spuštena olovka kornjače, za sobom povlači crtu. 

slika4.13Napomenut ćemo da, ukoliko koristimo naredbe za rad s kornjačom, nije potrebno navoditi naredbu Turtle.Show().

Slijede naredbe pomoću kojih ćemo zakretati kornjaču – desno i lijevo za 90 stupnjeva. U tu ćemo svrhu upotrijebiti TurnRight i TurnLeft. Također je možemo zakretati i za neki proizvoljan kut upotrebom naredbe Turn i upisivanjem broja stupnjeva za koliko jen želimo zakrenuti.

 

Naredbe za zakretanje kornjače

Ovo su osnovne naredbe za crtanje pomoću kornjače. U nastavku potražite primjere programskih kodova, zadatak u kojima su upotrijebljene naredbe kornjačine grafike. Ostale naredbe za rad s kornjačom potražite u prozoru Intellisense ili na stranicama Small Basic API Reference.

 

slika4.14 Cvijet nacrtan pomoću kružnica

Primjer 4.12. (.sb / .exe)
Primjer 4.13. (.sb / .exe)
Primjer 4.14. (.sb / .exe)
Primjer 4.15. (.sb / .exe)
Primjer 4.16. (.sb / .exe)