Animace Rubikovy kostky: složité, ale zvládnutelné
I když máme trochu 3D představivosti a zvládneme na Rubikově kostce složit třeba kostku v kostce, s animací to už tak jednoduché není. Málokdo totiž dokáže z hlavy vyjmenovat, které dílky se v kolikátém tahu otočí, jakým směrem a kolem jaké osy. Kostka má 27 dílků a když si představíme třeba 35 tahů, museli bychom si zapamatovat asi 900 různých pozic v prostoru.
Já při skládání ornamentu sleduji hlavně klíčové dílky, které chci prohodit či otočit. Vím, že ostatní se po sérii otočení, které tvoří jeden tah, vrátí tam, kam mají. Během skládání si celou kostku otáčím kolem různých os, podle toho, kterou stěnu nebo roh právě řeším. A přiznám se – už po pár tazích nemám tušení, jak je orientovaná vůči osám X, Y, Z.
A přesně tímto způsobem bychom chtěli přistupovat i k animaci. Ornament v CADu sestavím jako kdybych ho skládal ručně – o zbytek (výpočet keyframes) se postarají scripty.
Jak na to?
Cesta k automatizované animaci by mohla vypadat takto:
- Vytvořit model Rubikovy kostky z jednotlivých dílků
- Přidat nástroj pro otáčení jednotlivých vrstev
- Pomocí tohoto nástroje složit ornament a zaznamenat pohyby dílků
- Vygenerovat @keyframes pro každý dílek podle záznamu
Ale patří to vůbec do CADu?
Jasně, mohli bychom tohle celé naprogramovat jako speciální funkci. Ale byla by to jednorázová záležitost – využitelná jen pro Rubikovu kostku. Co když příště budeme chtít animovat dvanáctistěn? Nebo úplně jiný pohyb?
Tohle nepatří do obecného CADu. To patří jen do této konkrétní scény s Kostkou. Do CADu patří něco mnohem obecnějšího.
Řešení: Makrojazyk
Z toho vyplývá jedna zásadní věc: součástí každého 3D modelu by měla být i možnost uložit kód, který se k němu váže.
A právě tento kód – makrojazyk – použijeme:
- pro ovládání Rubikovy kostky,
- pro záznam jednotlivých tahů,
- a nakonec i pro převod na CSS animaci pomocí
@keyframes.
Součástí CADu bude i Makrojazyk.
Jaký jazyk použít?
Makrojazyk by měl běžet tam, kde běží CAD – tedy jak na PHP serveru, tak v prohlížeči. Odpověď je jednoduchá: zůstáváme u stejného jazyka, ve kterém je CAD napsaný. Nepřidáváme další složitost.
Malý tip na závěr
Pokud si v ukázce nastavíte expandování a průhlednost kostky, můžete sledovat i pohyb zadních stran – a tím snadněji pochopit, jak ornament vzniká.