commit a57d89f4f0b8089a105073f39ae5fdd73334b478
parent f56d0c021db14cbb4d0f8220ada08eef3be1d30b
Author: hrryt <harry@mayesfield.uk>
Date: Mon, 10 Aug 2026 23:14:45 +0100
Add colour props, allow dynamic axis ticks
Diffstat:
5 files changed, 23 insertions(+), 28 deletions(-)
diff --git a/src/components/graphing/Cubic.jsx b/src/components/graphing/Cubic.jsx
@@ -1,6 +1,6 @@
import { getSymmetricBounds } from '/src/scripts/utils.js';
-export default function Cubic({ a=1, b=0, c=0, d=0, viewBox }) {
+export default function Cubic({ a=1, b=0, c=0, d=0, colour="1", viewBox }) {
// https://math.stackexchange.com/questions/3356084/to-construct-a-polynomial-using-b%C3%A9zier-curves
// http://graphics.stanford.edu/courses/cs164-09-spring/Handouts/handout19.pdf
function g(u, v, w) { return a*u*v*w + b*(v*w + w*u + u*v)/3 + c*(u + v + w)/3 + d; }
@@ -10,5 +10,6 @@ export default function Cubic({ a=1, b=0, c=0, d=0, viewBox }) {
const x1 = 2/3 * i + 1/3 * f;
const x2 = 1/3 * i + 2/3 * f;
- return <path d={`M ${i},${g(i,i,i)} C ${x1},${g(i,i,f)} ${x2},${g(i,f,f)} ${f},${g(f,f,f)}`} />
+ d = `M ${i},${g(i,i,i)} C ${x1},${g(i,i,f)} ${x2},${g(i,f,f)} ${f},${g(f,f,f)}`;
+ return <path d={d} class={`color-${colour}`} />
}
diff --git a/src/components/graphing/Graph.jsx b/src/components/graphing/Graph.jsx
@@ -10,27 +10,27 @@ function Axes({ viewBox }) {
const [ minX, minY, width, height ] = viewBox;
return (
<g>
- <path id="axes" d={`M ${minX},0 h ${width-.1}`} marker-end="url(#arrow)"/>
- <path id="axes" d={`M 0,${minY} v ${height-.1}`} marker-end="url(#arrow)"/>
+ <path class="axis" d={`M ${minX},0 h ${width-.1}`} marker-end="url(#arrow)"/>
+ <path class="axis" d={`M 0,${minY} v ${height-.1}`} marker-end="url(#arrow)"/>
</g>
);
}
-function AxisTicks({ viewBox }) {
+function AxisTicks({ every = 1, viewBox }) {
const [ minX, minY, width, height ] = viewBox;
return (
<g>
<g>
{Array.from({ length: width - 1 }).map((_, i) => {
const x = i + minX + 1;
- if (x == 0) { return; }
+ if (x == 0 || x % every) { return; }
return <Label x={x} y="0" position="bottom" d={.1}>{x}</Label>;
})}
</g>
<g>
{Array.from({ length: height - 1 }).map((_, i) => {
const y = i + minY + 1;
- if (y == 0) { return; }
+ if (y == 0 || y % every) { return; }
return <Label x="0" y={y} position="left" d={.1}>{y}</Label>;
})}
</g>
@@ -54,7 +54,7 @@ export default function Graph({ children, viewBox, width="500", height="500" })
markerUnits="strokeWidth"
orient="auto"
>
- <path d="M 0,0 L 4,2 L 0,4 z" id='arrowhead' />
+ <polygon points="0,0 4,2 0,4" id='arrowhead' />
</marker>
</defs>
<Grid viewBox={viewBox} />
diff --git a/src/components/graphing/Quadratic.jsx b/src/components/graphing/Quadratic.jsx
@@ -1,6 +1,6 @@
import { getSymmetricBounds } from '/src/scripts/utils.js';
-export default function Quadratic({ a=1, b=0, c=0, viewBox }) {
+export default function Quadratic({ a=1, b=0, c=0, colour="1", viewBox }) {
function f(x) { return a*x*x + b*x + c; }
const turnX = -b / (2*a);
@@ -9,5 +9,6 @@ export default function Quadratic({ a=1, b=0, c=0, viewBox }) {
const endY = f(endX);
const controlY = 2*f(turnX) - endY;
- return <path d={`M ${startX},${endY} Q ${turnX},${controlY} ${endX},${endY}`} />;
+ const d = `M ${startX},${endY} Q ${turnX},${controlY} ${endX},${endY}`;
+ return <path d={d} class={`color-${colour}`} />;
}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -2,6 +2,7 @@ import Window from '../components/Window.jsx';
import Graph from '../components/graphing/Graph.jsx';
import Quadratic from '../components/graphing/Quadratic.jsx';
import Cubic from '../components/graphing/Cubic.jsx';
+import Polygon from '../components/graphing/Polygon.jsx';
import CoordinateLabel from '../components/graphing/CoordinateLabel.jsx';
export default function Home() {
@@ -12,11 +13,11 @@ export default function Home() {
<p>Hello World!</p>
<div class="field-border kern">
<Graph viewBox={viewBox}>
- <Quadratic a={2} b={1} c={-3} viewBox={viewBox} />
+ <Quadratic a={2} b={1} c={-3} colour="1" viewBox={viewBox} />
<CoordinateLabel x={-.25} y={-3.125} position="bottom" />
- <polygon points="1,2 -1,1, -4,3" />
+ <Polygon points={[[1,2], [-1,1], [-4,3]]} label="P" colour="2" />
<CoordinateLabel x={-4} y={3} position="top" />
- <Cubic a={1} b={-3} c={3} d={-1} viewBox={viewBox}/>
+ <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox}/>
</Graph>
</div>
</Window>
diff --git a/src/styles/svg.css b/src/styles/svg.css
@@ -1,13 +1,12 @@
-path,polygon,circle,ellipse,line,polyline {
- stroke: #066;
+path,polygon,line,polyline,circle,ellipse {
stroke-width: 0.06;
stroke-linejoin: round;
stroke-linecap: round;
- fill: transparent;
+ fill-opacity: 0;
}
polygon {
- fill: #0668;
+ fill-opacity: 0.5;
}
path#grid {
@@ -15,15 +14,14 @@ path#grid {
stroke-width: 0.01;
}
-path#axes {
+path.axis {
stroke: black;
stroke-width: 0.08;
stroke-linecap: butt;
}
-path#arrowhead {
- stroke: black;
- fill: black;
+polygon#arrowhead {
+ fill-opacity: 1;
}
text {
@@ -36,25 +34,20 @@ text {
.color-1 {
fill: var(--graph-1);
stroke: var(--graph-1);
- fill-opacity: 0.5;
}
.color-2 {
fill: var(--graph-2);
stroke: var(--graph-2);
- fill-opacity: 0.5;
}
.color-3 {
fill: var(--graph-3);
stroke: var(--graph-3);
- fill-opacity: 0.5;
}
.color-4 {
fill: var(--graph-4);
stroke: var(--graph-4);
- fill-opacity: 0.5;
}
.color-5 {
fill: var(--graph-5);
stroke: var(--graph-5);
- fill-opacity: 0.5;
-}
-\ No newline at end of file
+}
