StudioInfinity/dyna3
2
0
Fork 1
Code Issues 56 Pull requests 1 Projects 3 Releases 4 Wiki Activity Actions

Get a Ganja.js visualization running in Blink

Browse source
This commit is contained in:
Aaron Fenyes 2024-06-24 19:37:57 -07:00
parent 3170a933e4
commit d1ce91d2aa
2 changed files with 122 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

51
engine-proto/ganja-test/ganja-test.html Normal file
View file

@ -0,0 +1,51 @@
<!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>
<script>
// the "points spheres plane" example from the Ganja coffee shop
//
// https://enkimute.github.io/ganja.js/examples/coffeeshop.html#cga3d_points_spheres_planes
//
// 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}));
});
</script>
</body>
</html>