website

commit 2cfadd99ffa585a7d0fbe441575c91850f1a687a
parent 581332a3223852bd4464fe3295932f0b28410a9e
Author: fen123456 <fenwthompson@gmail.com>
Date:   Fri, 14 Aug 2026 13:11:17 +0100

Add Line to graphing

Diffstat:
A
src/components/graphing/Line.jsx
 | 
22
++++++++++++++++++++++
M
src/pages/Home.jsx
 | 
2
++

2 files changed, 24 insertions(+), 0 deletions(-)
diff --git a/src/components/graphing/Line.jsx b/src/components/graphing/Line.jsx
@@ -0,0 +1,22 @@
+import { getColourClass } from "../../scripts/utils"
+
+export default function Line({ line, viewBox, label=null, colour='auto' }) {
+  // try to find pair of points that meet line at xmin, xmax
+  // same for ymin, ymax.
+  // discard points outside of viewbox.
+  // use two remainers to draw line. 
+  const [ minX, minY, width, height ] = viewBox
+  const maxX = minX + width
+  const maxY = minY + height
+
+  let points = []
+
+  const xPairs = [minX, maxX].map((x) => [x, (line.c - line.a*x)/line.b])
+  const yPairs = [minY, maxY].map((y) => [(line.c - line.b*y)/line.a, y])
+  xPairs.map((point) => { (point[1] >= minY && point[1] <= maxY) && points.push(point) })
+  yPairs.map((point) => { (point[0] > minX && point[0] < maxX) && points.push(point) })
+
+  console.log(points)
+  const [i, f] = points
+  return <line x1={i[0]} y1={i[1]} x2={f[0]} y2={f[1]} class={getColourClass(colour)} />
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -5,6 +5,7 @@ import Cubic from '../components/graphing/Cubic.jsx';
 import Polygon from '../components/graphing/Polygon.jsx';
 import Angle from '../components/graphing/Angle.jsx';
 import Segment from '../components/graphing/Segment.jsx';
+import Line from '../components/graphing/Line.jsx';
 
 export default function Home() {
   const viewBox = [-5, -4, 8, 8];
@@ -19,6 +20,7 @@ export default function Home() {
             <Angle points={[[-4,3], [1,2], [-1,1]]} double={true} colour="2" />
             <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox} />
             <Segment points={[[0,1], [2,2]]} marker="hash" colour="4" />
+            <Line line={{a: -10, b: -9, c: -1}} colour="5" viewBox={viewBox} />
           </Graph>
         </div>
       </Window>