$$ \newcommand{\floor}[1]{\left\lfloor{#1}\right\rfloor} \newcommand{\ceil}[1]{\left\lceil{#1}\right\rceil} \renewcommand{\mod}{\,\mathrm{mod}\,} \renewcommand{\div}{\,\mathrm{div}\,} \newcommand{\metar}{\,\mathrm{m}} \newcommand{\cm}{\,\mathrm{cm}} \newcommand{\dm}{\,\mathrm{dm}} \newcommand{\litar}{\,\mathrm{l}} \newcommand{\km}{\,\mathrm{km}} \newcommand{\s}{\,\mathrm{s}} \newcommand{\h}{\,\mathrm{h}} \newcommand{\minut}{\,\mathrm{min}} \newcommand{\kmh}{\,\mathrm{\frac{km}{h}}} \newcommand{\ms}{\,\mathrm{\frac{m}{s}}} \newcommand{\mss}{\,\mathrm{\frac{m}{s^2}}} \newcommand{\mmin}{\,\mathrm{\frac{m}{min}}} \newcommand{\smin}{\,\mathrm{\frac{s}{min}}} $$

Prijavi problem

Obeleži sve kategorije koje odgovaraju problemu

Još detalja - opišite nam problem


Uspešno ste prijavili problem!
Status problema i sve dodatne informacije možete pratiti klikom na link.
Nažalost nismo trenutno u mogućnosti da obradimo vaš zahtev.
Molimo vas da pokušate kasnije.

Час 4 - израчунавање координата

У досадашњим цртежима смо координате углавном очитавали помоћу миша или су унапред биле задате у тексту задатка. У овом поглављу ћемо видети како неке координате можемо израчунати на основу познавања неких других координата.

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

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

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

    Q-23: Kоје су координате тачке која се налази 10 пиксела лево од тачке

    \((50, 70)\)?

  • (50, 60)
  • Покушај поново
  • (50, 80)
  • Покушај поново
  • (40, 70)
  • Тачно
  • (60, 70)
  • Покушај поново
  • (30, 60)
  • Покушај поново
    Q-24: Kоје су координате тачке која се налази 10 пиксела испод тачке

    \((50, 70)\), на истој вертикали?

  • (50, 60)
  • Покушај поново
  • (50, 80)
  • Тачно
  • (40, 70)
  • Покушај поново
  • (60, 70)
  • Покушај поново
  • (40, 60)
  • Покушај поново

    Q-25: Правоугаоник је нацртан помоћу pg.draw.rect(prozor, boja, (100, 150, 80, 90)). Како се може нацртати правоугаоник исте величине који се налази 30 пиксела лево и 30 пиксела изнад овог правоугаоника?

  • pg.draw.rect(prozor, boja, (70, 120, 50, 60))
  • Покушај поново
  • pg.draw.rect(prozor, boja, (100, 150, 110, 120))
  • Покушај поново
  • pg.draw.rect(prozor, boja, (100, 150, 50, 60))
  • Покушај поново
  • pg.draw.rect(prozor, boja, (70, 120, 80, 90))
  • Тачно
  • pg.draw.rect(prozor, boja, (70, 180, 80, 90))
  • Покушај поново

    Q-26: Круг је нацртан помоћу pg.draw.circle(prozor, boja, (100, 200), 40). Како се може нацртати круг исте величине који се налази изнад овог круга и додирује га?

  • pg.draw.circle(prozor, boja, (100, 120), 40)
  • Тачно
  • pg.draw.circle(prozor, boja, (100, 160), 40)
  • Покушај поново
  • pg.draw.circle(prozor, boja, (120, 100), 40)
  • Покушај поново
  • pg.draw.circle(prozor, boja, (160, 100), 40)
  • Покушај поново
  • pg.draw.circle(prozor, boja, (20, 120), 40)
  • Покушај поново

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

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

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

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

    Повежи тачке са њима симетричним тачкама у односу на средиште прозора који је широк 400 пиксела. Покушај поново!
  • (30, 40)
  • (370, 40)
  • (120, 40)
  • (280, 40)
  • (170, 40)
  • (230, 40)
  • (40, 80)
  • (40, 320)

Ако је прозор ширине 300 пиксела, које су координате тачке која је симетрична тачки (100, 100) у односу на вертикалну средину прозора (резултат напиши у облику уређеног пара)?

Ако је прозор висине 300 пиксела, које су координате тачке која је симетрична тачки (100, 100) у односу на хоризонталну средину прозора (резултат напиши у облику уређеног пара)?

    Q-27: У прозору ширине 600 пиксела, нацртан је правоугаоник помоћу

    pg.draw.rect(prozor, boja, (150, 200, 80, 100)). Како се може нацртати правоугаоник који је симетрична слика тог правоугаоника у односу на вертикалну средину екрана?

  • ``pg.draw.rect(prozor, boja, (450, 200, 80, 100))``
  • Покушај поново.
  • ``pg.draw.rect(prozor, boja, (450, 200, 100, 80))``
  • Покушај поново.
  • ``pg.draw.rect(prozor, boja, (370, 200, 80, 100))``
  • Тачно.
  • ``pg.draw.rect(prozor, boja, (150, 400, 80, 100))``
  • Покушај поново.

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

Мачка

Напиши програм који црта главу мачке. Глава мачке је потпуно симетрична у односу на средину екрана.

Уши ове мачке могу да се прикажу као попуњени троуглови. Како се уши надовезују на главу, по два темена сваког троугла могу да буду изабрана са више слободе (довољно је да буду негде у глави). Осим два троугла који представљају уши, имамо још:

  • два круга (глава и врх њушке)

  • шест елипси (очи, зенице и делови њушке)

  • шест линија (бркови)

Приликом цртања користе се боје gray, darkgray, black, yellow и green.

Притисни дугме „Прикажи пример”, па очитај координате свих тачака. x-координате тачака на десној половини слике се не могу очитавати, али се могу израчунати користећи симетрију.

Дат је комплетан програм, можете да га испробате и овде.

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

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

    Q-28: Знаш да желиш да нацрташ правоугаоник ширине 80 и висине 40 тако да му је центар у тачки 100 и 100. Коју наредбу можеш да употребиш за то?

  • pg.draw.rect(prozor, boja, (100, 100, 80, 40))
  • Покушај поново
  • pg.draw.rect(prozor, boja, (100, 100, 160, 80))
  • Покушај поново
  • pg.draw.rect(prozor, boja, (60, 80, 80, 40))
  • Тачно
  • pg.draw.rect(prozor, boja, (20, 60, 160, 80))
  • Покушај поново

    Q-29: Да би се нацртала елипса са центром у тачки (80, 100), чије су полуосе 60 и 40 пиксела, потребно је извршити позив функције:

  • pg.draw.ellipse(prozor, boja, (80, 100, 60, 40))
  • Покушај поново
  • pg.draw.ellipse(prozor, boja, (80, 100), (60, 40))
  • Покушај поново
  • pg.draw.ellipse(prozor, boja, (20, 60, 120, 80))
  • Тачно
  • pg.draw.ellipse(prozor, boja, (80, 100), (120, 80))
  • Покушај поново

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

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

    Q-30: Правоугаоник плаве боје, ширине 40 и висине 30 пиксела треба да буде центриран у жутом правоугаонику чија је ширина 120 и висина 100 пиксела и чије је горње лево теме у тачки (130, 170). Како се тај правоугаоник може нацртати?

  • pg.draw.rect(prozor, pg.Color("blue"), (20, 0, 40, 30))
  • Покушај поново
  • pg.draw.rect(prozor, pg.Color("blue"), (130, 170, 40, 30))
  • Покушај поново
  • pg.draw.rect(prozor, pg.Color("blue"), (40, 35, 40, 30))
  • Покушај поново
  • pg.draw.rect(prozor, pg.Color("blue"), (170, 205, 40, 30))
  • Тачно

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

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

Напиши програм који црта црвени квадрат димензије 200 пиксела, зелени димензије 150 пиксела и плави димензије 100 пиксела који су центрирани у прозору димензије 300 пута 300 пиксела.

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

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

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

../_images/macka.png

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

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

Прилагоди програм који на екран исписује поруку „Здраво свете” тако да тај текст буде центриран у средини екрана.

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

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

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

../_images/pygame_quiz_house.png

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

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

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

  • [(120, 60), (20, 150), (120, 240)])
  • Покушај поново
  • [(150, 20), (60, 120), (240, 120)])
  • Тачно
  • [(60, 120), (150, 20), (180, 160)])
  • Покушај поново
  • [(60, 120), (150, 20), (240, 120)])
  • Тачно

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

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

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

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

  • pg.draw.line(prozor, pg.Color("black"), (80, 165), (130, 165))
  • Покушај поново
  • pg.draw.line(prozor, pg.Color("black"), (105, 140), (105, 190))
  • Покушај поново
  • pg.draw.line(prozor, pg.Color("black"), (195, 140), (195, 190))
  • Покушај поново
  • pg.draw.line(prozor, pg.Color("black"), (170, 165), (220, 165))
  • Тачно

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

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

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

Домаћи задатак - Медведић

Напиши програм који исцртава главу играчкице медведића.

Задатак се решава пажљивим одређивањем координата свих кругова. Кругови треба да буду испуњени одређеном бојом и затим уоквирени танком црном кружницом. То постижемо тако што два пута позовемо функцију pg.draw.circle, први пут без прослеђеног петог параметра који одређује дебљину кружнице (чиме постижемо да се црта испуњен круг), а други пут са прослеђеним параметром дебљине (чиме постижемо да се нацрта кружница). Да бисмо у избегли дуплирање кода, дефинисаћемо помоћну функцију uokviren_krug који ћемо позивати приликом цртања медведа. Параметре ћемо јој наводити на исти начин као код функције pg.draw.circle. Потруди се да цртеж који нацрташ буде апсолутно симетричан у односу на средину екрана.