Sinusoid.jsx (904B)
1 import { useContext } from 'preact/hooks'; 2 import { PlotContext } from '../../scripts/contexts.js'; 3 import { getColourClass } from '../../scripts/graphUtils.js'; 4 import { trueMod } from '../../scripts/mathsUtils.js'; 5 import Point from './Point.jsx'; 6 7 export default function Sinusoid({ period=1, amp=1, dx=0, dy=0, colour="auto" }) { 8 const p = useContext(PlotContext); 9 10 const offset = trueMod(p.minX - dx, period); 11 const x0 = p.minX - offset; 12 const periods = Math.ceil((p.width + offset) / period); 13 14 const magicNumber = 0.3642124232; 15 const halfPeriod = period / 2; 16 17 const dx1 = halfPeriod * magicNumber; 18 const dx2 = halfPeriod * (1 - magicNumber); 19 20 const h = 2*amp; 21 22 const wave = ` 23 c ${dx1},0 ${dx2},${-h} ${halfPeriod},${-h} 24 c ${dx1},0 ${dx2},${+h} ${halfPeriod},${+h} 25 `; 26 27 return <path d={`M ${x0},${amp+dy}${wave.repeat(periods)}`} class={getColourClass(colour)} />; 28 }