Next: Datové struktury Up: Aplikace lineární algebry Previous: Aplikace lineární algebry
. Rozebereme postupně celý kód programu
a u každé části si vysvětlíme, jaký kus teorie lineární algebry používá.
Funkci výsledného programu můžete vidět na krychle.html.
Pokud si chcete prohlédnout celý zdrojový kód, stáhněte si předchozí odkaz do souboru a otevřete
ho v libovolném textovém editoru. Program jsem testoval ve Firefoxu 3 a Internet Exploreru 7.
Bohužel není v mých silách zkoumat, v kterých prohlížečích kód funguje a v kterých ne. Takže
se omlouvám všem, kterým to nefunguje. Nicméně
funkci algoritmu si také můžete prohlédnout ve skriptu cubeoct.m
pro program Octave nebo ve skriptu cube.m
pro Matlab (ten funguje jen pro
pevně daný vektor osy rotace).
Protože točit krychlí podle pevné osy rotace je nuda, přepsal jsem ještě výše uvedený program tak, aby se krychle točila kolem osy rotace, která se zároveň také otáčí podle jiné osy rotace. Výsledek si můžete prohlédnout zde. Pokud Vás zajímá programování 3D objektů v javascriptu více, doporučuji tuto pěknou ukázku.
Teď již k samotnému programu. Algoritmus je naprogramován v javascriptu, jehož kód je vložen do následujícího HTML kódu:
<html>
<head>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="sylvester.js"></script>
<script type="text/javascript">
.
.
.
</script>
<style type="text/css">
body { text-align: center; }
canvas { border: 1px solid black; }
</style>
</head>
<body onload="init();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Program pro vykreslování grafických objektů používá tag <canvas>. Jedná se o tag z právě
vyvíjené specifikace HTML verze 5. Tutoriál na používání tohoto tagu lze najít zde.
Většina nových prohlížečů tento tag již podporuje
např. Firefox, Opera, Safari. Nicméně nebyl by to Microsoft, kdyby nepůsobil problémy
všude, kde se dá. Takže Internet Explorer (IE) tento tag samozřejmě nepodporuje a to dokonce
ani nově vyvíjená verze 8. Nicméně existuje knihovna používající VML, která tento tag
umí simulovat. Proto je v kódu tento řádek
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->který v případě, že uživatel používá IE nahraje tuto knihovnu. Další řádek nahrává knihovnu Sylvester, pro počítání s maticemi a vektory. Poslední důležitou částí výše uvedeného HMTL kódu je samotný <canvas> tag, který má velikost 150x150, je centrován a má jednopixelový rámeček. Po nahrání stránky do prohlížeče se zavolá funkce init(). V následujících podkapitolách jsou popsány jednotlivé části kódu programu v javascriptu.