Однос између координата¶

У овом поглављу ће нам веома важан бити међусобни однос положаја и величина објеката на екрану. Увећавањем $x$ координате објекти се померају надесно, умањивањем $x$ координате на лево, умањивањем y координате померају се на горе, а увећавањем $y$ координате, померају се на доле.

Одговори на наредна питања да провериш да ли ово добро разумеш.

Симетрично пресликане координате¶

Често ће цртежи које цртамо бити симетрични у односу на неку хоризонталну или вертикалну праву. На пример, ако је прозор ширине 300 пиксела, тада је његова средина удаљена 150 пиксела од леве ивице. Ако желимо да два круга распоредимо симетрично око те средине екрана (на пример, желимо да то буду два ока) и ако први круг има центар у тачки $(110, 80)$, тада други круг треба да има центар у тачки $(190, 80)$. Наиме, хоризонтално растојање од леве тачке до средине треба да буде исто као хоризонтално растојање од те средине до десне тачке. Пошто је лево растојање једнако 150 - 110 = 40, зато десно растојање треба да буде једнако 150 + 40 = 190. Тачке су на истој висини, па им је $y$ координата једнака. Веома слично се одређују координате и када је оса симетрије било која друга хоризонтална или вертикална права.

Поступак одређивања параметара правоугаоника и елипсе која је симетрично пресликана мало се разликује од оног за круг или дуж. Треба водити рачуна о томе да је горње лево теме правоугаоника описаног око тражене елипсе у ствари слика горњег десног темена правоугаоника описаног око познате елипсе.

Провери да ли ово разумеш тако што ћеш одговорити на следећих неколико питања.

Утврди своје знање о симетричном пресликавању тачака тако што ћеш урадити наредни задатак.

import pygame as pg, random

import pygamebg

​

(sirina, visina) = (300, 300) # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Мачка")

​

​

​

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​

import pygame as pg

import pygamebg

​

(sirina, visina) = (300, 300) # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Мачка")

​

​

prozor.fill(pg.Color("white")) # bojimo pozadinu ekrana u belo

​

pg.draw.circle(prozor, pg.Color("gray"), (150, 160), 100) # glava

pg.draw.polygon(prozor, pg.Color("gray"), [(50, 30), (70, 100), (110, 100)]) # levo uvo

pg.draw.polygon(prozor, pg.Color("gray"), [(250, 30), (230, 100), (190, 100)]) # desno uvo

pg.draw.ellipse(prozor, pg.Color("yellow"), ( 90, 110, 40, 60)) # levo oko

pg.draw.ellipse(prozor, pg.Color("yellow"), (170, 110, 40, 60)) # desno oko

pg.draw.ellipse(prozor, pg.Color("green"),  (105, 135, 20, 30)) # leva zenica

pg.draw.ellipse(prozor, pg.Color("green"),  (175, 135, 20, 30)) # desna zenica

pg.draw.ellipse(prozor, pg.Color("darkgray"),  (80, 180, 70, 30)) # levi deo njuske

pg.draw.ellipse(prozor, pg.Color("darkgray"),  (150, 180, 70, 30)) # desni deo njuske

pg.draw.circle(prozor, pg.Color("black"), (150, 190), 10) # vrh njuske

pg.draw.line(prozor, pg.Color("black"), (90, 190), (20, 160), 2) # levi gornji brk

pg.draw.line(prozor, pg.Color("black"), (90, 195), (20, 195), 2) # levi srednji brk

pg.draw.line(prozor, pg.Color("black"), (90, 200), (20, 220), 2) # levi donji brk

pg.draw.line(prozor, pg.Color("black"), (210, 190), (280, 160), 2) # desni gornji brk

pg.draw.line(prozor, pg.Color("black"), (210, 195), (280, 195), 2) # desni srednji brk

pg.draw.line(prozor, pg.Color("black"), (210, 200), (280, 220), 2) # desni donji brk

​

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​

Центрирани правоугаоници и елипсе¶

Иако се цртање правоугаоника или елипсе врши тако што се задају координате горњег левог темена, често имамо потребу да нацртамо правоугаоник или елипсу којима су познате координате средишта и димензије. Размисли о томе како се то може урадити, па кроз наредна питања провери да ли си у праву.

Прилагоди сада наредни програм тако што ћеш направити жути правоугаоник и плаву елипсу димензија 100 пута 80 пискела чији је центар у центру прозора, тј. тачки (150, 150).

import pygame as pg, pygamebg

​

(sirina, visina) = (300, 300)    # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Центрирани правоугаоник и елипса")

​

prozor.fill(pg.Color("white"))

pg.draw.rect(prozor, pg.Color("yellow"), (???, ???, ???, ???))

pg.draw.ellipse(prozor, pg.Color("blue"), (???, ???, ???, ???))

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​

Сличан, али још мало компликованији задатак је да се нацрта правоугаоник познатих димензија, који је центриран унутар другог датог правоугаоника. Прво можеш да израчунаш средиште задатог, описаног правоугаоника, а затим да израчунаш координате горњег левог темена уписаног правоугаоника тако што од средишта одузмеш половину ширине и половину висине уписаног правоугаоника. Провери да ли ово разумеш, тако што ћеш одговорити на следеће питање.

У наредном програму можеш и да провериш како ово функционише.

import pygame as pg

import pygamebg

​

(sirina, visina) = (300, 300) # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Правоугаоник у правоугаонику")

​

prozor.fill(pg.Color("white"))

pg.draw.rect(prozor, pg.Color("yellow"), (230, 270, 120, 100))

pg.draw.ellipse(prozor, pg.Color("blue"), (???, ???, ???, ???))

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​

У специјалном случају када је спољни правоугаоник цео прозор, правоугаоник можемо центрирати тако што му $x$ координату горњег левог темена поставимо на половину разлике између ширине прозора и ширине правоугаоника, а $y$ координату поставимо на половину разлике између ширине између висине прозора и висине правоугаоника. На тај начин слободан простор око правоугаоника равномерном распоређујемо на леву и десну, односно на горњу и доњу маргину.

import pygame as pg

import pygamebg

​

(sirina, visina) = (300, 300)   # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Центрирани квадрати")

​

prozor.fill(pg.Color("white"))

# crveni kvadrat

# zeleni kvadrat

# plavi kvadrat

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​

pg.draw.rect(prozor, pg.Color("red"), (50, 50, 200, 200))

pg.draw.rect(prozor, pg.Color("green"), (75, 75, 150, 150))

pg.draw.rect(prozor, pg.Color("blue"), (100, 100, 100, 100))

​

Центрирана слика¶

Пошто су слике правоугаоног облика, оне се такође могу центрирати на унутар прозора на исти начин као и било који други правоугаоник.

Прилагоди програм који на екрану приказује слику мачке учитану из датотеке macka.png тако да та слика буде центрирана у средини екрана.

Да би се слика приказала на средини екрана, очитавамо прво њене димензије. То можемо урадити помоћу функција get_width() и get_height(), које враћају ширину и висину слике. Координате се онда добијају као половина разлике између димензија екрана и димензија слике која се приказује (сличица је центрирана јер се празан простор равномерно распоређује са његове обе стране).

11

 

1

​

2

# bojimo pozadinu u belo

3

prozor.fill(pg.Color("white"))

4

​

5

# učitavamo slicicu iz datoteke macka.png

6

slika = pg.image.load("macka.png")

7

# prikazujemo sličicu na sredini ekrana

8

(x, y) = ((sirina - slika.get_width()) / 2, (visina - slika.get_height()) / 2)

9

prozor.blit(slika, (x, y))

10

​

11

​

(ucitavanje_i_prikaz_slike_sredina)

import pygame as pg

import pygamebg

​

(sirina, visina) = (300, 300) # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Zdravo svete!")

​

# bojimo pozadinu prozora u belo

prozor.fill(pg.Color("white"))

​

# font kojim će biti prikazan tekst

font = pg.font.SysFont("Arial", 40)

# poruka koja će se ispisivati

poruka = "Zdravo svete!"

# gradimo sličicu koja predstavlja tu poruku ispisanu crnom bojom

tekst = font.render(poruka, True, pg.Color("black"))

# određujemo veličinu tog teksta (da bismo mogli da ga centriramo)

(sirina_teksta, visina_teksta) = (tekst.get_width(), tekst.get_height())

# položaj određujemo tako da tekst bude centriran

(x, y) = (???, ???)

# prikazujemo sličicu na odgovarajućem mestu na ekranu

prozor.blit(tekst, (x, y))

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​

Пројекат - Кућица¶

Циљ овог пројекта је да направимо програм који црта кућицу. Приликом цртања кућице применићемо знање о израчунавању координата. Да би лакше дошли до крајњег решења, одговори на наредни низ питања која се сва односе на цртеж кућице.

Основу кућице чини жути правоугаоник ширине 180 и висине 160 пиксела. Ако је прозор у коме се црта димензије 300 пута 300 пиксела, ако је испод кућице остављена маргина од 20 пиксела и ако је правоугаоник хоризонтално центриран унутар прозора, кoje су координате горњег левог угла жутог правоугаоника (напиши их у облику уређеног пара)?

Провери

Изнад врха крова остављена је маргина од 20 пиксела. Које су координате тачке на којој се налази врх крова?

Провери

Q-36: Кров је нацртан у облику испуњеног многоугла (тј. троугла). Чиме се може допунити наредба за исцртавање pg.draw.polygon(prozor, pg.Color(„red”), ???) да би се нацртао кров.

A. [(120, 60), (20, 150), (120, 240)])
B. [(150, 20), (60, 120), (240, 120)])
C. [(60, 120), (150, 20), (180, 160)])
D. [(60, 120), (150, 20), (240, 120)])
Провери

Леви и десни прозор су распоређени симетрично. Које су координате горњег левог угла десног прозора, ако је леви прозор исцртан наредбом pg.draw.rect(prozor, pg.Color(„skyblue”), (80, 140, 50, 50)).

Провери

Q-37: Врата димензије 60 пута 80 пиксела су постављена симетрично у односу на средину кућице. Како се може израчунати положај горњег левог темена врата? Означи све поступке који су тачни.

A. Координату :math:`x` можемо израчунати тако што од координате центра кућице (150) одузмемо пола ширине врата (60:2 = 30) и тако добијемо 120.
B. Координату :math:`y` можемо израчунати тако што од координате дна кућице (а то је 300 - 20 = 280) одузмемо висину врата (80) и тако добијемо 200.
C. Координату :math:`x` можемо израчунати тако што на координату леве ивице кућице (а то је 150 - 180:2 = 60) додамо ширину врата (60) и тако добијемо 120.
D. Координату :math:`x` можемо израчунати тако што на координату леве ивице кућице (а то је 150 - 180:2 = 60) додамо половину разлике између ширине кућице и ширине врата (а то је (180-60):2 = 60) и тако добијемо 120.
Провери

Q-38: Која од наредних наредби исцртава хоризонталну линију на десном прозору.

A. pg.draw.line(prozor, pg.Color("black"), (80, 165), (130, 165))
B. pg.draw.line(prozor, pg.Color("black"), (105, 140), (105, 190))
C. pg.draw.line(prozor, pg.Color("black"), (195, 140), (195, 190))
D. pg.draw.line(prozor, pg.Color("black"), (170, 165), (220, 165))
Провери

Q-39: Желимо да нацртамо вертикалну црну дуж по средини левог прозора, који је нацртан као квадрат димензије $50$, чије је горње лево теме у $(80, 140)$. Означи тврђења која исправно одређују координате те дужи.

A. Координата :math:`x` леве тачке дужи једнака је координати y леве ивице прозора (80), а координата :math:`x` десне тачке дужи једнака је координати :math:`x` десне ивице прозора (80 + 50 = 130).
B. Координата :math:`x` и горње и доње тачке дужи једнака је аритметичкој средини координата :math:`x` леве ивице прозора (80) и десне ивице прозора (80 + 50 = 130), тј. једнака је (80 + 130) : 2 = 105.
C. Координата :math:`x` и горње и доње тачке дужи се може израчунати тако што се на координату :math:`x` леве ивице прозора (80) дода пола ширине прозора (50:2 = 25).
D. Координата :math:`y` горње тачке дужи једнака је координати y горње ивице прозора (140), а координата :math:`y` доње тачке дужи једнака је координати :math:`y` доње ивице прозора (140 + 50 = 190).
Провери

На основу свега реченог можеш и да нацрташ кућицу.

Покрени програмПрикажи примерИскопирај

15

 

1

import pygame as pg, random

2

import pygamebg

3

​

4

(sirina, visina) = (300, 300) # otvaramo prozor

5

prozor = pygamebg.open_window(sirina, visina, "Кућица")

6

​

7

# osnova kuće

8

# krov

9

# levi prozor

10

# desni prozor

11

# vrata

12

​

13

# prikazujemo prozor i čekamo da ga korisnik isključi

14

pygamebg.wait_loop()

15

​

(PyGame_house)

Покрени програмКорак по корак

15

 

1

# osnova kuće

2

pg.draw.rect(prozor, pg.Color("yellow"), (60, 120, 180, 160))

3

# krov

4

pg.draw.polygon(prozor, pg.Color("red"), [(60, 120), (150, 20), (240, 120)])

5

# levi prozor

6

pg.draw.rect(prozor, pg.Color("skyblue"), (80, 140, 50, 50))

7

pg.draw.line(prozor, pg.Color("black"), (80, 165), (130, 165))

8

pg.draw.line(prozor, pg.Color("black"), (105, 140), (105, 190))

9

# desni prozor

10

pg.draw.rect(prozor, pg.Color("skyblue"), (170, 140, 50, 50))

11

pg.draw.line(prozor, pg.Color("black"), (170, 165), (220, 165))

12

pg.draw.line(prozor, pg.Color("black"), (195, 140), (195, 190))

13

# vrata

14

pg.draw.rect(prozor, pg.Color("brown"), (120, 200, 60, 80))

15

​

(kucica_reveal_code)

Прикажи решењеСакриј решење

import pygame as pg

import pygamebg

​

(sirina, visina) = (300, 300) # otvaramo prozor

prozor = pygamebg.open_window(sirina, visina, "Медведић")

​

# bojimo pozadinu prozora u belo

prozor.fill(pg.Color("white"))

​

# procedura kojom se crta obojen krug okruzen crnom kruznicom

def uokviren_krug(prozor, boja, centar, poluprecnik):

    # crtamo ispunjen krug

    pg.draw.circle(prozor, boja, centar, poluprecnik)

    # uokvirujemo ga crnom kruznicom

    pg.draw.circle(???, ???, ???, ???, ???)

​

# crtamo levo uvo

uokviren_krug(prozor, pg.Color("yellow"), (90, 80), 45)

# crtamo desno uvo

???

# crtamo glavu

uokviren_krug(prozor, pg.Color("yellow"), (150, 150), 100)

# crtamo njusku

???

# crtamo levo oko

uokviren_krug(prozor, pg.Color("black"), (100, 120), 15)

# crtamo desno oko

???

# crtamo nos

???

​

# prikazujemo prozor i čekamo da ga korisnik isključi

pygamebg.wait_loop()

​