Exploring JSXGraph
JSXGraph is a graphics package deveoped in Javascript, and which seems to be tailor-made for a static blog such as this. It consists of only two files: the javascript file itself, and an accompanying css file, which you can download. Alternaively you can simply link to the online files at the Javascript content delivery site cdnjs managed by cloudflare. There are cloudflare servers all over the world - even in my home town of Melbourne, Australia.
So I modified the head.html file of my theme to include a link to the
necessary files:
So I downloaded the javascript and css files as described
here
and also, for good measure, added the script line (from that page) to the
layouts/partials/head.html file of the theme. Then copied the following
snippet from the JSXGraph site:
1<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
2<script type="text/javascript">
3 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
4</script>
However, to make this work the entire script needs to be inside a <div>,
</div> pair, like this:
1<div id="box" class="jxgbox" style="width:500px; height:500px;">
2<script type="text/javascript">
3 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
4</script>
5</div>
Just to see how well this works, here's Archimedes' neusis construction of an angle trisection: given an angle \(\theta\) in a unit semicircle, its trisection is obtained by laying against the circle a straight line with points spaced 1 apart (drag point A about the circle to see this in action):
For what it's worth, here is the splendid javascript code to produce the above figure:
1<div id="box" class="jxgbox" style="width:500px; height:333.33px;">
2<script type="text/javascript">
3 JXG.Options.axis.ticks.insertTicks = false;
4 JXG.Options.axis.ticks.drawLabels = false;
5 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 3, -1.5],axis:true});
6 var p = board.create('point',[0,0],{visible:false,fixed:true});
7 var neg = board.create('point',[-0.67,0],{visible:false,fixed:true});
8 var c = board.create('circle',[[0,0],1.0]);
9 var a = board.create('glider',[-Math.sqrt(0.5),Math.sqrt(0.5),c],{name:'A'});
10 var l1 = board.create('segment',[a,p]);
11 var ang = board.create('angle',[a,p,neg],{radius:0.67,name:'θ'});
12 var theta = JXG.Math.Geometry.rad(a,p,neg);
13 var bb = board.create('point',[function(){return Math.cos(Math.atan2(a.Y(),-a.X())/3);},function(){return Math.sin(Math.atan2(a.Y(),-a.X())/3);}],{name:'B'});
14 var w = board.create('point',[function(){return Math.cos(Math.atan2(a.Y(),-a.X())/3)/0.5;},0]);
15 var l2 = board.create('line',[a,w]);
16 var l3 = board.create('segment',[p,bb]);
17 var l4 = board.create('segment',[bb,w],{strokeWidth:6,strokeColor:'#FF0000'});
18 var ang2 = board.create('angle',[bb,w,neg],{radius:0.67,name:'θ/3'});
19</script>
20</div>
Quite wonderful, it is.