How to make my own web page

[nwikner]

I and my friends have found the web page, https://enkimute.github.io/ganja.js/examples/coffeeshop.html, to be very enlightening in my efforts to learn GA. However I find the "my stash" tab to be cumbersome. For one thing, I have things in there that are broken or incorrect which I cannot delete. For another it doesn't have enough structure for me to put in a large number of examples.

So I would like to make a collection of my own web pages. I am not a crafter of web pages, and barely know html, so I would appreciate it if someone could tell me why the following yields a blank web page (note that all the code is copied from https://enkimute.github.io/ganja.js/examples/coffeeshop.html#pga2d_points_and_lines).
`

<title>My First ganga.js Page</title> <SCRIPT SRC="https://unpkg.com/ganja.js"> var Algebra=require('ganja.js'); // Create a Clifford Algebra with 2,0,1 metric. Algebra(2,0,1,()=>{

// in 2D PGA, grade-1 elements or vectors (e0,e1,e2) represent
// reflections AND lines (the invariant of a reflection)
// Ganja.js overloads scientific notation to specify basis blades.
var line = (a,b,c)=>a1e1 + b1e2 + c*1e0;

// grade-2 elements or bivectors (e01,e02,e12) represent
// rotations/translations AND points/infinite points (the invariant
// of a rotation/translation). We define them using the dualisation
// operator (!) to be independent of choice of basis (e12 vs e21)
var point = (x,y)=>!(1e0 + x1e1 + y1e2);

// Define 3 points in the plane.
var A = point(-1, -1), B = point(-1, 1), C = point(1, 1);

// Define the line y = 0.5 - x (i.e.) x + y - 0.5 = 0
var L = line(1, 1, -0.5)

// A line can also be defined by JOINING (&) two points.
// We define M as a function '()=>' so it will update when C or A
// are dragged.
var M = ()=>C & A;

// Similarly a point can be defined by MEETING (^) two lines.
// Again, we define point D as a function so it will update when
// L or M change.
var D = ()=>L ^ M;

// We now use the graph function to create an SVG object that visualises
// our algebraic elements. The graph function accepts an array of items
// that it will render in order. It can render points, lines, labels,
// colors, line segments and polygons.
document.body.appendChild(this.graph([
"Drag A,B,C", // First label is used as title.
0xD0FFE1, // Numbers are colors - use hex!
[A,B,C], // render polygon ABC.
0x882288, // Set the color to purple.
[B,C], // Render line segment from B to C.
0x00AA88, // Medium green.
L, "L", M, "M", // Render and label lines.
0x224488, // Set color blue.
D, "D", // Intersection point of L and M
0x008844, // Set darker green
A, "A", // Render point A and label it.
B, "B", // Render point B and label it.
C, "C", // Render point C and label it.
],{
grid : true, // Display a grid
labels : true, // Label the grid
lineWidth : 3, // Custom lineWidth (default=1)
pointRadius : 1, // Custon point radius (default=1)
fontSize : 1, // Custom font size (default=1)
scale : 1, // Custom scale (default=1), mousewheel.
}));

});
</SCRIPT>

`

[tionkje]

I didn't test it but maybe try something like this.

<title>My First ganga.js Page</title>
<SCRIPT SRC="https://unpkg.com/ganja.js"></SCRIPT>
 <SCRIPT> 
var Algebra=require('ganja.js'); // Create a Clifford Algebra with 2,0,1 metric. Algebra(2,0,1,()=>{
// in 2D PGA, grade-1 elements or vectors (e0,e1,e2) represent
// reflections AND lines (the invariant of a reflection)
// Ganja.js overloads scientific notation to specify basis blades.
var line = (a,b,c)=>a1e1 + b1e2 + c*1e0;

// grade-2 elements or bivectors (e01,e02,e12) represent
// rotations/translations AND points/infinite points (the invariant
// of a rotation/translation). We define them using the dualisation
// operator (!) to be independent of choice of basis (e12 vs e21)
var point = (x,y)=>!(1e0 + x1e1 + y1e2);

// Define 3 points in the plane.
var A = point(-1, -1), B = point(-1, 1), C = point(1, 1);

// Define the line y = 0.5 - x (i.e.) x + y - 0.5 = 0
var L = line(1, 1, -0.5)

// A line can also be defined by JOINING (&) two points.
// We define M as a function '()=>' so it will update when C or A
// are dragged.
var M = ()=>C & A;

// Similarly a point can be defined by MEETING (^) two lines.
// Again, we define point D as a function so it will update when
// L or M change.
var D = ()=>L ^ M;

// We now use the graph function to create an SVG object that visualises
// our algebraic elements. The graph function accepts an array of items
// that it will render in order. It can render points, lines, labels,
// colors, line segments and polygons.
document.body.appendChild(this.graph([
"Drag A,B,C", // First label is used as title.
0xD0FFE1, // Numbers are colors - use hex!
[A,B,C], // render polygon ABC.
0x882288, // Set the color to purple.
[B,C], // Render line segment from B to C.
0x00AA88, // Medium green.
L, "L", M, "M", // Render and label lines.
0x224488, // Set color blue.
D, "D", // Intersection point of L and M
0x008844, // Set darker green
A, "A", // Render point A and label it.
B, "B", // Render point B and label it.
C, "C", // Render point C and label it.
],{
grid : true, // Display a grid
labels : true, // Label the grid
lineWidth : 3, // Custom lineWidth (default=1)
pointRadius : 1, // Custon point radius (default=1)
fontSize : 1, // Custom font size (default=1)
scale : 1, // Custom scale (default=1), mousewheel.
}));

});
</SCRIPT>

You can't both add a src attribute and content to a script tag.

[nwikner]

That didn't quite work. I had to take out the line,
var Algebra=require('ganja.js'); // Create a Clifford Algebra with 2,0,1 metric. Algebra(2,0,1,()=>{
and put back,
Algebra(2,0,1,()=>{
The final, working, result is in the attachment
Points and Lines.txt
Thanks for your prompt reply. Now I can start experimenting...

[kungfooman]

You could also consider to fork the project and add your own examples in the CoffeeShop (not that hard once you did it a few times).

(that's how I keep track of my own examples as well, without relying on "my stash")

[nwikner]

Sigh... As in so many things, the number of steps back can be daunting. I want to learn geometric algebra, but first I have to learn html, javascript, and GitHub.

It's like wanting to build a house, but first you have to learn to use a hammer and to manufacture nails. Oh wait! there are no hammers. First you have to learn how to build a hammer.
</cri du coeur>
So I guess, at some point, I'll learn how to fork on GitHub. Thanks for answering.

[kungfooman]

I'm sure you won't regret learning HTML/JavaScript/GanjaScript, after all programming is what makes things "computational" and you may want to compute things at some point (e.g. some kind of 3D product)?

In your analogy, Ganja.js basically contains the hammer, nails and wood. You just gotta learn how to swing it 😅

[nwikner]

Is there documentation for gangScript? I haven't found anything other than comments in the sample code.