Opusťme černý pythonovský shell a pusťme se do grafiky, jak ji chápe Python. Zkusíme si malovat, ale ne myší, jako v Malování, ale pomocí obyčejných příkazů. Grafický modul, který jsme k tomu zvolili, se jmenuje Livewires.

Úvod

Budu přepokládat, že máte nainstalovaný modul Livewires, jak bylo popisováno v lekci 0. Vyzkoušejte příkaz import livewires, pokud se neobjeví žádná hláška, je vše OK. Jinak zpět na lekci 0 a zkuste nainstalovat a případně se poptat v Poradně, jestli někdo z vašich "spolužáků" nebude vědět. Tímto vás nenápadně vyzývám, aby jste si navzájem pomáhali. Pomáhat, ale ne opisovat! :o)

U grafiky (a tedy i u grafických her) není vhodný na zkoušení příkazů "Python Shell", ale - mnohem raději - "Python (command line)", který byste měli najít v menu Start na podobném místě, jako jste našli IDLE. A možná nepoužívejte ani IDLE na editování programu, ale použijte jiný editor, např. PSPad a programy spouštějte v TC Enterem nebo na příkazové řádce v patřičném adresáři zadat python nazevprogramu.py.

Je to docela dlouhá lekce. Nedělejte si moc starosti, pokud to bude chvíli trvat, než ji projdete. Dnes ostatně projdeme jen polovinu. Druhá nás čeká příště.

Body, čáry a barvy

V 1. lekci jste viděli celkem nudný příklad grafiky v Pythonu. Projděme si ho ještě jednou, ale více podrobněji.

from livewires import *
begin_graphics()

set_colour(Colour.red)
move(100,100)
draw(200,100)
set_colour(Colour.blue)
draw(100,200)
sleep(2)  # počkej chvíli, abychom si to stihli prohlédnout

end_graphics()

První řádka importuje modul livewires, bere z něj všechny proměnné a funkce pro použití ve vašem programu. Měla by vám být povědomá a známá. Doposud jsme používali tvar import livewires. Pokud bychom to tak udělali, museli bychom např. na druhém řádku použít livewires.begin_graphics(). Výše uvedený tvar se používá hlavně u grafických prostředí, jinak je silně doporučeno použivat obyčejný tvar.

Druhá říká počítači, aby vykreslil okno, do kterého budete umísťovat čáry a kruhy a jiné tvary. Poslední řádka, end_graphics(), čeká na to, až se grafické okno zavře a pak resetuje některé věci, abyste mohli říci znovu begin_graphics() a začít načisto.

Všechny zajímavé věci se ději mezi tím.

set_colour(Colour.red)

To znamená: maluj všechno červenou barvou, dokud ti neřeknu jinak. Je zde dostupných spousta barev, ale jen pár z nich má jména. Všechna jména začínají na Colour. z důvodů, do kterých se nyní nebudu pouštět.

move(100,100)
draw(200,100)

Musíte nejdříve poznat jak smýšlí o grafice, abyste pochopili tyto řádky. (Ve skutečnosti to není samotný Python, ale spíše modul livewires, ale to nyní nevadí.)

Pixely

Grafické okno - jako vše na obrazovce - je složeno z pixelů (bodů) : malých barevných čtverečků nebo obdélníků. Pokud se podíváte zblízka na vaši počítačovou obrazovku, uvidíte co tím myslím. (Proč tak zvláštní jméno "pixely"? Myslím, že je to zkratka pro picture element)

Každé místo v grafickém okně má své souřadnice: nejdříve kolik je pixelů (bodů) zleva doprava (souřadnice x) a pak kolik je pixelů (bodů) zespoda nahoru (souřadnice y). Tady je obrázek:

Každý bod (pixel) má tedy přesnou "adresu" a pixel na této adrese můžeme nějak vybarvit. Obyčejně jich vybarvujeme ale několik za sebou, třebas když malujeme čáru.

Například okno nebo obrazovka s rozměry 800x600, obsahuje celkem 480 000 bodů (pixelů), přičemž každý může mít jinou barvu.

Aktuální bod

Doufám, že jste si zkusili příkazy move a draw, i když jste asi zatím nevěděli, proč dělají to, co dělají. Prvním se přesuneme na bod o souřadnicích (100,100) a druhým nakreslíme čáru z tohoto (aktuálního) bodu do bodu (200,100). (Tyto mají stejnou souřadnici y (druhé číslo v závorce), takže jsou ve stejné "výšce". Druhý bod (200,100) má větší souřadnici x než ten první (100,100), takže je více vpravo.)

Snad (a nebo taky ne) vám zde může pomoci představa malého robota, který cestuje po grafickém okně. Když řeknete move(100,100) robot popojde na (100,100). Když řeknete draw(200,100), robot popojde na (200,100), ale navíc ještě maluje za sebou čáru tak, jak jde.

Ten poslední bod, kde jsme skončili nebo místo, kde robot právě teď je se nazývá "aktuální bod". Hlavně proto, že je to o mnoho kratší, než jakákoliv ze dvou předchozích variant.

Jistě je pěkné, když budete umět v u něco namalovat, ale důležitější je, abyste pochopili princip grafiky, který je ostatně platný ve všech programovacích jazycích. Tento odstavec "Aktuální bod" čtěte a zkoušejte tolikrát, dokud to nebude jasné. Používejte tužku, papír, Poradnu a hlavu :-). Nechoďte dále, dokud to nebude jasné!

Malujeme obličej

Zkusme si namalovat něco zajímavějšího. Co třebas obličej? Není jednoduché namalovat obličej s rovnými čarami. Obličej je přeci trochu kulatý, a tak...

Chodíme do kruhu

...potřebujeme umět namalovat věci, které jsou oblé. Například kruhy. Vyzkoušejte tyto příkazy na příkazovém řádku (pokud to budete zkoušet jako program, asi budete muset na konec přidat end_graphics()):

from livewires import *
begin_graphics()
circle(300,200,100)

Ta tři čísla v závorce jsou souřadnice kruhu (první dvě) a poloměr kruhu, tj. vzdálenost od středu k okraji (třetí). Vyzkoušejte spouštění tohoto programu s různými hodnotami (čísly) a ujistěte se, že víte, co dělá.

A co dělá toto? (Zkuste to odhadnout předtím, něž ho spustíte. A pokud nebudete vědět, zeptejte se :-)... )

for r in 100, 110, 120, 130, 140:
     circle(300,200,r)

Tak co, namalujeme si obličej? Zkusíme si namalovat něco, co vypadá nějak takto:

Jinými slovy, potřebujeme umět namalovat:

• Jeden velký kruh (obvod celé hlavy)
• Dva malé kruhy (oči)
• Část kruhu (pusa)
• Dvě rovné čáry (nos)

Půjde to snadněji, když si vezmete kousek čtverečkovaného nebo milimetrového papíru. Na něj namalujte obličej:

Pokud jste skutečně tak líní, dívejte se alespoň na obličej na mřížce nahoře! Přesto ještě jednou: toto nikdy nedělejte, malujte! Nestačí se jen dívat a říkat to chápu, to chápu, ....

Ta mřížka má 10 čtverečků na každé straně. Předpokládejme střed mřížky na souřadnicích (300,200) (na tom bodu není nic zvláštního, jen že je někde uprostřed grafického okna), a že každý čtvereček má 10 pixelů.

Pusa je vcelku složitější, tak ji zatím přeskočme. Všechno ostatní bychom měli snadno zaměřit. Například kruh má střed v bodě (300,200) a jeho poloměr je 4 čtverečky, tedy 40 pixelů. Levé oko má střed na (285,210) a poloměr 5 pixelů (polovina čtverečku). Ostatní souřadnice nechávám na vás. Takže:

Pokračování příště

Úkol

Napište program, který namaluje celý obličej kromě pusy. Na kruhy používejte funkci circle(x,y,r) a na rovné čáry kombinace funkcí move(x,y) a draw(x,y), kde za x,y,r musíte dosazovat správná čísla (pixely).

Pro známkování úkolů platí stupnice uvedená v Poradně. Kdo chce 1, musí se činit více, než jen splnit úkol ;o). Těším se na vaše řešení!

Úkol 2.