JSXGraph
JSXGraph share

Share

Circumcircles of subtriangles
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/circumcircles-of-subtriangles" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Circumcircles of subtriangles" 
    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 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    JXG.Options.label.fontSize = 24;
    
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-1, 4, 12, -4],
        keepaspectratio: true
    });
    
    var p1, p2, p3,
        b1, b2, b3,
        c1, c2, c3, c4, c5,
        ll1, ll2, ll3,
        i1, i2, i3, i4,
        pp1, pp2, pp3;
    
    p1 = board.create('point', [0.5, -1.5], {
        name: 'A',
        size: 5
    });
    p2 = board.create('point', [7.5, -2.5], {
        name: 'B',
        size: 5
    });
    p3 = board.create('point', [7, 3], {
        name: 'C',
        size: 5
    });
    
    // Triangle ABC
    b1 = board.create('segment', ['A', 'B']);
    b2 = board.create('segment', ['A', 'C']);
    b3 = board.create('segment', ['C', 'B']);
    
    c1 = board.create('circumcircle', ['A', 'B', 'C'], {
        strokeColor: '#afafaf'
    });
    
    c2 = board.create('incircle', ['A', 'B', 'C'], {
        strokeColor: '#3CB371'
    });
    
    pp1 = board.create('intersection', [c2, b1], {
        name: "C'",
        color: 'blue'
    });
    
    pp2 = board.create('intersection', [c2, b2], {
        name: "B'",
        color: 'blue'
    });
    
    pp3 = board.create('intersection', [c2, b3], {
        name: "A'",
        color: 'blue'
    });
    
    c3 = board.create('circumcircle', [p3, pp2, pp3], {
        strokeColor: '#FF8C00'
    });
    c4 = board.create('circumcircle', [p2, pp1, pp3], {
        strokeColor: '#FF8C00'
    });
    c5 = board.create('circumcircle', [p1, pp2, pp1], {
        strokeColor: '#FF8C00'
    });
    
    i1 = board.create('otherintersection', [c3, c1, p3], {
        name: "C''",
        color: 'black'
    });
    i2 = board.create('otherintersection', [c4, c1, p2], {
        name: "B''",
        color: 'black'
    });
    i3 = board.create('otherintersection', [c5, c1, p1], {
        name: "A''",
        color: 'black'
    });
    
    ll1 = board.create('segment', [i1, pp1], {
        strokeColor: '#111111'
    });
    ll2 = board.create('segment', [i2, pp2], {
        strokeColor: '#111111'
    });
    ll3 = board.create('segment', [i3, pp3], {
        strokeColor: '#111111'
    });
    
    i4 = board.create('intersection', [ll1, ll2, 0], {
        name: "P",
        color: '#9932CC'
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/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!

JXG.Options.label.fontSize = 24;

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-1, 4, 12, -4],
    keepaspectratio: true
});

var p1, p2, p3,
    b1, b2, b3,
    c1, c2, c3, c4, c5,
    ll1, ll2, ll3,
    i1, i2, i3, i4,
    pp1, pp2, pp3;

p1 = board.create('point', [0.5, -1.5], {
    name: 'A',
    size: 5
});
p2 = board.create('point', [7.5, -2.5], {
    name: 'B',
    size: 5
});
p3 = board.create('point', [7, 3], {
    name: 'C',
    size: 5
});

// Triangle ABC
b1 = board.create('segment', ['A', 'B']);
b2 = board.create('segment', ['A', 'C']);
b3 = board.create('segment', ['C', 'B']);

c1 = board.create('circumcircle', ['A', 'B', 'C'], {
    strokeColor: '#afafaf'
});

c2 = board.create('incircle', ['A', 'B', 'C'], {
    strokeColor: '#3CB371'
});

pp1 = board.create('intersection', [c2, b1], {
    name: "C'",
    color: 'blue'
});

pp2 = board.create('intersection', [c2, b2], {
    name: "B'",
    color: 'blue'
});

pp3 = board.create('intersection', [c2, b3], {
    name: "A'",
    color: 'blue'
});

c3 = board.create('circumcircle', [p3, pp2, pp3], {
    strokeColor: '#FF8C00'
});
c4 = board.create('circumcircle', [p2, pp1, pp3], {
    strokeColor: '#FF8C00'
});
c5 = board.create('circumcircle', [p1, pp2, pp1], {
    strokeColor: '#FF8C00'
});

i1 = board.create('otherintersection', [c3, c1, p3], {
    name: "C''",
    color: 'black'
});
i2 = board.create('otherintersection', [c4, c1, p2], {
    name: "B''",
    color: 'black'
});
i3 = board.create('otherintersection', [c5, c1, p1], {
    name: "A''",
    color: 'black'
});

ll1 = board.create('segment', [i1, pp1], {
    strokeColor: '#111111'
});
ll2 = board.create('segment', [i2, pp2], {
    strokeColor: '#111111'
});
ll3 = board.create('segment', [i3, pp3], {
    strokeColor: '#111111'
});

i4 = board.create('intersection', [ll1, ll2, 0], {
    name: "P",
    color: '#9932CC'
});
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Circumcircles of subtriangles" 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 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   JXG.Options.label.fontSize = 24;
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-1, 4, 12, -4],
       keepaspectratio: true
   });
   
   var p1, p2, p3,
       b1, b2, b3,
       c1, c2, c3, c4, c5,
       ll1, ll2, ll3,
       i1, i2, i3, i4,
       pp1, pp2, pp3;
   
   p1 = board.create('point', [0.5, -1.5], {
       name: 'A',
       size: 5
   });
   p2 = board.create('point', [7.5, -2.5], {
       name: 'B',
       size: 5
   });
   p3 = board.create('point', [7, 3], {
       name: 'C',
       size: 5
   });
   
   // Triangle ABC
   b1 = board.create('segment', ['A', 'B']);
   b2 = board.create('segment', ['A', 'C']);
   b3 = board.create('segment', ['C', 'B']);
   
   c1 = board.create('circumcircle', ['A', 'B', 'C'], {
       strokeColor: '#afafaf'
   });
   
   c2 = board.create('incircle', ['A', 'B', 'C'], {
       strokeColor: '#3CB371'
   });
   
   pp1 = board.create('intersection', [c2, b1], {
       name: "C'",
       color: 'blue'
   });
   
   pp2 = board.create('intersection', [c2, b2], {
       name: "B'",
       color: 'blue'
   });
   
   pp3 = board.create('intersection', [c2, b3], {
       name: "A'",
       color: 'blue'
   });
   
   c3 = board.create('circumcircle', [p3, pp2, pp3], {
       strokeColor: '#FF8C00'
   });
   c4 = board.create('circumcircle', [p2, pp1, pp3], {
       strokeColor: '#FF8C00'
   });
   c5 = board.create('circumcircle', [p1, pp2, pp1], {
       strokeColor: '#FF8C00'
   });
   
   i1 = board.create('otherintersection', [c3, c1, p3], {
       name: "C''",
       color: 'black'
   });
   i2 = board.create('otherintersection', [c4, c1, p2], {
       name: "B''",
       color: 'black'
   });
   i3 = board.create('otherintersection', [c5, c1, p1], {
       name: "A''",
       color: 'black'
   });
   
   ll1 = board.create('segment', [i1, pp1], {
       strokeColor: '#111111'
   });
   ll2 = board.create('segment', [i2, pp2], {
       strokeColor: '#111111'
   });
   ll3 = board.create('segment', [i3, pp3], {
       strokeColor: '#111111'
   });
   
   i4 = board.create('intersection', [ll1, ll2, 0], {
       name: "P",
       color: '#9932CC'
   });
</jsxgraph>
**Theorem:** Let $ABC$ be a triangle and let the incircle intersect $BC$, $CA$, and $AB$ at $A'$, $B'$, and $C'$ (blue points). Let the circumcircles of the triangles $AB'C'$,$A'BC'$, and $A'B'C$ intersect the circumcircle (apart from $A$, $B$, and $C$) in $A''$, $B''$, and $C''$, respectively (black points). Then the black lines $A'A''$, $B'B''$, and $C'C''$ are concurrent, i.e. meet in one point $P$.
// Define the id of your board in BOARDID

JXG.Options.label.fontSize = 24;

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-1, 4, 12, -4],
    keepaspectratio: true
});

var p1, p2, p3,
    b1, b2, b3,
    c1, c2, c3, c4, c5,
    ll1, ll2, ll3,
    i1, i2, i3, i4,
    pp1, pp2, pp3;

p1 = board.create('point', [0.5, -1.5], {
    name: 'A',
    size: 5
});
p2 = board.create('point', [7.5, -2.5], {
    name: 'B',
    size: 5
});
p3 = board.create('point', [7, 3], {
    name: 'C',
    size: 5
});

// Triangle ABC
b1 = board.create('segment', ['A', 'B']);
b2 = board.create('segment', ['A', 'C']);
b3 = board.create('segment', ['C', 'B']);

c1 = board.create('circumcircle', ['A', 'B', 'C'], {
    strokeColor: '#afafaf'
});

c2 = board.create('incircle', ['A', 'B', 'C'], {
    strokeColor: '#3CB371'
});

pp1 = board.create('intersection', [c2, b1], {
    name: "C'",
    color: 'blue'
});

pp2 = board.create('intersection', [c2, b2], {
    name: "B'",
    color: 'blue'
});

pp3 = board.create('intersection', [c2, b3], {
    name: "A'",
    color: 'blue'
});

c3 = board.create('circumcircle', [p3, pp2, pp3], {
    strokeColor: '#FF8C00'
});
c4 = board.create('circumcircle', [p2, pp1, pp3], {
    strokeColor: '#FF8C00'
});
c5 = board.create('circumcircle', [p1, pp2, pp1], {
    strokeColor: '#FF8C00'
});

i1 = board.create('otherintersection', [c3, c1, p3], {
    name: "C''",
    color: 'black'
});
i2 = board.create('otherintersection', [c4, c1, p2], {
    name: "B''",
    color: 'black'
});
i3 = board.create('otherintersection', [c5, c1, p1], {
    name: "A''",
    color: 'black'
});

ll1 = board.create('segment', [i1, pp1], {
    strokeColor: '#111111'
});
ll2 = board.create('segment', [i2, pp2], {
    strokeColor: '#111111'
});
ll3 = board.create('segment', [i3, pp3], {
    strokeColor: '#111111'
});

i4 = board.create('intersection', [ll1, ll2, 0], {
    name: "P",
    color: '#9932CC'
});

license

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