JSXGraph
JSXGraph share

Share

Multiple turtles - pursuit curve
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/multiple-turtles" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Multiple turtles - pursuit curve" 
    allowfullscreen
></iframe>
This code has to 
<button onClick="run();">Run</button>
<button onClick="clearturtle();">Clear</button>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300], keepaspectratio: true });
    var t1 = board.create('turtle', [], { strokeColor: JXG.palette.blue, strokeWidth: 3 });
    var t2 = board.create('turtle', [], { strokeColor: JXG.palette.red, strokeWidth: 3 });
    
    var n = 64;
    var delta = 360.0 / n;
    var chase = function() {
        t1.fd(20);
        t1.lt(delta);
        t2.lookTo(t1.pos);
        t2.fd(20);
        action = setTimeout(chase, 100);
    }
    
    function run() {
        t1.setPos(200, 0);
        t2.setPos(0, 0);
        chase();
    }
    
    function clearturtle() {
        clearTimeout(action);
        t1.cs();
        t2.cs();
    }
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300], keepaspectratio: true });
var t1 = board.create('turtle', [], { strokeColor: JXG.palette.blue, strokeWidth: 3 });
var t2 = board.create('turtle', [], { strokeColor: JXG.palette.red, strokeWidth: 3 });

var n = 64;
var delta = 360.0 / n;
var chase = function() {
    t1.fd(20);
    t1.lt(delta);
    t2.lookTo(t1.pos);
    t2.fd(20);
    action = setTimeout(chase, 100);
}

function run() {
    t1.setPos(200, 0);
    t2.setPos(0, 0);
    chase();
}

function clearturtle() {
    clearTimeout(action);
    t1.cs();
    t2.cs();
}
Visualize a *pursuit curve*, also called *dog curve*, with two JSXGraph turtles. The first turtle (blue, pursuee) runs on a circular path, the second turtle (red, pursuer) starts at the center of the circle and runs towards the blue turtle, in every step adapting its direction towards the actual position of the blue turtle. The red curve is called *pursuit curve*.
<button onClick="run();">Run</button>
<button onClick="clearturtle();">Clear</button>
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300], keepaspectratio: true });
var t1 = board.create('turtle', [], { strokeColor: JXG.palette.blue, strokeWidth: 3 });
var t2 = board.create('turtle', [], { strokeColor: JXG.palette.red, strokeWidth: 3 });

var n = 64;
var delta = 360.0 / n;
var chase = function() {
    t1.fd(20);
    t1.lt(delta);
    t2.lookTo(t1.pos);
    t2.fd(20);
    action = setTimeout(chase, 100);
}

function run() {
    t1.setPos(200, 0);
    t2.setPos(0, 0);
    chase();
}

function clearturtle() {
    clearTimeout(action);
    t1.cs();
    t2.cs();
}

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.