Play with reflections

Try configuration of five tangent spheres.
This commit is contained in:
Aaron Fenyes 2024-06-25 13:40:40 -07:00
parent 69a9baa8ee
commit 06a9dda5bb
2 changed files with 38 additions and 34 deletions

View File

@ -17,31 +17,25 @@
<script src="https://unpkg.com/ganja.js"></script> <script src="https://unpkg.com/ganja.js"></script>
</head> </head>
<body> <body>
<p><button onclick="flipPoint()">Flip point</button></p> <p><button onclick="flip()">Flip</button></p>
<script> <script>
// in the default view, e4 + e5 is the point at infinity // in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1); let CGA3 = Algebra(4, 1);
let v = [ let v = [
CGA3.inline(() => 1e1 + 1e5)(), CGA3.inline(() => Math.sqrt(0.5)*( 1e1 + 1e2 + 1e3 + 1e5))(),
CGA3.inline(() => 1e2 + 1e5)(), CGA3.inline(() => Math.sqrt(0.5)*( 1e1 - 1e2 - 1e3 + 1e5))(),
CGA3.inline(() => 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)()
]; ];
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 // create scene function
let scene = () => [ let scene = () => [
0xff00b0, v[0], 0xff00b0, v[0],
0x00ffb0, v[1], 0x00ffb0, v[1],
0x00b0ff, v[2], 0x00b0ff, v[2],
0x800040, w[0], 0x8040ff, v[3],
0x008040, w[1], 0xc0c0c0, v[4]
0x004080, w[2],
0xd0e0f0, s
]; ];
// initialize graph // initialize graph
@ -53,8 +47,16 @@
) )
document.body.appendChild(gr); document.body.appendChild(gr);
function flipPoint() { function flip() {
v[0] = CGA3.Dual(CGA3.Mul(s, v[0])); for (let n = 0; n < 4; ++n) {
// reflect
v[n] = CGA3.Mul(CGA3.Mul(v[4], v[n]), v[4]);
// de-noise
for (let k = 6; k < v[n].length; ++k) {
v[n][k] = 0;
}
}
requestAnimationFrame(gr.update.bind(gr, scene)); requestAnimationFrame(gr.update.bind(gr, scene));
} }
</script> </script>

View File

@ -26,33 +26,27 @@ canvas {
""" """
controls = """ controls = """
<p><button id="flip-button">Flip point</button></p> <p><button id="flip-button">Flip</button></p>
""" """
graph_script = """ graph_script = """
// in the default view, e4 + e5 is the point at infinity // in the default view, e4 + e5 is the point at infinity
let CGA3 = Algebra(4, 1); let CGA3 = Algebra(4, 1);
let v = [ let v = [
CGA3.inline(() => 1e1 + 1e5)(), CGA3.inline(() => Math.sqrt(0.5)*( 1e1 + 1e2 + 1e3 + 1e5))(),
CGA3.inline(() => 1e2 + 1e5)(), CGA3.inline(() => Math.sqrt(0.5)*( 1e1 - 1e2 - 1e3 + 1e5))(),
CGA3.inline(() => 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)()
]; ];
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 // create scene function
let scene = () => [ let scene = () => [
0xff00b0, v[0], 0xff00b0, v[0],
0x00ffb0, v[1], 0x00ffb0, v[1],
0x00b0ff, v[2], 0x00b0ff, v[2],
0x800040, w[0], 0x8040ff, v[3],
0x008040, w[1], 0xc0c0c0, v[4]
0x004080, w[2],
0xd0e0f0, s
]; ];
// initialize graph // initialize graph
@ -65,11 +59,19 @@ let gr = CGA3.graph(
document.body.appendChild(gr); document.body.appendChild(gr);
// connect flip button // connect flip button
function flipPoint() { function flip() {
v[0] = CGA3.Dual(CGA3.Mul(s, v[0])); for (let n = 0; n < 4; ++n) {
// reflect
v[n] = CGA3.Mul(CGA3.Mul(v[4], v[n]), v[4]);
// de-noise
for (let k = 6; k < v[n].length; ++k) {
v[n][k] = 0;
}
}
requestAnimationFrame(gr.update.bind(gr, scene)); requestAnimationFrame(gr.update.bind(gr, scene));
} }
document.querySelector('#flip-button').addEventListener('click', flipPoint); document.querySelector('#flip-button').addEventListener('click', flip);
""" """
# === page construction === # === page construction ===