Play with reflections
Try configuration of five tangent spheres.
This commit is contained in:
parent
69a9baa8ee
commit
06a9dda5bb
@ -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>
|
||||||
|
@ -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 ===
|
||||||
|
Loading…
Reference in New Issue
Block a user