Carlyle circle

by pedritomelenas

HTML

<!-- Include JSXGraph -->
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<!-- Include MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<p>This is an interactive example of solving quadratic equations using straightedge and compass.</p>

<p>The point \(P\) is fixed at (0,1), while \(Q=(s,p)\) can be moved around the figure. The point \(M\) is the midpoint of the segment \(PQ\). If \(C\) is the circumference with with center \(M\) passing through \(P\) and \(Q\), then the \(x\)-coordinates of the intersections of \(C\) with the \(x\)-axis are the roots of the quadratic equation \(x^2-sx+p=0\).</p>

<p>The parabola \(f(x)=x^2-sx+p\) is drawn in green (dashed).</p>

<p>The circle \(C\) is known as the <a href="https://en.wikipedia.org/wiki/Carlyle_circle">Carlyle circle</a>.</p>


<!-- JSXGraph div -->
<div id="jxgbox" class="jxgbox" style="width:75%;height:auto; min-height: 500px;text-align:center; margin: auto; border: 1px solid black;">
</div>

JavaScript

JXG.Options.text.useMathJax = true;
JXG.Options.point.showInfobox = false;

let a;
let b;

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-10, 10, 10, -10],
    axis: true,
    showNavigation: false, //hides arrows and zoom icons
    keepaspectratio: true,
    showCopyright: false,
    showLogo:true,
    defaultAxes: {
      x: { ticks: { visible: true, majorHeight: 5 } },
      y: { ticks: { visible: true, majorHeight: 5 } }
    },
    pan: { enabled: false },      // Disable pan for 3D view
    zoom: { enabled: false }      // Disable zoom for 3D view
});


var P = board.create('point', [0,1], {fixed:true, highlight:false, name:'P'});
var Q = board.create('point', [6,2], {color:'orange', size: 3, name:'Q'});
var M = board.create('midpoint', [P, Q],{name:'M', size: 2, color:'blue'});

var C = board.create('circle', [M,P]);

var f = board.create('functiongraph', 
  [function(x){ return ( x**2-Q.X()*x+Q.Y() ); }], 
  {strokeColor:'green', strokeWidth:1,dash:1}
);

var x=board.defaultAxes.x;

var S1 = board.create('intersection', [C,x,0], {name:""});
var S2 = board.create('intersection', [C,x,1], {name:""});

var tx = function(){
  if (Q.X()>0) { 
    return "-"+Q.X().toFixed(2)+"x"
  }  else 
      return "+"+-Q.X().toFixed(2)+"x";
}
var tc = function(){
  if (Q.Y()>0) { 
    return "+"+Q.Y().toFixed(2)
  }  else 
      return "-"+-Q.Y().toFixed(2);
}


let t = board.create('text', [-8,9, () => "\\(x^2" + tx() + tc() + "=0\\)"], {fontSize: 11, color: 'black'});


let t1 = board.create('text', [-8,8,()=>"\\(x_1="+S1.X().toFixed(2)+"\\)"], {fontSize: 12, color: 'black', visible: () => S1.isReal ? true : false });
let t2 = board.create('text', [-8,7,()=>"\\(x_2="+S2.X().toFixed(2)+"\\)"], {fontSize: 12, color: 'black', visible: () => S2.isReal ? true : false });