JSXGraph
JSXGraph share

Share

Spirograph - geometric construction
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/spirograph-geometric-construction" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Spirograph - geometric construction" 
    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>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>
<div id="board-2-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-2" 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 BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID2 = 'board-2';
    const BOARDID = BOARDID0;

    var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5,5,5,-5], keepaspectratio: true });
    
    var O = board.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue', showClearTraces: true});
    var A = board.create('point', [2,0], { name: 'A' });
    var k = board.create('circle', [O, A], { name: 'k' });
    var B = board.create('glider', [0.7,1,k], { name: 'B drag me' });
    var g1 = board.create('line', [O, B], { strokeColor: 'lightgray' });
    var C = board.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });
    
    var M = board.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
    var k2 = board.create('circle', [M, B], { name: 'k' });  
    
    var gpar = board.create('parallel', [O, C, M], { name: "g", strokeColor: 'lightgray' });
    var Cprime = board.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });
    
    var g2 = board.create('line', [M, Cprime], { strokeColor: 'lightgray' });
    var Cstern = board.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });
    
    
    var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });
    
    var O = board1.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
    var A = board1.create('point', [2,0], { name: 'A' });
    var k = board1.create('circle', [O, A], { name: 'k' });
    var B = board1.create('glider', [0.7,1,k], { name: 'B drag me' });
    var g1 = board1.create('line', [O, B], { strokeColor: 'lightgray' });
    var C = board1.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });
    
    var g1a = board1.create('line', [O, C], { strokeColor: 'lightgray' });
    var C2 = board1.create('reflection', [B, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });
    
    var M = board1.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
    var k2 = board1.create('circle', [M, B], { name: 'k' });
    
    var gpar = board1.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
    var Cprime = board1.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });
    
    var g2 = board1.create('line', [M, Cprime], { strokeColor: 'lightgray' });
    var Cstern = board1.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });
    
    
    var board2 = JXG.JSXGraph.initBoard(BOARDID2, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });
    
    var O = board2.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
    var A = board2.create('point', [2,0], { name: 'A' });
    var k = board2.create('circle', [O, A], { name: 'k' });
    var B = board2.create('glider', [0.7,1,k], { name: 'B drag me' });
    var g1 = board2.create('line', [O, B], { strokeColor: 'lightgray' });
    var C = board2.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });
    
    var g1a = board2.create('line', [O, C], { strokeColor: 'lightgray' });
    var C2 = board2.create('reflection', [A, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });
    
    var M = board2.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
    var k2 = board2.create('circle', [M, B], { name: 'k' });
    
    var gpar = board2.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
    var Cprime = board2.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });
    
    var g2 = board2.create('line', [M, Cprime], { strokeColor: 'lightgray' });
    var Cstern = board2.create('glider', [3,3,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });
    
 </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 BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!
const BOARDID2 = 'your_div_id_2'; // Insert your 3rd board id here!

var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5,5,5,-5], keepaspectratio: true });

var O = board.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue', showClearTraces: true});
var A = board.create('point', [2,0], { name: 'A' });
var k = board.create('circle', [O, A], { name: 'k' });
var B = board.create('glider', [0.7,1,k], { name: 'B drag me' });
var g1 = board.create('line', [O, B], { strokeColor: 'lightgray' });
var C = board.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });

var M = board.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
var k2 = board.create('circle', [M, B], { name: 'k' });  

var gpar = board.create('parallel', [O, C, M], { name: "g", strokeColor: 'lightgray' });
var Cprime = board.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });

var g2 = board.create('line', [M, Cprime], { strokeColor: 'lightgray' });
var Cstern = board.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });


var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });

var O = board1.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
var A = board1.create('point', [2,0], { name: 'A' });
var k = board1.create('circle', [O, A], { name: 'k' });
var B = board1.create('glider', [0.7,1,k], { name: 'B drag me' });
var g1 = board1.create('line', [O, B], { strokeColor: 'lightgray' });
var C = board1.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });

var g1a = board1.create('line', [O, C], { strokeColor: 'lightgray' });
var C2 = board1.create('reflection', [B, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });

var M = board1.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
var k2 = board1.create('circle', [M, B], { name: 'k' });

var gpar = board1.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
var Cprime = board1.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });

var g2 = board1.create('line', [M, Cprime], { strokeColor: 'lightgray' });
var Cstern = board1.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });


var board2 = JXG.JSXGraph.initBoard(BOARDID2, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });

var O = board2.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
var A = board2.create('point', [2,0], { name: 'A' });
var k = board2.create('circle', [O, A], { name: 'k' });
var B = board2.create('glider', [0.7,1,k], { name: 'B drag me' });
var g1 = board2.create('line', [O, B], { strokeColor: 'lightgray' });
var C = board2.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });

var g1a = board2.create('line', [O, C], { strokeColor: 'lightgray' });
var C2 = board2.create('reflection', [A, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });

var M = board2.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
var k2 = board2.create('circle', [M, B], { name: 'k' });

var gpar = board2.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
var Cprime = board2.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });

var g2 = board2.create('line', [M, Cprime], { strokeColor: 'lightgray' });
var Cstern = board2.create('glider', [3,3,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });

<jsxgraph width="100%, 100%, 100%" aspect-ratio="1 / 1, 1 / 1, 1 / 1" numberOfBoards="3" title="Spirograph - geometric construction" 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(BOARDID0, { boundingbox: [-5,5,5,-5], keepaspectratio: true });
   
   var O = board.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue', showClearTraces: true});
   var A = board.create('point', [2,0], { name: 'A' });
   var k = board.create('circle', [O, A], { name: 'k' });
   var B = board.create('glider', [0.7,1,k], { name: 'B drag me' });
   var g1 = board.create('line', [O, B], { strokeColor: 'lightgray' });
   var C = board.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });
   
   var M = board.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
   var k2 = board.create('circle', [M, B], { name: 'k' });  
   
   var gpar = board.create('parallel', [O, C, M], { name: "g", strokeColor: 'lightgray' });
   var Cprime = board.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });
   
   var g2 = board.create('line', [M, Cprime], { strokeColor: 'lightgray' });
   var Cstern = board.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });
   
   
   var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });
   
   var O = board1.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
   var A = board1.create('point', [2,0], { name: 'A' });
   var k = board1.create('circle', [O, A], { name: 'k' });
   var B = board1.create('glider', [0.7,1,k], { name: 'B drag me' });
   var g1 = board1.create('line', [O, B], { strokeColor: 'lightgray' });
   var C = board1.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });
   
   var g1a = board1.create('line', [O, C], { strokeColor: 'lightgray' });
   var C2 = board1.create('reflection', [B, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });
   
   var M = board1.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
   var k2 = board1.create('circle', [M, B], { name: 'k' });
   
   var gpar = board1.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
   var Cprime = board1.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });
   
   var g2 = board1.create('line', [M, Cprime], { strokeColor: 'lightgray' });
   var Cstern = board1.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });
   
   
   var board2 = JXG.JSXGraph.initBoard(BOARDID2, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });
   
   var O = board2.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
   var A = board2.create('point', [2,0], { name: 'A' });
   var k = board2.create('circle', [O, A], { name: 'k' });
   var B = board2.create('glider', [0.7,1,k], { name: 'B drag me' });
   var g1 = board2.create('line', [O, B], { strokeColor: 'lightgray' });
   var C = board2.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });
   
   var g1a = board2.create('line', [O, C], { strokeColor: 'lightgray' });
   var C2 = board2.create('reflection', [A, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });
   
   var M = board2.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
   var k2 = board2.create('circle', [M, B], { name: 'k' });
   
   var gpar = board2.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
   var Cprime = board2.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });
   
   var g2 = board2.create('line', [M, Cprime], { strokeColor: 'lightgray' });
   var Cstern = board2.create('glider', [3,3,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });
   
</jsxgraph>

Spirograph - geometric construction

Curves
Geometry
These three interactive boards illustrate the concept of relative motion along geometric constructions. In each board, point $B$ moves along a circle, generating points $C$, $C_2$, and $C^*$ through reflections and intersections. - Example 1 __Double speed:__ Point $C$ moves at twice the speed of $B$. - Example 2 __Threefold speed:__ Point $C_2$ moves at three times the speed of $B$. - Example 3 __Fourfold speed:__ Point $C_2$ moves at four times the speed of $B$. The gliders $C^*$ in all boards trace the resulting paths, showing how the motion of $B$ is amplified through geometric transformations. 
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5,5,5,-5], keepaspectratio: true });

var O = board.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue', showClearTraces: true});
var A = board.create('point', [2,0], { name: 'A' });
var k = board.create('circle', [O, A], { name: 'k' });
var B = board.create('glider', [0.7,1,k], { name: 'B drag me' });
var g1 = board.create('line', [O, B], { strokeColor: 'lightgray' });
var C = board.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });

var M = board.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
var k2 = board.create('circle', [M, B], { name: 'k' });  

var gpar = board.create('parallel', [O, C, M], { name: "g", strokeColor: 'lightgray' });
var Cprime = board.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });

var g2 = board.create('line', [M, Cprime], { strokeColor: 'lightgray' });
var Cstern = board.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });


var board1 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });

var O = board1.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
var A = board1.create('point', [2,0], { name: 'A' });
var k = board1.create('circle', [O, A], { name: 'k' });
var B = board1.create('glider', [0.7,1,k], { name: 'B drag me' });
var g1 = board1.create('line', [O, B], { strokeColor: 'lightgray' });
var C = board1.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });

var g1a = board1.create('line', [O, C], { strokeColor: 'lightgray' });
var C2 = board1.create('reflection', [B, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });

var M = board1.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
var k2 = board1.create('circle', [M, B], { name: 'k' });

var gpar = board1.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
var Cprime = board1.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });

var g2 = board1.create('line', [M, Cprime], { strokeColor: 'lightgray' });
var Cstern = board1.create('glider', [1,1,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });


var board2 = JXG.JSXGraph.initBoard(BOARDID2, { boundingbox: [-5,5,5,-5], keepaspectratio: true, showClearTraces: true });

var O = board2.create('point', [0,0], { name: 'O', fixed: true, fillColor: 'blue', strokeColor: 'blue' });
var A = board2.create('point', [2,0], { name: 'A' });
var k = board2.create('circle', [O, A], { name: 'k' });
var B = board2.create('glider', [0.7,1,k], { name: 'B drag me' });
var g1 = board2.create('line', [O, B], { strokeColor: 'lightgray' });
var C = board2.create('reflection', [A, g1], { name: 'C', fillColor: 'blue', strokeColor: 'blue' });

var g1a = board2.create('line', [O, C], { strokeColor: 'lightgray' });
var C2 = board2.create('reflection', [A, g1a], { name: 'C_2', fillColor: 'blue', strokeColor: 'blue' });

var M = board2.create('glider', [2,2,g1], { name: 'M', fillColor: 'red', strokeColor: 'red' });
var k2 = board2.create('circle', [M, B], { name: 'k' });

var gpar = board2.create('parallel', [O, C2, M], { name: "g", strokeColor: 'lightgray' });
var Cprime = board2.create('intersection', [gpar, k2, 0], { name: "C'", fillColor: 'blue', strokeColor: 'blue' });

var g2 = board2.create('line', [M, Cprime], { strokeColor: 'lightgray' });
var Cstern = board2.create('glider', [3,3,g2], { name: "C*", trace: true, fillColor: 'green', strokeColor: 'green' });

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.