102 lines
No EOL
4 KiB
Markdown
102 lines
No EOL
4 KiB
Markdown
# Interaktivní 2D vektorová grafika
|
|
|
|
## Animace vektorové grafiky
|
|
|
|
- obraz měnící se v čase
|
|
- význam:
|
|
- snadnější vysvětlení dynamických jevů
|
|
- upoutání pozornosti
|
|
- oživení prezentace
|
|
- jednoduché hry
|
|
+ probíhá v čase t = 0 až T sekund
|
|
+ libovolný parametr vektorového elementu může být časově závislý
|
|
+ funkce času může mít fyzikální podstatu
|
|
- často je místo složité funkce vhodnější ji pro účel animace aproximovat
|
|
- vybereme uzlové body, ve kterých spočítáme přesnou hodntu
|
|
|
|
### Tvorba animace
|
|
|
|
**1. řešení** - nechci nic programovat
|
|
- nejjednodušší přístup
|
|
- tvorba ve WYSIWYG vektorovém editoru, zobrazení v běžné aplikaci
|
|
- **problémy**
|
|
- kreslítka animace běžně nepodporují
|
|
- ukládací formáty (kromě SVG a XAML) animace nepodporují
|
|
- zobrazovací aplikace mohou mít s animacemi problém
|
|
- mimimální kontrola nad kvalitou animace (trvání 5 sekund, ale FPS neovlivním)
|
|
|
|
**2. řešení** - animace řídí grafická knihovna
|
|
- tvorba ve WYSIWYG vektorovém editoru
|
|
- ve své aplikaci načteme a objekty rozhýbáme pomocí grafické knihovny
|
|
- **problémy**
|
|
- může být obtížné získat objekty oddělené
|
|
- grafické knihovny animace běžně nativně nepodporují
|
|
|
|
**3. řešení** - kompletně vše si řídím sám
|
|
- univerzální způsob
|
|
- animaci si kompletně zařídíme sami včetně interpolací
|
|
- objekty mohou být načteny ze souborů
|
|
- **problémy**
|
|
- není až tak jednoduché
|
|
- animace nepřenosná bez aplikace
|
|
|
|
### Interpolace mezi klíčovími snímky
|
|
|
|
- lze použít libovolnou interpolaci
|
|
- v praxi diskrétní, lineární nebo kubickou
|
|
|
|
**Lineární interpolace**
|
|
- pro stanovení hodnoty $t \in \, <t_{i}, t_{i+1}>$ vyžadujeme pouze znalost hodnot v časech $t_{i}, t_{i+1}$
|
|
- $h(t) = (1-t) \cdot h_{i} + t \cdot h_{i+1}$ pro $t \in \, <0, 1>$
|
|
- lze použít jen u jednoduchých animací
|
|
- nelze dobře použít např. pro pohyb na kružnici
|
|
|
|
**Kubická interpolace**
|
|
- pro stanovení hodnoty $t \in \, <t_{i}, t_{i+1}>$ je vyžadována znalost rychlosti růstu hodnot v čase $t_{i}, t_{i+1}$, tedy derivace $h'(t_{i}), h'(t_{i+1})$
|
|
- $h(t) = a \cdot t^3 + b \cdot t^2 + c \cdot t + d$ pro $t = \, <0, 1>$
|
|
- konstanty z požadavků na interpolaci
|
|
- rychlost lze také odvodit z dat
|
|
|
|
## Událostní programování
|
|
|
|
- moderní OS
|
|
- umožňuje běh více aplikací
|
|
- zajišťují správný chod systému
|
|
- aplikace
|
|
- nepřebírá kontrolu nad hardwarem
|
|
- svou čiností se vzájemně neovlivňují
|
|
- řízena událostmi
|
|
|
|
Aplikace přijímá události od OS **ve smyčce** - program neodpovídá, když aplikace nezvládá reagovat na události.
|
|
|
|
**Práce s myší a klávesnicí**
|
|
- manipulace s nimi vede k systémovým událostem
|
|
- součástí událostí jsou často i parametry
|
|
- např. pozice myši, označení stisknuté klávesy, ...
|
|
- jednoduchá událost vede často k několika událostem
|
|
|
|
**Práce s dotykovou obrazovkou**
|
|
- dotyk (perem či prstem) převeden systémem na stisk tlačítka myši
|
|
- stejně fungují i základní gesta (zoom, pan)
|
|
- podpora multi-touch je složitější
|
|
- používají se speciální události, které nemusí knihovna implementovat
|
|
|
|
**Interakce s grafickými objekty**
|
|
- je potřeba zjistit, zda na objekt uživatel klikl (tzv. hit-test)
|
|
- je-li objektem standardní komponentou, postará se o zjištění komponenta
|
|
- programátor řeší pouze obsluhu události komponenty
|
|
|
|
**Hit-test**
|
|
- je potřeba rozlišovat
|
|
- původ události - program, myš, pero, prst
|
|
- účet hit-testu - efekt po najetí, výběr objektu
|
|
- je potřeba brát ohled na velikost objektů
|
|
- přesný hit-test pro kružnici
|
|
- porovnání kvardátu vzdálenosti od středu kružnice a kvadrátu jejího poloměru
|
|
- přesný hit-test pro konvexní polygon
|
|
- použije se zjištění vzdálenosti bodu od přímek
|
|
- hit-test s tolerancí pro přímku
|
|
- zjištění vzdálenosti bodu od přímky
|
|
- hit-test s tolerancí obecně
|
|
- průsečík objektu s kružnicí/čtvercem se středem v bodě zjišťování
|
|
- stačí detekovat pouze průnik |