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.

Programiranje grafike pomoću Pygame, priručnik za sedmi razred

Час 3 - многоуглови, комбиновање разних облика, слике, текст

Цртање многоуглова

Троугао се може нацртати помоћу три појединачне дужи. На сличан начин можемо нацртати и било који други многоугао. Међутим, ако се многоуглови цртају на тај начин, они се не сматрају као целина и не могу, на пример, бити попуњени. Библиотека PyGame даје могућност и за директно цртање многоуглова (каже се и полигона).

Многоугао се црта функцијом pg.draw.polygon чији су параметри редом:

  • прозор на ком се црта,

  • боја,

  • листа уређених парова који представљају координате темена многоугла (она се обично наводи у облику [(x1, y1), (x2, y2), ..., (xn, yn)]).

Многоугао се састоји од дужи које спајају суседна темена у наведеној листи. Подразумева се да је многоугао затворен, тј. да многоугао садржи и линију између последњег и првог темена. Ако се иза листе темена наведе дебљина, црта се само ивица многоугла, а ако се тај аргумент изостави или се наведе нула, онда се многоугао испуњава бојом.

Размотримо наредни пример.

Многоугао

Кућицу смо нацртали као црвени испуњен многоугао, а затим смо њен оквир нацртали као црну многоугаону линију дебљину 3 пиксела. Да не бисмо исту листу координата наводили два пута, увели смо променљиву temena.

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

    Q-18: Желимо да нацртамо троугао. У ком облику могу да се задају координате тачака?

  • pg.draw.polygon(prozor, boja, [(0, 0), (50, 100), (100, 0)])
  • Тачно
  • pg.draw.polygon(prozor, boja, (0, 0), (50, 100), (100, 0))
  • Покушај поново
  • pg.draw.polygon(prozor, boja, (0, 0, 50, 100, 100, 0))
  • Покушај поново
  • pg.draw.polygon(prozor, boja, [0, 0, 50, 100, 100, 0])
  • Покушај поново

    Q-19: Који од наредних полигона се не може нацртати помоћу више позива функције pg.draw.line?

  • pg.draw.polygon(prozor, boja, [(0, 0), (50, 100), (100, 0)], 7)
  • Тачно
  • pg.draw.polygon(prozor, boja, [(0, 0), (0, 50), (50, 50), (50, 0)])
  • Покушај поново
  • pg.draw.polygon(prozor, boja, [(0, 0), (50, 100), (100, 0)])
  • Покушај поново
  • pg.draw.polygon(prozor, boja, [(0, 0), (0, 50), (50, 50), (50, 0)], 4)
  • Тачно

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

Срце

Напиши програм који исцртава црвено срце.

Срце можемо нацртати и помоћу једног квадрата и два круга.

../_images/srce_koordinate.png

Претпоставимо да се центар квадрата (тачка \(О\)) налази у центру екрана (координате су јој \((100, 100)\)) и претпоставимо да су висина и ширина квадрата (заправо његове дијагонале) једнаке 100 пиксела. На основу тога можеш једноставно израчунати положаје темена квадрата (нпр. тачка A има координате \((50, 100)\)). Пошто квадрат није постављен тако да му странице буду паралелне осама, не можемо га цртати помоћу pg.draw.rect, већ помоћу pg.draw.polygon. Центри кругова се налазе на срединама страница квадрата. Средиште дужи се (због сличности троуглова) налази и хоризонтално и вертикално на средини између темена дужи, и на основу тога му лако можемо одредити координате (на пример, координате тачке \(M\) су \((75, 75)\)). На крају остаје да се одреди полупречник круга. То можемо урадити експериментално (тако што испробавамо разне вредности све док док не добијемо задовољавајућу слику), међутим, много је боље применити знање из математике и полупречник израчунати. Полупречник круга је половина странице квадрата. Пошто је \(d = a\sqrt{2}\), важи да је \(a = \frac{d}{\sqrt{2}}\). Дужина дијагонале је 100 пиксела, па је зато полупречник око 35 пиксела.

Новогодишња јелка

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

Споји тачке

У низу tacke дата су темена многоугла. Нацртај тај многоугао на позадини боје darkgreen, попуњен бојом khaki. Шта представља многоугао који цртамо?

Комбиновање облика

Научили смо да цртамо сваки од појединачних облика (дужи, квадрате и правоугаонике, кругове и елипсе, кружне лукове, полигоне). Резимирајмо функције које смо користили.

дуж

pg.draw.line(prozor, boja, (x1, y1), (x2, y2), debljina)

правоугаоник

pg.draw.rect(prozor, boja, (x, y, sirina, visina), debljina)

круг

pg.draw.circle(prozor, boja, (x, y), r, debljina)

елипса

pg.draw.ellipse(prozor, boja, (x, y, sirina, visina), debljina)

лук

pg.draw.arc(prozor, boja, (x, y, sirina, visina), od_ugao, do_ugao, debljina)

Утврди градиво тако што ћеш дати одговоре на наредних неколико питања.

    Упари наредбе за цртање и облике који се њима цртају. Покушај поново!
  • Дуж
  • pg.draw.line
  • Многоугао
  • pg.draw.polygon
  • Правоугаоник
  • pg.draw.rect
  • Круг
  • pg.draw.circle
        Q-21: Q-20: Поређај у складу са типичним редоследом аргумената у функцијама за цртање:prozor
boja
koordinate
debljina
        

    Q-22: Приликом цртања ког од наведених облика се координате задају у облику листе уређених парова?

  • Круг
  • Покушај поново
  • Елипса
  • Покушај поново
  • Многоугао
  • Тачно
  • Дуж
  • Покушај поново
  • Квадрат
  • Покушај поново

Сада можемо цртати и цртеже у којима се комбинују разне врсте ових облика. Ево једног примера.

Чича Глиша

Чича Глиша

Цртеж по упутству

Исцртај следеће облике и покрени програм да видиш цртеж који се добија.

Бојом limegreen исцртај:

  • пуну елипсу која је уписана у правоугаоник, чије је горње лево теме \((75, 100)\), ширина му је 150, а висина 180;

  • линију дебљине 6, од тачке \((130, 110)\) до тачке \((120, 20)\);

  • још једну линију дебљине 6, од тачке \((170, 110)\) до тачке \((180, 20)\);

  • попуњен круг полупречника 10 пиксела, са центром у тачки \((120, 20)\);

  • попуњен круг полупречника 10 пиксела, са центром у тачки \((180, 20)\);

Црном бојом исцртај још две пуне елипсе, и то:

  • једну уписану у правоугаоник чије је горње лево теме \((110, 140)\), ширина му је 30, а висина 50;

  • другу уписану у правоугаоник чије је горње лево теме \((160, 140)\), ширина му је 30, а висина 50;

Шта добијеш када нацрташ овај цртеж?

Приказ слика

Сада сте научили да цртате помоћу геометријских облика, па можемо да вам откријемо једну тајну. Ако сте раније користити Scratch, знате колико је интересантно било када сте ликове на екрану могли да представљате сличицама (било унапред понуђеним, било преузетим са интернета). И PyGame нуди ту функционалност и то често бива једноставније него цртање помоћу геометријских облика.

Претпоставићемо да на располагању имамо слику мачке у датотеци macka.png. Ако овај програм покрећеш на свом рачунару (на пример, из окружења IDLE) потребно је да слику преузмеш и снимиш на исто место на коме је снимљена и изворна датотека Python програма (датотека са екстензијом py).

../_images/macka.png

Први корак је да се слика учита. То се ради помоћу функције pg.image.load којој се као параметар наводи назив датотеке са сликом (то су обично датотеке са екстензијама png или jpg). После учитавања слике могуће је позвати convert() да би се слика превела из формата у којем је записана у датотеци у формат који је погодан за приказивање на екрану.

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

Приказ текста

PyGame омогућава и да се на екрану пише текст. Тексту је могуће задавати боју, фонт, величину и положај. Размотримо наредни пример који у горњем левом углу прозора исписује поруку Zdravo svete!.

Приказ текста захтева неколико корака.

Прво, потребно је одабрати фонт којим ће се текст исписивати. Најлакше је да употребимо функцију pg.font.SysFont која прима два параметра: назив системског фонта (инсталираног на нивоу оперативног система) и његову величину. Уместо системског фонта могуће је навести и неку датотеку са фонтом (то су обично .ttf или .otf датотеке) и тада се користи функција pg.font.Font, али то нећемо у наставку користити.

Други корак је да се креира сличица (прецизније објекат типа Surface) која представља нацртани текст. То можемо једноставно урадити функцијом font.render где је font објекат фонта креиран у претходном кораку, а параметри функције су редом ниска (стринг) која представља текст који се исписује, логичка вредност која одређује да ли ће се цртати лепшим линијама (тј. користити такозвана техника антиалијасинга) и на крају боја којом ће се текст исписивати.

Процедура је надаље потпуно идентична као и у случају слике. У трећем кораку добијену сличицу можемо поставити на било коју позицију на екрану (па и на више њих). То радимо као и са свим другим сличицама, помоћу функције prozor.blit чији је први параметар сличица, а други координате на које ће бити постављен горњи леви угао слике тј. текста.

Домаћи задатак - буди уметник

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