63 lines
1.4 KiB
HTML
63 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: #ffe0f0;
|
|
}
|
|
|
|
/* needed to keep Ganja canvas from blowing up */
|
|
canvas {
|
|
min-width: 600px;
|
|
max-width: 600px;
|
|
min-height: 600px;
|
|
max-height: 600px;
|
|
}
|
|
</style>
|
|
<script src="https://unpkg.com/ganja.js"></script>
|
|
</head>
|
|
<body>
|
|
<p><button onclick="flipPoint()">Flip point</button></p>
|
|
<script>
|
|
// in the default view, e4 + e5 is the point at infinity
|
|
let CGA3 = Algebra(4, 1);
|
|
let v = [
|
|
CGA3.inline(() => 1e1 + 1e5)(),
|
|
CGA3.inline(() => 1e2 + 1e5)(),
|
|
CGA3.inline(() => 1e3 + 1e5)()
|
|
];
|
|
let w = [
|
|
CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(),
|
|
CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)(),
|
|
CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)()
|
|
];
|
|
let s = CGA3.inline(() => -Math.sqrt(1.2)*1e4 + Math.sqrt(0.2)*1e5);
|
|
|
|
// create scene function
|
|
let scene = () => [
|
|
0xff00b0, v[0],
|
|
0x00ffb0, v[1],
|
|
0x00b0ff, v[2],
|
|
0x800040, w[0],
|
|
0x008040, w[1],
|
|
0x004080, w[2],
|
|
0xd0e0f0, s
|
|
];
|
|
|
|
// initialize graph
|
|
let gr = CGA3.graph(
|
|
scene,
|
|
{
|
|
conformal: true, gl: true, grid: true
|
|
}
|
|
)
|
|
document.body.appendChild(gr);
|
|
|
|
function flipPoint() {
|
|
v[0] = CGA3.Dual(CGA3.Mul(s, v[0]));
|
|
requestAnimationFrame(gr.update.bind(gr, scene));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|