ŠKOLA: Small Basic, 3. dio

Turtle (kornjača) Grafika

Turtle grafika je pojam u kompjuterskoj grafici za metod programiranja vektorske grafike koristeći kursor „turtle“ (kornjača) koji se kreće po koordinatnom sistemu. Turtle grafika je bila ključna funkcija programskog jezika Logo, koji se krajem 60-ih godina koristio od strane nekoliko istraživača.

Prikaz kornjače

Kornjaču ćemo prikazati jednostavnim programom koji se sastoji od samo jedne linije:

Turtle.Show()

Pomjeranje kornjače i crtanje

Naredbom Turtle.Move(x) pomjeramo kornjaču za x pixela u smjeru u kojem je kornjača okrenuta (u startu to je ka gore). Time ćemo nacrtati liniju dužine x pixela. Ukoliko želimo da se kornjača kreće udesno, prije naredbe Move koristićemo naredbu Turtle.TurnRight(). Analogno je i za kretanje ulijevo (Turtle.TurnLeft()). Prije ovih naredbi nije potrebno odraditi Show(), jer će se sa pozivanjem ovih kornjača prikazati.

Primjer: Nacrtajmo kvadrat sa dužinom stranice od 100 pixela.

For i = 1 To 4
  Turtle.Move(100)
  Turtle.TurnRight()
EndFor

Kornjača prvo ide ka gore 100 pixela, a sljedeće stranice crta skrećući prethodno udesno.

Primjer: Obojimo sve stranice slučajno odabranim bojama.

For i = 1 To 4
  GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor()
  Turtle.Move(100)
  Turtle.TurnRight()
EndFor

Prema dosad naučenom, možemo nacrtati oblike koji imaju uglove od 90 stepeni. Kako crtati oblike sa drugačijim uglovima?

Koristeći naredbu Turtle.Turn(x), gdje je x zadati ugao.

Primjer: Nacrtajmo pravilni 12-ougao obima 600 pixela. (Ugao dobijamo kada podijelimo 360 stepeni sa brojem strana)

broj_strana = 12
duzina_stranice = 600 / broj_strana
ugao = 360 / broj_strana
For i = 1 To broj_strana
   Turtle.Move(duzina_stranice)
   Turtle.Turn(ugao)
EndFor

Malo složeniji oblik:

broj_strana = 60
duzina_stranice = 400 / broj_strana
ugao = 360 / broj_strana
Turtle.Speed = 15
For j = 1 To 30
  For i = 1 To broj_strana
   Turtle.Move(duzina_stranice)
   Turtle.Turn(ugao)
  EndFor
  Turtle.Turn(18)
EndFor

Naizgled kružnicu dobijamo sa povećanjem broja strana (u ovom slucaju pravimo 60-ougao) i smanjenjem dužine stranice. Prvo se ugniježdenom For petljom napravi pun “krug”, potom se pomjerimo za 18 stepeni, pa se crta sljedeći “krug”, i tako 30 krugova u ovom primjeru. Primjetićete da smo kornjaču ubrzali naredbom Turtle.Speed.

Do sad smo vidjeli da svako pomjeranje kornjače za sobom ostavlja trag, a da li uvijek mora biti tako?

Naredbom Turtle.PenUp virtuelno podižemo olovku (pen up – olovka gore) i tada se kornjača pomjera bez crtanja, a sa Turtle.PenDown ponovo “spuštamo olovku” i kornjača ponovo crta. Tako možemo nacrtati isprekidane linije u sljedećem primjeru:

broj_strana = 12
duzina_stranice = 400 / broj_strana
ugao = 360 / broj_strana
For i = 1 To broj_strana
 For j = 1 To 4 
   Turtle.Move(duzina_stranice/4)
   Turtle.PenUp()
   Turtle.Move(duzina_stranice/4)
   Turtle.PenDown()
 EndFor
 Turtle.Turn(ugao)
EndFor

 

Crtamo 12-ougao sa isprekidanim stranicama.

Potprogrami

Vrlo često se dešava da neki kod (set naredbi) izvršavamo više puta u jednom programu. Da kod ne bismo svaki put iznova pisali, zapisaćemo ga samo jednom u obliku potprograma i kasnije po potrebi pozivati taj potprogram. Potprogrami započinju ključnom riječju Sub i imaju svoje ime. Potprogram najčešće izvršava neku radnju koristeći sadržaj promjenljivih iz programa i kao rezultat može imati neke promjenljive koje će kasnije koristiti program.

U sljedećem primjeru ćemo to bolje ilustrovati, a i u narednim poglavljima će se stalno koristiti.

Primjer:

Sub AritmetickaSredina3Broja

   aritm=(x+y+z)/3

EndSub


TextWindow.WriteLine("Unesite prvi broj : ")
x=TextWindow.Read()
TextWindow.WriteLine("Unesite drugi broj : ")
y=TextWindow.Read()
TextWindow.WriteLine("Unesite treći broj : ")
z=TextWindow.Read()
AritmetickaSredina3Broja()
TextWindow.WriteLine("Aritmetička sredina je : "+aritm)

Kao što vidimo, prvo smo ispisali potprogram (odvojeno od samog programa) koji nalazi aritmetičku vrijednost tri broja, kasnije smo ga u programu pozvali po imenu, a potom se u programu iskoristila promjenljiva aritm koja je rezultat potprograma. Potprogram se poziva imenom i otvorenom i zatvorenom zagradom nakon imena. Takodje je bitno napomenuti, potprogram se može napisati ili prije samog programa ili poslije programa (svejedno je) i može biti više od jednog potprograma.

Primjer:

GraphicsWindow.BackgroundColor = "Black"
GraphicsWindow.PenColor = "LightBlue"
GraphicsWindow.Width = 480
For i = 0 To 6.4 Step 0.17
  x = Math.Sin(i) * 100 + 200
  y = Math.Cos(i) * 100 + 200
  CrtajKrug()
EndFor

Sub CrtajKrug    
  startX = x - 40
  startY = y - 40
  GraphicsWindow.DrawEllipse(startX, startY, 120, 120)
EndSub

GoTo

GoTo naredba služi da u nekom momentu skočimo sa jednog mjesta na neko drugo mjesto u programu i dalje nastavimo izvršavanje programa. To sljedeće mjesto može biti prije mjesta sa kog smo skočili, a može i poslije. Mjesto sa kog skačemo označimo sa GoTo i ime labele koje smo sami odabrali i postavili na mjesto od kog treba nastaviti program.

Primjer:

pocetak:
TextWindow.Write("Unesite broj ili 'kraj' ako želite izaći iz programa: ")
broj = TextWindow.Read()
If (broj="kraj") Then
   Goto kraj
EndIf  
ostatakPriDjeljenju = Math.Remainder(broj, 2)
If (ostatakPriDjeljenju = 0) Then
   TextWindow.WriteLine("Broj je paran.")
Else
   TextWindow.WriteLine("Broj je neparan")
EndIf
Goto pocetak
kraj:
TextWindow.WriteLine("Pozdrav!")

Događaji i interaktivnost

Događaji predstavljaju momente kada korisnik nešto uradi, a program to prepozna i  reaguje. Time korisnik aktivno utiče na izvršavanje programa. Takav program nazivamo interaktivnim. Interaktivnost najčešće srijećemo u igricama, gdje korisnik klikanjem, pomjeranjem miša i korišćenjem tastera generiše događaje, a program odgovara na njih.  

Primjer:

GraphicsWindow.DrawText(20,100,"Klikni bilo gdje")
GraphicsWindow.MouseDown = KlikniMe

Sub KlikniMe
   GraphicsWindow.ShowMessage("Bravo, kliknuo si.", "Cao")
EndSub

Prva linija koda GraphicsWindow.DrawText(20,100,"Klikni bilo gdje") nam ispisuje na prozoru tekst (početak teksta je u tački sa koordinatama (x,y)=(20,100)). Linija GraphicsWindow.MouseDown = KlikniMe nam govori da na događaj MouseDown (klik od strane korisnika) program reaguje pozivanjem potprograma KlikniMe. Potprogram prikazuje dialog box sa porukom.

Napomena: Primjetimo da kod pozivanja potprograma kao odgovor na neki događaj ne stavljamo zagrade iza imena potprograma. 

Primjer:

GraphicsWindow.BrushColor = "Violet"
GraphicsWindow.MouseMove = Crtaj

Sub Crtaj
  x = GraphicsWindow.MouseX - 10
  y = GraphicsWindow.MouseY - 10
  GraphicsWindow.FillEllipse(x, y, 20, 20)
EndSub

U ovom primjeru koristimo događaj GraphicsWindow.MouseMove, tj. da se na pomjeranje miša nad prozorom od strane korisnika crtaju kružići, a to crtanje vrši se potprogramom Crtaj.

Primjer crtanja linije po tabli, slično primjeru iz prvog broja (školske table).

GraphicsWindow.MouseDown = NaKlik
GraphicsWindow.MouseMove = NaPokretMisem

Sub NaPokretMisem
 x = GraphicsWindow.MouseX
 y = GraphicsWindow.MouseY
 If (Mouse.IsLeftButtonDown) Then
   GraphicsWindow.DrawLine(prethodnoX, prethodnoY, x, y)
 EndIf
 prethodnoX = x
 prethodnoY = y
EndSub

Sub NaKlik
 prethodnoX = GraphicsWindow.MouseX
 prethodnoY = GraphicsWindow.MouseY
EndSub

 

Crtamo tako što kliknemo, držimo pritisnut taster i pomjeramo miš.

Pritiskom na klik pokreće se potprogram NaKlik i u promjenljive prethodnoX i prethodnoY upisuju se koordinate tačke u kojoj je izvršen taj klik. Kada pomjerimo miš, pokreće se potprogram NaPokretMisem koji pamti nove koordinate, one tačke u koju smo pomjerili miš (najmanji pokret od jednog pixela u bilo kom pravcu) i potom naredbom If ispituje da li je lijevi taster miša pritisnut (Mouse.IsLeftButtonDown) i ako jeste crta liniju između novih koordinata i onih starih koje se nalaze u promjenljivim prethodnoX i prethodnoY. I tako za svaki pokret, tj. svaki pixel.

Shapes

Small Basic nam dozvoljava da pravimo oblike (shapes) kao što su elipse, slike, linije, pravougaonici, trouglovi koje kasnije možemo pomjerati, rotirati, zumirati, animirati ih. Kroz sljedeći primjer ćemo to najlakše objasniti. Nacrtajmo matricu koja se sastoji od 8 vrsta i 8 kolona, gdje su kvadrati širine i visine 40 pixela i različitih (slučajno odabranih) boja. Sa ugniježdenim For petljama ćemo kreirati vrstu po vrstu. Prvo ćemo proizvoljno uzimati boju četke, pa elementima matrice kvadrati pridruživati  oblike Shapes.AddRectangle(velicina, velicina), tj. kvadrate dimenzija 40×40 koje možemo pomijerati i animirati, a potom ćemo kreirani kvadrat pomjeriti na pravu poziciju u matrici.

U drugom dijelu programa animiramo kvadrate, tj. sve ih pomijeramo u poziciju (0,0), sa nekim vremenskim zakašnjenjem kako bismo mogli ispratiti tu animaciju.

vrste = 8
kolone = 8
velicina = 40
For v = 1 To vrste
   For k = 1 To kolone
     GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()
     kvadrati[v][k] = Shapes.AddRectangle(velicina, velicina)
     Shapes.Move(kvadrati[v][k], k * velicina, v * velicina)
   EndFor
EndFor

For v = 1 To vrste
   For k = 1 To kolone
     Shapes.Animate(kvadrati[v][k], 0, 0, 1000)
     Program.Delay(300)
   EndFor
EndFor

Igrica “Padding” 

I na kraju ove male škole programiranja, pogledajte kako uz pomoć naredbi o kojima smo pisali možemo kreirati zabavnu i veoma popularnu igricu “Padding”. Ovim završavamo priču o  Small Basic-u. Pokazali smo vam osnove pomoću kojih dosta toga možete napraviti, a kroz rad i pretragu po internetu otkrijte sami naprednije opcije.  

GraphicsWindow.BackgroundColor ="#003366"
platforma = Shapes.AddRectangle(120, 12)
loptica = Shapes.AddEllipse(16, 16)
GraphicsWindow.MouseMove = Pomjeraj
x = 0
y = 0
deltaX = 1
deltaY = 1
Petlja:
    x = x + deltaX
    y = y + deltaY
    gw = GraphicsWindow.Width
    gh = GraphicsWindow.Height
    If (x >= gw - 16 or x <= 0) Then
       deltaX = -deltaX
    EndIf
    If (y <= 0) Then
       deltaY = -deltaY
    EndIf
    padX = Shapes.GetLeft (platforma)
    If (y = gh - 28 and x >= padX and x <= padX + 120) Then
       deltaY = -deltaY
    EndIf
    Shapes.Move(loptica, x, y)
    Program.Delay(5)
    If (y < gh) Then
       Goto Petlja    
    EndIf
    GraphicsWindow.ShowMessage("Izgubio si!!!", "Platforma") 

Sub Pomjeraj  
   platformaX = GraphicsWindow.MouseX
   Shapes.Move(platforma, platformaX - 60, GraphicsWindow.Height - 12)
EndSub

Ovaj unos je objavljen pod Četvrti broj. Zabeležite stalnu vezu.

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s