77 lines
1.9 KiB
HTML
77 lines
1.9 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="flip()">Flip</button></p>
|
|
<script>
|
|
// in the default view, e4 + e5 is the point at infinity
|
|
let CGA3 = Algebra(4, 1);
|
|
let elements = [
|
|
CGA3.inline(() => Math.sqrt(0.5)*( 1e1 + 1e2 + 1e3 + 1e5))(),
|
|
CGA3.inline(() => Math.sqrt(0.5)*( 1e1 - 1e2 - 1e3 + 1e5))(),
|
|
CGA3.inline(() => Math.sqrt(0.5)*(-1e1 + 1e2 - 1e3 + 1e5))(),
|
|
CGA3.inline(() => Math.sqrt(0.5)*(-1e1 - 1e2 + 1e3 + 1e5))(),
|
|
CGA3.inline(() => -Math.sqrt(3)*1e4 + Math.sqrt(2)*1e5)()
|
|
];
|
|
|
|
// set up palette
|
|
var colorIndex;
|
|
var palette = [0xff00b0, 0x00ffb0, 0x00b0ff, 0x8040ff, 0xc0c0c0];
|
|
function nextColor() {
|
|
colorIndex = (colorIndex + 1) % palette.length;
|
|
return palette[colorIndex];
|
|
}
|
|
function resetColorCycle() {
|
|
colorIndex = palette.length - 1;
|
|
}
|
|
resetColorCycle();
|
|
|
|
// create scene function
|
|
function scene() {
|
|
commands = [];
|
|
resetColorCycle();
|
|
elements.forEach((elt) => commands.push(nextColor(), elt));
|
|
return commands;
|
|
}
|
|
|
|
// initialize graph
|
|
let graph = CGA3.graph(
|
|
scene,
|
|
{
|
|
conformal: true, gl: true, grid: true
|
|
}
|
|
)
|
|
document.body.appendChild(graph);
|
|
|
|
function flip() {
|
|
let last = elements.length - 1;
|
|
for (let n = 0; n < last; ++n) {
|
|
// reflect
|
|
elements[n] = CGA3.Mul(CGA3.Mul(elements[last], elements[n]), elements[last]);
|
|
|
|
// de-noise
|
|
for (let k = 6; k < elements[n].length; ++k) {
|
|
elements[n][k] = 0;
|
|
}
|
|
}
|
|
requestAnimationFrame(graph.update.bind(graph, scene));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|