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

 

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" slika4.3

ili

GraphicsWindow.BackgroundColor = "Yellow".

Ukoliko 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.4

Nakon š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 slika4.5

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.

  Crtamo crte u boji

slika4.6Nakon 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.

 

 

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.7

Slič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 (Primjer 4.1. do Primjer 4.11.) naših grafičkih programa.

slika4.8 slika4.9 slika4.10
Primjeri ispunjenih i neispunjenih likova Niz kvadrata Koncentrične kružnice

 

Kornjačina grafika

slika4.11Iako 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.12

  Prozor s kornjačom

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.

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

 
slika4.13Kornjača je povukla crtu pomičući
se naprijed za 100 piksela

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 slika4.14

Ovo su osnovne naredbe za crtanje pomoću kornjače. U nastavku potražite primjere [GS2] 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.

 

Cvijet nacrtan pomoću kružnica

O autoru Gordana Sokol

Diplomirani informatičar koji posljednjih šesnaest godina predaje informatiku u OŠ Tužno. Autorica sam niza udžbenika i zbirki iz informatike za osnovne i srednje škole. Autorica sam online tečaja "Logo – online učenje programiranja". Završila sam E-learning akademiju, smjer Tutoring.
Ovaj unos je objavljen u Nekategorizirano. Bookmarkirajte stalnu vezu.

Odgovori

Popunite niže tražene podatke ili kliknite na neku od ikona za prijavu:

WordPress.com Logo

Ovaj komentar pišete koristeći vaš WordPress.com račun. Odjava / Izmijeni )

Twitter picture

Ovaj komentar pišete koristeći vaš Twitter račun. Odjava / Izmijeni )

Facebook slika

Ovaj komentar pišete koristeći vaš Facebook račun. Odjava / Izmijeni )

Google+ photo

Ovaj komentar pišete koristeći vaš Google+ račun. Odjava / Izmijeni )

Spajanje na %s