📚Nauči više

Koordinatni sistem

Da bi računar znao gde da nacrta neki oblik, koristi se koordinatni sistem. To je zamišljena mreža linija koja pokriva celo platno (canvas). Svaka tačka na platnu ima svoje koordinate – dva broja: x i y.

X osa je vodoravna linija i pokazuje koliko je tačka udaljena ulevo ili udesno.
Y osa je uspravna linija i pokazuje koliko je tačka udaljena nagore ili nadole.

Na našem platnu, početak koordinatnog sistema (0, 0) nalazi se u donjem levom uglu. Kada povećavaš x, pomeraš se udesno, a kada povećavaš y, ideš nagore.

Na primer, tačka sa koordinatama (150, 100) znači: idi 150 koraka udesno i 100 koraka nagore od donjeg levog ugla.

Kada pišeš kod za crtanje, skoro svaka funkcija traži da navedeš koordinate. Tako računar zna gde da nacrta liniju, krug ili bilo koji drugi oblik.

Zabavna vežba: Probaj da nacrtaš tačku na različitim mestima na platnu i vidi kako se menja njen položaj kada menjaš x i y!

Funkcije i parametri

Funkcija je posebna naredba u programiranju koja govori računaru da uradi nešto određeno. U ovoj aplikaciji, funkcije koristiš da nacrtaš oblike, promeniš boju ili debljinu olovke i još mnogo toga.

Svaka funkcija ima svoje ime i parametre. Ime funkcije pišeš prvo, a u zagradi navodiš parametre – to su brojevi ili reči koje funkciji govore šta tačno da uradi.

Na primer, funkcija za crtanje kruga izgleda ovako:
nacrtajKrug(300, 200, 50)

• nacrtajKrug je ime funkcije.
• 300 je x koordinata centra kruga.
• 200 je y koordinata centra kruga.
• 50 je poluprečnik kruga.

Redosled parametara je veoma važan! Ako ih pomešaš, krug neće biti nacrtan tamo gde si želeo ili neće izgledati kako si zamislio.

Neke funkcije imaju više parametara, a neke manje. Uvek možeš da pogledaš Dokumentaciju funkcija da vidiš šta koja funkcija očekuje.

Zabavna vežba: Probaj da promeniš brojeve u funkciji nacrtajKrug i vidi šta se dešava na platnu. Tako ćeš naučiti kako različiti parametri utiču na oblike koje crtaš.

Osnovni oblici

Osnovni oblici su najjednostavniji crteži koje možeš napraviti pomoću koda. To su: pravougaonik, krug, elipsa, tačka i linija. Svaki od ovih oblika ima svoju funkciju i parametre koje treba da navedeš kako bi ga nacrtao.

Pravougaonik

Pravougaonik crtaš funkcijom nacrtajPravougaonik(x, y, širina, visina).
x i y su koordinate centra pravougaonika, a širina i visina određuju njegovu veličinu.
Možeš da popuniš pravougaonik bojom tako što pre crtanja pozoveš postaviBojuPopune(r, g, b). Ako želiš samo ivicu bez popune, koristi bezPopune().

Krug

Krug crtaš funkcijom nacrtajKrug(x, y, r).
x i y su koordinate centra kruga, a r je poluprečnik.
I krug možeš popuniti bojom ili nacrtati samo njegovu ivicu, isto kao kod pravougaonika.

Elipsa

Elipsu crtaš funkcijom nacrtajElipsu(x, y, a, b).
x i y su koordinate centra elipse, a je širina, a b visina elipse.
Elipsu možeš popuniti bojom ili nacrtati samo ivicu, kao i ostale oblike.

Tačka

Tačku crtaš funkcijom nacrtajTacku(x, y).
x i y su koordinate tačke. Veličina tačke zavisi od debljine olovke (postaviDebljinuOlovke).
Ako želiš da pomeriš "olovku" na određeno mesto bez crtanja, koristi pomeriNa(x, y).

Linija

Liniju crtaš funkcijom linijaDo(x, y).
Prvo postaviš početnu tačku sa pomeriNa(x1, y1), a zatim nacrtaš liniju do nove tačke sa linijaDo(x2, y2).
Debljinu i boju linije podešavaš funkcijama postaviDebljinuOlovke(s) i postaviBojuOlovke(r, g, b).

Popunjavanje oblika

Da bi oblik bio popunjen bojom, koristi postaviBojuPopune(r, g, b) pre crtanja oblika.
Ako želiš da oblik bude samo nacrtan bez popune, koristi bezPopune().
Primer:
postaviBojuPopune(255, 0, 0);
nacrtajKrug(100, 100, 50);
bezPopune();
nacrtajKrug(250, 100, 50);

Zabavna vežba: Probaj da nacrtaš više oblika na platnu, promeniš im boje i veličine, i napraviš svoju sliku koristeći pravougaonike, krugove, elipse, tačke i linije!

Krive i lukovi

Napomena: Krive i lukovi su napredniji koncept u programiranju crteža. Ako ti deluju komplikovano, slobodno ih preskoči i nastavi sa jednostavnijim oblicima! Važno je samo da znaš da postoje i da se koriste za crtanje glatkih, zakrivljenih linija.

Kriva

Kriva je linija koja nije prava – može biti zakrivljena ili savijena. U ovoj aplikaciji koristiš Bezierove krive za crtanje glatkih zakrivljenih linija.

Postoje dve vrste krivih:

• Kvadratna kriva:
  nacrtajKrivu(x1, y1, x2, y2, x3, y3)
  Prva tačka je početak, druga je kontrolna tačka (određuje zakrivljenost), treća je kraj krive.
• Kubna kriva:
  nacrtajKrivu(x1, y1, x2, y2, x3, y3, x4, y4)
  Prva tačka je početak, sledeće dve su kontrolne tačke, poslednja je kraj krive.

Krive možeš koristiti samostalno ili kao deo putanje. Debljinu i boju krive podešavaš kao i za linije.

Zabavna vežba: Nacrtaj više krivih i pokušaj da napraviš talasastu liniju ili zanimljiv oblik!

Luk

Luk je deo kruga, kao isečak torte ili deo prstena. Luk crtaš funkcijom nacrtajLuk(x, y, r, ugaoOd, ugaoDo).
x i y su koordinate centra zamišljenog kruga, r je poluprečnik, a ugaoOd i ugaoDo određuju odakle dokle se crta luk (izraženo u stepenima, od 0 do 360).
Na primer, nacrtajLuk(300, 200, 80, 0, 180) crta gornju polovinu kruga.

Luk možeš nacrtati samostalno ili kao deo figure. Debljinu i boju luku podešavaš kao i za linije.

Luk elipse

Luk elipse je deo elipse. Luk elipse crtaš funkcijom nacrtajLukElipse(x, y, a, b, ugaoOd, ugaoDo).
x i y su koordinate centra zamišljene elipse, a i b su dužine stranica zamišljenog pravougaonika koji dodiruje elipsu, a ugaoOd i ugaoDo određuju odakle dokle se crta luk elipse (izraženo u stepenima, od 0 do 360).
Na primer, nacrtajLukElipse(150,100,200,100,0,180) crta gornju polovinu elipse.

Luk elipse možeš nacrtati samostalno ili kao deo figure. Debljinu i boju luku podešavaš kao i za linije.

Poligoni

Poligon je zatvoreni oblik sastavljen od više pravih linija. Tačke u kojima se linije dodiruju se zovu temena. Najpoznatiji poligoni su trougao, kvadrat, petougao, itd. Da bi nacrtao poligon, moraš da navedeš sva njegova temena redom.

Poligon crtaš pomoću sledećih funkcija:

• zapocniPoligon() – započinje novi poligon.
• dodajTeme(x, y) – dodaje teme (tačku) poligonu.
• zavrsiPoligon() – zatvara i iscrtava poligon.

Primer za crtanje trougla:
zapocniPoligon();
dodajTeme(200, 200);
dodajTeme(300, 300);
dodajTeme(400, 200);
zavrsiPoligon();

Poligon možeš popuniti bojom koristeći postaviBojuPopune(r, g, b) pre crtanja, ili nacrtati samo ivicu koristeći bezPopune().

Zabavna vežba: Probaj da nacrtaš poligon sa više temena i napraviš zvezdu ili drugi zanimljiv oblik!

Putanje

Putanja je kombinacija linija i krivih koje zajedno čine složeniji oblik. Putanju možeš koristiti da nacrtaš oblike koji nisu samo poligoni ili krugovi, već i razne talasaste ili nepravilne figure.

Putanju crtaš pomoću sledećih funkcija:

• zapocniPutanju() – započinje novu putanju.
• dodajTemePutanje(x, y) – dodaje pravo teme (pravu liniju do tačke).
• nacrtajKrivu(...) – dodaje krivu u putanju.
• nacrtajLuk(x, y, r, ugaoOd, ugaoDo) – dodaje luk u putanju.
• zavrsiPutanju() – zatvara i iscrtava putanju.

Putanju možeš popuniti bojom ili nacrtati samo njene ivice, kao i kod ostalih oblika.

Zabavna vežba: Kombinuj linije, krive i lukove u jednoj putanji i napravi svoj originalni oblik!

Boje

Boje čine tvoje crteže zanimljivijim i lepšim! Možeš da menjaš boju olovke (ivice) i boju popune (unutrašnjost oblika) pomoću posebnih funkcija.

Da bi dobio različite boje, koristiš tri broja: r (crvena), g (zelena) i b (plava). Svaki broj može biti od 0 do 255. Kombinovanjem ovih brojeva dobijaš sve moguće boje! Na primer:

• crvena: r=255, g=0, b=0
• zelena: r=0, g=255, b=0
• plava: r=0, g=0, b=255
• žuta: r=255, g=255, b=0
• ljubičasta: r=128, g=0, b=128
• crna: r=0, g=0, b=0
• bela: r=255, g=255, b=255

Što više mešaš crvenu, zelenu i plavu, dobijaš nove boje – baš kao kada mešaš tempere!

• Boja olovke: postaviBojuOlovke(r, g, b)
  Menja boju linije ili ivice.
• Boja popune: postaviBojuPopune(r, g, b)
  Menja boju unutrašnjosti oblika. Ako ne želiš popunu, koristi bezPopune().
• Debljina olovke: postaviDebljinuOlovke(s)
  Menja debljinu linije (broj piksela).

Zabavna vežba: Eksperimentiši sa različitim brojevima za r, g i b i vidi koje sve boje možeš da napraviš. Pokušaj da napraviš svoju omiljenu boju i koristi je u crtežu!

Figure

Figura je složen zatvoreni oblik koji može da se sastoji od pravih linija, krivih i lukova. Figure ti omogućavaju da nacrtaš originalne i zanimljive oblike koji nisu samo poligoni ili osnovni oblici.

Figuru crtaš pomoću sledećih funkcija:

• zapocniFiguru() – započinje novu figuru.
• dodajTemeFigure(x, y) – dodaje pravo teme (pravu liniju do tačke).
• nacrtajKrivu(...) – dodaje krivu u figuru.
• nacrtajLuk(x, y, r, ugaoOd, ugaoDo) – dodaje luk u figuru.
• zavrsiFiguru() – zatvara i iscrtava figuru.

Figuru možeš popuniti bojom ili nacrtati samo njene ivice, kao i kod ostalih oblika.

Zabavna vežba: Kombinuj linije, krive i lukove u jednoj figuri i napravi svoj originalni oblik!