Drawing from reference

Току-що научихме как да рисуваме някои основни фигури в средата на PyGame, използвайки функции за рисуване. Както беше споменато преди, всички такива изображения се състоят от пиксели. Това са така наречените растерни или растерни изображения. Видяхме, че за да нарисуваме основни фигури, трябва да знаем координатите на пикселите, които определят всяка такава форма. В по-реалистична ситуация обаче тези координати не се дават директно и ние трябва да ги определяме сами.

Ако искаме програмно да генерираме изображение, използвайки съществуваща растерна карта като ориентир, можем да определим координатите на точките от даденото изображение. Можем да увеличим изображението в една от програмите за преглед на изображения, за да накараме всеки пиксел да изглежда като квадрат. Това може да изглежда така:

../_images/ladder_grid.png

Можем да видим, че това изображение е генерирано чрез изчертаване на 4 хоризонтални и 2 вертикални линии, а също така, че всичките 6 линии са черни и 1 пиксела широки. Тъй като знаем, че x координатата се брои отляво надясно и y отгоре надолу, както и че броенето започва от нула, можем да определим координатите на началната и крайната точка на всички шест реда просто като преброим.

Стълбица

Прочетете координатите от увеличеното изображение по-горе и напишете програма, която очертава стълби като тези.

Съвет: Чрез преброяване (от нула) можем да открием, че координатите на крайните точки на лявата вертикална линия са (5, 3) и (5, 36). Координатите на крайните точки на останалите 5 линии трябва да се определят по същия начин.

Реалният размер на изображението е много малък, само 20 пиксела широк и 40 пиксела висок. Бихме могли да определим и координатите на точките за по-големи изображения, като броим, но това би било досадно и податливо на грешки (затова в този пример избрахме толкова малко изображение). Добрата новина е, че програмите за преглед и редактиране на изображения обикновено показват координатите на пиксела, върху който в момента е курсорът на мишката. Координатите на курсора обикновено се пишат някъде в лентата на състоянието в долната част на прозореца, в който се изпълнява програмата, често в долния ляв ъгъл.

Например, в програмата за рисуване Paint, когато изображението е увеличено 8 пъти и се показва решетката, която подчертава отделните пиксели, лесно можем да позиционираме курсора върху всеки пиксел и да четем координатите му. На тази снимка курсорът на мишката беше върху червения пиксел, който, както казахме по-рано, има координатите (5, 36).

../_images/read_xy.png

В следващите задачи трябва да напишете програма, която изчертава чертеж възможно най-близко до дадената. Можете да видите чертежите, които трябва да нарисувате, когато кликнете върху бутона „Задача за игра“.

За да ви помогне да определите координатите на важни точки в чертеж, програмата, която стартирате, като щракнете върху бутона „Задача за игра“, освен чертежа, ще покаже координатите на точката, където е курсорът на мишката. За да се улесни четенето, във всички примери координатите на всички значими точки са закръглени до 5 пиксела (координатите завършват с нула или пет).

Ако искате да решите тези задачи извън уеб браузъра, в своята програма за програмиране можете да изтеглите изображенията, които вашите програми трябва да нарисуват, да ги отворите в преглед на изображения и да прочетете координатите на важните точки там.

../_images/drawing_grid_antenna.png ../_images/drawing_grid_balance.png ../_images/drawing_grid_house.png ../_images/drawing_grid_smiley.png ../_images/drawing_grid_trees.png

Антена

Преди кабелна телевизия телевизионни сигнали бяха получени от антени, които обикновено бяха поставени на покривите на домовете и сградите на хората. В тази задача трябва да се изготви една такава антена.

Както можете да видите, когато стартирате примера, чертежът се състои от седем реда. Ширината на вертикалната линия е 4 пиксела, горните две хоризонтални 1, средните два 2, а долните два 3 пиксела. Цветът на фона е “skyblue”.

Пълната програма е предоставена, можете да опитате и тук.

Balance scale

Тази рисунка се състои от линия (чиято ширина е 2) и три триъгълника. Средният триъгълник, който представлява опората на баланса, се запълва с цвят, така че при начертаването му параметърът на ширината трябва да се пропусне, докато за останалите два триъгълника трябва да се посочи ширина 2.

Усмивчо

В тази задача работата, която трябва да се свърши, е малко по-сложна. Тъй като чертежът е съставен от кръгове и елипси, ние не можем точно да прочетем всички координати и измервания, които са ни необходими директно. Това, което можем да направим, е да прочетем за всяка елипса координатата: math: x на най-лявата и най-дясната му точка ((\(X_L\) и \(X_R\)), както и \(y \) и \(Y_B\)). След това ширината и височината на елипсата могат да бъдат изчислени като разликите на съответното \(x\) ( за ширина) и \(y\) координати (за височина).

Що се отнася до кръга, имаме различни опции:

  • можем да нарисуваме кръга като елипса, вписана в квадрат (с помощта на функцията pg.draw.ellipse)

  • можем да приблизим координатите на центъра на кръга

  • ако искаме да определим координатите на центъра на кръга по-точно, първо можем да намерим точките \(X_L\), \(X_R\), \(Y_T\) и \(Y_B\) като направихме за елипси и след това изчислихме координатите на центъра, използвайки формули \(X_c = {{X_R + X_L}\over2}\) и \(Y_c={{Y_T + Y_B}\over2}\)

Kъща

Чертежът на къща се състои от кафяв правоъгълник и червен триъгълник. Можем да нарисуваме триъгълника като многоъгълник с три върха. Слънцето е изобразено като оранжев кръг, а тревата като зелен правоъгълник. Имайте предвид реда на рисуване за тревата и слънцето.

Достатъчно е да прочетете приблизително координатите на центъра на окръжността, представяща Слънцето. За тези, които искат малко математическо предизвикателство, имайте предвид, че координатите на центъра могат да бъдат по-точно определени като предишната задача, въпреки че най-ниската точка не се вижда и координатата \(Y_B\) не може да бъде прочетена.

Ако искате да видите как можете да определите координатите на центъра с по-точно четене и изчисляване, кликнете върху бутона “Определяне на центъра”.

Както в предишната задача, нека \(X_L\) и \(X_R\) обозначават \(x\) координатите на най-лявата и дясната точка на окръжността, която представлява Слънцето, и \(Y_T\) , \(Y_B\) и \(y\) координати на най-високата и най-ниската точка на този кръг.

Можем да определим :math: x координатата на центъра, както направихме в предишния пример, \(X_C = {{X_R + X_L} \over 2}\).

Тъй като най-ниската точка на кръга не се вижда, не можем да прочетем стойността \(Y_B\), но можем да определим радиуса \(r\), използвайки \(r = X_C - X_L\) или \(r = X_R - X_C\). Сега \(y\) координатата на центъра се получава лесно: \(Y_C = Y_T + r\), така че дори не ни трябваше \(Y_B\).

Дървета

Трябва да бъдат начертани три еднакви дървета, така че всяко следващо дърво да се получи, като се премести предишното надясно. Очевидно тази задача би могла да бъде дадена чрез просто описание на първото дърво и посочване на разстоянието между две съседни дървета. Програмата, която рисува изображението, се дава все пак, защото използването на изображение за задаване на задача е по-ясно и по-просто.

За да направите задачата малко по-скоро като реална ситуация (в която няма изображение), в този пример четенето на \(x\) координатата е умишлено деактивирана за дясната страна на изображението. Всички необходими координати, които не можете да четете, могат да бъдат изчислени.