JSXGraph
JSXGraph share

Share

Trace curve
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/trace-curve-1" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Trace curve" 
    allowfullscreen
></iframe>
This code has to 
<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, {
        axis: false,
        boundingbox: [-2, 2, 2, -2],
        keepaspectratio: true,
        showClearTraces: true
    });
    
    var A = board.create('point', [-1.5, -1.5]);
    var B = board.create('point', [1.5, -1.5]);
    var C0 = board.create('point', [1.5, 1.0], { visible: false });
    
    var g = board.create('line', [A, B], { visible: false });
    var h = board.create('parallel', [g, C0], { visible: true, strokeWidth: 1 });
    var C = board.create('glider', [-1.5, 1.0, h], { name: 'C', size: 6 });
    var p = board.create('polygon', [A, B, C]);
    
    var s1 = board.create('perpendicular', [p.borders[0], C], { dash: 3, strokeWidth: 1 });
    var s2 = board.create('perpendicular', [p.borders[1], A], { dash: 3, strokeWidth: 1 });
    var s3 = board.create('perpendicular', [p.borders[2], B], { dash: 3, strokeWidth: 1 });
    
    var S = board.create('intersection', [s1, s2, 0], { name: 'S', trace: true });
    var curve = board.create('tracecurve', [C, S], { strokeColor: 'blue' });
 </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, {
    axis: false,
    boundingbox: [-2, 2, 2, -2],
    keepaspectratio: true,
    showClearTraces: true
});

var A = board.create('point', [-1.5, -1.5]);
var B = board.create('point', [1.5, -1.5]);
var C0 = board.create('point', [1.5, 1.0], { visible: false });

var g = board.create('line', [A, B], { visible: false });
var h = board.create('parallel', [g, C0], { visible: true, strokeWidth: 1 });
var C = board.create('glider', [-1.5, 1.0, h], { name: 'C', size: 6 });
var p = board.create('polygon', [A, B, C]);

var s1 = board.create('perpendicular', [p.borders[0], C], { dash: 3, strokeWidth: 1 });
var s2 = board.create('perpendicular', [p.borders[1], A], { dash: 3, strokeWidth: 1 });
var s3 = board.create('perpendicular', [p.borders[2], B], { dash: 3, strokeWidth: 1 });

var S = board.create('intersection', [s1, s2, 0], { name: 'S', trace: true });
var curve = board.create('tracecurve', [C, S], { strokeColor: 'blue' });
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Trace curve" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   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.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       axis: false,
       boundingbox: [-2, 2, 2, -2],
       keepaspectratio: true,
       showClearTraces: true
   });
   
   var A = board.create('point', [-1.5, -1.5]);
   var B = board.create('point', [1.5, -1.5]);
   var C0 = board.create('point', [1.5, 1.0], { visible: false });
   
   var g = board.create('line', [A, B], { visible: false });
   var h = board.create('parallel', [g, C0], { visible: true, strokeWidth: 1 });
   var C = board.create('glider', [-1.5, 1.0, h], { name: 'C', size: 6 });
   var p = board.create('polygon', [A, B, C]);
   
   var s1 = board.create('perpendicular', [p.borders[0], C], { dash: 3, strokeWidth: 1 });
   var s2 = board.create('perpendicular', [p.borders[1], A], { dash: 3, strokeWidth: 1 });
   var s3 = board.create('perpendicular', [p.borders[2], B], { dash: 3, strokeWidth: 1 });
   
   var S = board.create('intersection', [s1, s2, 0], { name: 'S', trace: true });
   var curve = board.create('tracecurve', [C, S], { strokeColor: 'blue' });
</jsxgraph>
This code constructs a triangle with a movable vertex $C$ on a parallel to the line $AB$ and dynamically draws its altitudes (i.e. the lines from a vertex that are perpendicular to the opposite side). Their intersection, the *orthocenter* $S$, is tracked while dragging $C$. A blue trace curve visualizes the orthocenter’s path as the position of the point $C$ changes. In general, the element `tracecurve` is a curve displaying the path of a point element that depends on a *glider* element. 
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: false,
    boundingbox: [-2, 2, 2, -2],
    keepaspectratio: true,
    showClearTraces: true
});

var A = board.create('point', [-1.5, -1.5]);
var B = board.create('point', [1.5, -1.5]);
var C0 = board.create('point', [1.5, 1.0], { visible: false });

var g = board.create('line', [A, B], { visible: false });
var h = board.create('parallel', [g, C0], { visible: true, strokeWidth: 1 });
var C = board.create('glider', [-1.5, 1.0, h], { name: 'C', size: 6 });
var p = board.create('polygon', [A, B, C]);

var s1 = board.create('perpendicular', [p.borders[0], C], { dash: 3, strokeWidth: 1 });
var s2 = board.create('perpendicular', [p.borders[1], A], { dash: 3, strokeWidth: 1 });
var s3 = board.create('perpendicular', [p.borders[2], B], { dash: 3, strokeWidth: 1 });

var S = board.create('intersection', [s1, s2, 0], { name: 'S', trace: true });
var curve = board.create('tracecurve', [C, S], { strokeColor: 'blue' });

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.