website

commit f67bb0ea3f2b82993bcea76a22d284160c6ab0cd
parent f626d5539bec1ecd10140c7f6d9f80ec14fb0393
Author: hrryt <harry@mayesfield.uk>
Date:   Sat, 15 Aug 2026 14:43:42 +0100

Add sinusoid plotting component

Diffstat:
A
src/components/plotting/Sinusoid.jsx
 | 
25
+++++++++++++++++++++++++
M
src/pages/Home.jsx
 | 
4
+++-
M
src/scripts/utils.js
 | 
5
++---

3 files changed, 30 insertions(+), 4 deletions(-)
diff --git a/src/components/plotting/Sinusoid.jsx b/src/components/plotting/Sinusoid.jsx
@@ -0,0 +1,25 @@
+import Point from './Point.jsx';
+import { getColourClass, trueMod } from '../../scripts/utils.js';
+
+export default function Sinusoid({ period=1, amp=1, dx=0, dy=0, colour="auto", viewBox }) {
+  const [minX, minY, width, height] = viewBox;
+
+  const offset = trueMod(minX - dx, period);
+  const x0 = minX - offset;
+  const periods = Math.ceil((width + offset) / period);
+
+  const magicNumber = 0.3642124232;
+  const halfPeriod = period /  2;
+
+  const dx1 = halfPeriod * magicNumber;
+  const dx2 = halfPeriod * (1 - magicNumber);
+
+  const h = 2*amp;
+
+  const wave = `
+    c ${dx1},0 ${dx2},${-h} ${halfPeriod},${-h}
+    c ${dx1},0 ${dx2},${+h} ${halfPeriod},${+h}
+  `;
+
+  return <path d={`M ${x0},${amp+dy}${wave.repeat(periods)}`} class={getColourClass(colour)} />;
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -8,6 +8,7 @@ import Segment from '../components/plotting/Segment.jsx';
 import Line from '../components/plotting/Line.jsx';
 import Point from '../components/plotting/Point.jsx';
 import Label from '../components/plotting/Label.jsx';
+import Sinusoid from '../components/plotting/Sinusoid.jsx';
 
 export default function Home() {
   const viewBox = [-5, -4, 8, 8];
@@ -21,8 +22,9 @@ export default function Home() {
             <Quadratic a={2} b={1} c={-3} colour="1" viewBox={viewBox} />
             <Polygon points={[[1,2], [-1,1], [-4,3]]} label="P" colour="2" />
             <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox} />
+            <Point point={[1,0]} label="Q" colour="3" />
             <Line line={{a: -10, b: -9, c: -1}} colour="4" viewBox={viewBox} />
-            <Point point={[0,1]} label="Q" colour="5" />
+            <Sinusoid period={5} amp={0.5} dx={-11} dy={-2} colour="5" viewBox={viewBox} />
           </Plot>
           <Plot mode="blank" viewBox={[0, 0, 5, 5]}>
             <Label point={A} position="top">A</Label>
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
@@ -109,5 +109,5 @@ export function getMidpoint(points) {
 
 export function trueMod(a, b) {
   // a mod b, but with expected behaviour for negatives.
-  return a >= 0 ? a % b : b - (-a % b) 
-}
-\ No newline at end of file
+  return a >= 0 ? a % b : b - ((-a % b) || b);
+}