parabola-quadrature.tsx

import React from 'react'
import Point from '../shapes/Point'
import useMovablePoint from '../controls/useMovablePoint'
import GridLines from '../origin/GridLines'
import Origin from '../origin/Origin'
import Function, { useFunction } from '../shapes/Function'
import Polygon from '../shapes/Polygon'

const ParabolaQuadrature: React.FC = () => {
  const parabola = useFunction((x) => -(x ** 2) + 1, [])

  const a = useMovablePoint({ initialX: -0.5, y: (x) => parabola(x) })
  const b = useMovablePoint({ initialX: 0.8, y: (x) => parabola(x) })

  const slope = (b.y - a.y) / (b.x - a.x)
  const tangentX = slope / -2

  return (
    <>
      <GridLines />
      <Origin />
      <Function y={parabola} quality="low" color="#1a8ff3aa" />
      <Function
        y={(x) => slope * (x - b.x) + b.y}
        color="#fff8"
        quality="low"
      />
      <Function
        y={(x) => slope * (x - tangentX) + parabola(tangentX)}
        color="#fff2"
        quality="low"
      />

      <Polygon
        points={[
          [a.x, a.y],
          [b.x, b.y],
          [tangentX, parabola(tangentX)],
        ]}
      />

      <Point x={tangentX} y={parabola(tangentX)} color="white" />
      {a.element}
      {b.element}
    </>
  )
}

export default ParabolaQuadrature