Share JSXGraph: example "Euler's spiral (Clothoid)"

JSXGraph
Share JSXGraph: example "Euler's spiral (Clothoid)"
This website is a beta version. The official release will be in **2023**.

Euler's spiral (Clothoid)

Euler's spiral is defined as a curve whose curvature changes linearly with its curve length. Other names for the spiral are __clothoid__ and __spiral of Cornu__ or __Cornu spiral__. Euler spirals are widely used as transition curve in rail track / highway engineering for connecting and transiting the geometry between a tangent and a circular curve. The curve can be described in parametric form by $$ \begin{aligned} x(t) &= k\cdot\int_0^t \sin(\frac{u^2}{2}) du \\ y(t) &= k\cdot\int_0^t \cos(\frac{u^2}{2}) du \end{aligned} $$
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-10, 10, 10, -10],
    axis: true
});

var k = board.create('slider', [[1, 8], [5, 8], [0, 2, 8]], {name: 'k'});
var len = board.create('slider', [[1, 7], [5, 7], [1, 2, 3.2]], {name: 'len'});

var c = board.create('curve', [
        (t) => k.Value() * JXG.Math.Numerics.I([0, t], (u) => Math.sin(u * u * 0.5)), // Curve x(t)
        (t) => k.Value() * JXG.Math.Numerics.I([0, t], (u) => Math.cos(u * u * 0.5)), // Curve y(t)
        () => -len.Value() * Math.PI, // Start
        () => len.Value() * Math.PI], // End
    {strokewidth: 1});

var p = board.create('glider', [1, 3, c], {name: ''});
var t = board.create('tangent', [p], {dash: 3, strokeWidth: 1, strokeColor: 'red'});