website

source code for the ttmaths.uk website
Log | Files | Refs | README

Quadratic.jsx (707B)

      1 import { useContext } from 'preact/hooks';
      2 import { PlotContext } from '../../scripts/contexts.js';
      3 import { getColourClass, getSymmetricBounds } from "../../scripts/graphUtils";
      4 
      5 export default function Quadratic({ a=1, b=0, c=0, colour="auto" }) {
      6   const p = useContext(PlotContext);
      7   function F(x) { return a*x*x + b*x + c; }
      8 
      9   const midX = -b / (2*a);
     10 
     11   const midY = F(midX);
     12   const curveHeight = a < 0 ? midY - p.minY : p.maxY - midY;
     13   const dx = Math.sqrt(curveHeight / Math.abs(a));
     14 
     15   const [i, f] = getSymmetricBounds(midX, dx, p);
     16 
     17   const y0 = F(i);
     18   const y1 = 2*midY - y0;
     19 
     20   const d = `M ${i},${y0} Q ${midX},${y1} ${f},${y0}`;
     21   return <path d={d} class={getColourClass(colour)} />;
     22 }