-
Notifications
You must be signed in to change notification settings - Fork 1
/
rational-trackball.html
56 lines (45 loc) · 2.26 KB
/
rational-trackball.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script src="http://peterolson.github.com/BigRational.js/BigInt_BigRat.min.js"></script>
<script src="webgl-utils.js"></script>
<script src="rational-trackball.js"></script>
<title>Implementing a trackball with rational numbers</title>
</head>
<body onload="main();">
<p>Some time ago, I implemented a <a href=http://grondilu.github.io/cube.html>
trackball without any trigonometric function</a>.
In a nutshell, I did it with the following matrix:</p>
$$\frac{1}{q^2}\begin{pmatrix}
s^2 + 4(y^2 - x^2) & -8xy & -4sx\\
-8xy & s^2 + 4(x^2 - y^2) & -4sy\\
4sx & 4sy & s^2 - 4(x^2 + y^2)
\end{pmatrix}$$
<p>where \(x\) and \(y\) are the displacements of the mouse on the screen
and \(q\) and \(s\) are short for \(1 + x^2 + y^2\) and \(1 - x^2 - y^2\)
respectively.</p>
<p>It worked very well and I was happy about it, but there was a little concern: floating point
approximations. Since this matrix is made purely out of rational numbers, I was
wondering if I could try to do exact calculations. I was expecting things
to be slower, but I wanted to see how bad it'd be.</p>
<p>So I picked a <a href="http://peterolson.github.com/BigRational.js">javascript bigrational library</a>
and gave it a shot:</p>
<div id="canvas-container">
<div id=matrices style="position:absolute"></div>
<canvas id="canvas" width="800" height="600" style="border:1px solid black, position: absolute;">
Apparently your browser does not support HTML5 canvas.
</canvas>
</div>
<br>
<button type=reset id=reset onclick="reset();">Reset</button>
<p>As you can see, things go smooth at first, but if you keeping
rotating the cube around, soon enough you'll notice some horrible lag.
That's because the numerators and denominators in the matrix become
bigger and bigger. Floating point approximations for the numerators,
denominators and values of the matrix are shown on the canvas in real-time.<br>
</body>
</html>