Get familiar with Ganja.js inline syntax

This commit is contained in:
Aaron Fenyes 2024-06-25 01:54:01 -07:00
parent d1ce91d2aa
commit 3c34481519
2 changed files with 47 additions and 49 deletions

View File

@ -18,34 +18,30 @@
</head>
<body>
<script>
// the "points spheres plane" example from the Ganja coffee shop
//
// https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga3d_points_spheres_planes
//
// in the default view, e4 + e5 is the point at infinity
CGA3 = Algebra(4, 1);
v1 = CGA3.inline(() => 1e1 + 1e5)();
v2 = CGA3.inline(() => 1e2 + 1e5)();
v3 = CGA3.inline(() => 1e3 + 1e5)();
w1 = CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
w2 = CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
w3 = CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
s = CGA3.inline(() => -Math.sqrt(1.2)*1e4 + Math.sqrt(0.2)*1e5);
// Create a Clifford Algebra with 4,1 metric for 3D CGA.
Algebra(4,1,()=>{
// We start by defining a null basis, and upcasting for points
var ni = 1e4+1e5, no = .5e5-.5e4;
var up = (x)=> no + x + .5*x*x*ni;
// Next we'll define 4 points
var p1 = up(1e1), p2 = up(1e2), p3 = up(-1e3), p4 = up(-1e2);
// The outer product can be used to construct the sphere through
// any four points.
var s = ()=>p1^p2^p3^p4;
// The outer product between any three points and infinity is a plane.
var p = ()=>p1^p2^p3^ni;
// Graph the items.
document.body.appendChild(this.graph([
0x00FF0000, p1, "p1", p2, "p2", p3, "p3", p4, "p4", // points
0xE0008800, p, "p", // plane
0xE00000FF, s, "s" // sphere
], {conformal: true, gl: true, grid: true}));
});
document.body.appendChild(CGA3.graph(
[
0xff00b0, v1,
0x00ffb0, v2,
0x00b0ff, v3,
0x800040, w1,
0x008040, w2,
0x004080, w3,
0xd0e0f0, s
],
{
conformal: true, gl: true, grid: true
}
));
</script>
</body>
</html>

View File

@ -30,28 +30,30 @@ canvas {
# https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga3d_points_spheres_planes
#
sphere_example = """
Algebra(4, 1, ()=>{
// We start by defining a null basis, and upcasting for points
var ni = 1e4+1e5, no = .5e5-.5e4;
var up = (x)=> no + x + .5*x*x*ni;
// in the default view, e4 + e5 is the point at infinity
CGA3 = Algebra(4, 1);
v1 = CGA3.inline(() => 1e1 + 1e5)();
v2 = CGA3.inline(() => 1e2 + 1e5)();
v3 = CGA3.inline(() => 1e3 + 1e5)();
w1 = CGA3.inline(() => 1e1 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
w2 = CGA3.inline(() => 1e2 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
w3 = CGA3.inline(() => 1e3 - Math.sqrt(0.2)*1e4 + Math.sqrt(1.2)*1e5)();
s = CGA3.inline(() => -Math.sqrt(1.2)*1e4 + Math.sqrt(0.2)*1e5);
// Next we'll define 4 points
var p1 = up(1e1), p2 = up(1e2), p3 = up(-1e3), p4 = up(-1e2);
// The outer product can be used to construct the sphere through
// any four points.
var s = ()=>p1^p2^p3^p4;
// The outer product between any three points and infinity is a plane.
var p = ()=>p1^p2^p3^ni;
// Graph the items.
document.body.appendChild(this.graph([
0x00FF0000, p1, "p1", p2, "p2", p3, "p3", p4, "p4", // points
0xE0008800, p, "p", // plane
0xE00000FF, s, "s" // sphere
], {conformal: true, gl: true, grid: true}));
});
document.body.appendChild(CGA3.graph(
[
0xff00b0, v1,
0x00ffb0, v2,
0x00b0ff, v3,
0x800040, w1,
0x008040, w2,
0x004080, w3,
0xd0e0f0, s
],
{
conformal: true, gl: true, grid: true
}
));
"""
# === page construction ===