Skip to content

Instantly share code, notes, and snippets.

@stevenpetryk
Created August 16, 2020 03:29
Show Gist options
  • Save stevenpetryk/3607c6c0b5a7a04f1c49628f7168b36f to your computer and use it in GitHub Desktop.
Save stevenpetryk/3607c6c0b5a7a04f1c49628f7168b36f to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment