Grafička biblioteka: prozor, koordinate, boje i oblici — informatika za 7. razred

Gradivo za 7. razred

U 7. razredu Python program prvi put crta: otvara prozor i u njemu pravi kućicu, sunce ili glavu robota od duži, pravougaonika, krugova i mnogouglova. Za to služi grafička biblioteka, npr. Pygame, skup gotovih funkcija za otvaranje prozora i crtanje oblika. Najvažnije je razumeti koordinatni sistem prozora, koji se razlikuje od onog iz matematike.

Na ovoj strani ukratko obnavljaš gradivo, a zatim vežbaš u kvizu. Tamo određuješ gde je tačka u prozoru, šta crta koji poziv i gde, računaš ivice pravougaonika i najvišu tačku kruga i nalaziš zašto se oblik pojavio na pogrešnom mestu. U svakom pitanju piše šta znače brojevi u pozivu, pa ništa ne moraš da pamtiš napamet. Programe pišeš i pokrećeš na času; kviz vežba da ih čitaš.

Učitavanje lokalnog napretka...
Vežbaj koordinate i oblike →

Zašto vežbati 2D grafiku na Spremku

Ovde se lako pomešaju koordinate prozora i matematičke, širina i drugi ugao pravougaonika, poluprečnik i prečnik, krug i kružnica, apsolutne i relativne koordinate. U kvizu čitaš kratke Python programe koji crtaju kućicu, sunce ili robota, određuješ koordinate delova, biraš poziv koji crta traženi oblik i računaš gde oblik dodiruje ivicu prozora. Primeri su u Pythonu, koji koristi većina škola. Kviz prati gradivo informatike za 7. razred, uz svaki odgovor dobijaš objašnjenje na srpskom, a besplatan je i bez registracije.

Gradivo i objašnjenje

Prozor i koordinatni sistem

Veličina prozora zadaje se u pikselima, npr. 400 × 300: 400 piksela po širini i 300 po visini. Tačka (0, 0) je u gornjem levom uglu prozora, x raste udesno, a y raste naniže. To je glavna razlika u odnosu na matematiku, gde y raste naviše, i u odnosu na Scratch scenu, gde je (0, 0) u centru. Zato veće y znači niže na ekranu: tačka (100, 200) je ispod tačke (100, 50). Pikseli se broje od 0, pa prozor širok 400 ima x od 0 do 399. Centar prozora je na polovini širine i visine, za 400 × 300 to je (200, 150). Deo oblika koji pada van prozora se ne vidi, ali greške nema: biblioteka ga jednostavno odseče.

Boje i oblici

Boja se zadaje RGB torkom od tri cela broja od 0 do 255, npr. (255, 0, 0) za crvenu, a zgodno ju je sačuvati u promenljivoj kao CRVENA = (255, 0, 0); tada se nijansa menja na jednom mestu. Duž je određena sa dve krajnje tačke: isto y daje vodoravnu, a isto x uspravnu duž. Pravougaonik se zadaje gornjim levim uglom, širinom i visinom, pa je desna ivica x + širina, a donja y + visina. Krug se zadaje centrom i poluprečnikom; najviša tačka mu je na y − r, jer gore znači manje y. Elipsa je upisana u zadati pravougaonik, a u kvadratu je krug. Mnogougao se zadaje listom temena i sam se zatvara. Bez dodatnog broja oblik je ispunjen, a sa debljinom se crta samo obris, npr. kružnica.

Redosled crtanja i relativne koordinate

Naredbe se izvršavaju redom, a svaki novi oblik crta se preko onoga što već postoji. Zato se prvo boji pozadina, pa zid, vrata i na kraju kvaka; ako se pozadina oboji posle kruga, krug nestane. Apsolutne koordinate su stalni brojevi, npr. (150, 110). Relativne koordinate zadaju se kao pomak od istaknute tačke (x0, y0), npr. x0 + 50 i y0 + 30. Tada je dovoljno promeniti x0 da se cela kućica pomeri udesno, a y0 da se pomeri naniže. Kada je crtež opisan relativno u funkciji sa parametrima x i y, ista funkcija crta kućicu na bilo kom mestu. Složeni oblici, kao kućica ili glava robota, računaju se iz delova: vrata na sredini zida počinju na sredini zida umanjenoj za polovinu širine vrata.

Ključni pojmovi

Koordinatni sistem prozora

Sistem u kome je (0, 0) u gornjem levom uglu, x raste udesno, a y raste naniže.

RGB torka

Tri cela broja od 0 do 255 u zagradama, npr. (0, 255, 0) za zelenu, kojima se zadaje boja oblika.

Pravougaonik (x, y, širina, visina)

Zapis u kome prva dva broja daju gornji levi ugao, a druga dva širinu i visinu, ne drugi ugao.

Relativne koordinate

Položaj delova crteža zadat kao pomak od jedne tačke (x0, y0), pa se ceo crtež pomera promenom te tačke.

Najčešće greške

Pokreni kviz → Pogledaj povezane oblasti

Sledeći korak

Posle kratkog ponavljanja pokreni kviz, a zatim nastavi kroz povezane oblasti ili se vrati na razredni pregled.

Pokreni kviz Informatika i računarstvo za osnovce 7. razred

Česta pitanja

Zašto u prozoru y raste naniže?

Tako je dogovoreno u većini grafičkih biblioteka: početak (0, 0) je u gornjem levom uglu prozora, slično kao što tekst na strani počinje gore levo. Zato je tačka sa većim y niže na ekranu, a ne više kao u matematici.

Kako se zadaje pravougaonik?

Gornjim levim uglom (x, y), širinom i visinom. Pravougaonik (60, 30, 150, 90) ima desnu ivicu na x = 60 + 150 = 210 i donju na y = 30 + 90 = 120, jer se visina dodaje naniže.

Šta su relativne koordinate i čemu služe?

To su položaji delova crteža zadati kao pomak od jedne tačke, npr. (x0 + 50, y0 + 30). Kada se promeni samo x0 ili y0, ceo crtež se pomeri zajedno, a isti opis može da nacrta isti oblik na više mesta.

Pokreni kviz →