website

commit c278c303d79908c202c52cb566a19499fd8b3cc9
parent 53320a48b96366e56209262cb86ac2779f87a8ee
Author: hrryt <harry@mayesfield.uk>
Date:   Mon, 10 Aug 2026 22:19:10 +0100

Add polygon labelling

Diffstat:
M
src/components/graphing/Label.jsx
 | 
6
++++--
A
src/components/graphing/Polygon.jsx
 | 
26
++++++++++++++++++++++++++
M
src/components/questions/DoubleTransformationQuestion.jsx
 | 
20
++++++++------------

3 files changed, 38 insertions(+), 14 deletions(-)
diff --git a/src/components/graphing/Label.jsx b/src/components/graphing/Label.jsx
@@ -1,5 +1,7 @@
 function getPosition(position) {
   switch (position) {
+    case 'central':
+      return ['central', 'middle', 0, 0];
     case 'left':
       return ['central', 'end', -1, 0];
     case 'right':
@@ -13,11 +15,11 @@ function getPosition(position) {
   }
 }
 
-export default function Label({ x, y, position, d=.15, children }) {
+export default function Label({ x, y, position='central', d=.15, children }) {
   const [dominantBaseline, textAnchor, dx, dy] = getPosition(position);
   return (
     <text
-      x={x} y={-y} dx={d*dx} dy={-d*dy} transform="scale(1 -1)"
+      x={x} y={-y} dx={d*dx} dy={-d*dy} transform='scale(1 -1)'
       dominant-baseline={dominantBaseline}
       text-anchor={textAnchor}
     >
diff --git a/src/components/graphing/Polygon.jsx b/src/components/graphing/Polygon.jsx
@@ -0,0 +1,26 @@
+import Label from './Label.jsx';
+
+function getMean(arr) {
+  return arr.reduce((a, b) => a + b) / arr.length;
+}
+
+function getMiddle(points) {
+  const x = points.map(point => point[0]);
+  const y = points.map(point => point[1]);
+  return [getMean(x), getMean(y)];
+}
+
+function PolygonLabel({ children, points }) {
+  const [x, y] = getMiddle(points);
+  return <Label x={x} y={y}>{children}</Label>;
+}
+
+export default function Polygon({ points, label=null, colour="1" }) {
+  const pointsString = points.map((point) => point.join(",")).join(" ");
+  return (
+    <g>
+      <polygon points={pointsString} class={`color-${colour}`}/>
+      {label && <PolygonLabel points={points}>{label}</PolygonLabel>}
+    </g>
+  );
+}
diff --git a/src/components/questions/DoubleTransformationQuestion.jsx b/src/components/questions/DoubleTransformationQuestion.jsx
@@ -1,12 +1,9 @@
 import { getRandomChoice, getRandomInt } from "../../scripts/utils";
 import CoordinateLabel from "../graphing/CoordinateLabel";
+import Polygon from "../graphing/Polygon";
 import Graph from "../graphing/Graph";
 import Question from "../Question";
 
-function shapeToString(shape) {
-  return shape.map((point) => point.join(",")).join(" ")
-}
-
 function rotatePoint(point, angle, axis=[0, 0]) {
   const diff = [point[0] - axis[0], point[1] - axis[1]]
   const c = Math.cos(angle)
@@ -14,13 +11,12 @@ function rotatePoint(point, angle, axis=[0, 0]) {
   return [axis[0] + c*diff[0] + s*diff[1], axis[1] + c*diff[1] - s*diff[0]]
 }
 
-
 export default function DoubleTransformationQuestion({ seed, showAnswer }) {
   const viewBox = [-7, -7, 14, 14]
   const originalShape = [[0, 1], [2, 1], [0, 2]]
-  const axis1 = [getRandomInt(-3, 3, seed), getRandomInt(-3, 3, seed + .1)]
-  const axis2 = [getRandomInt(-3, 3, seed + .2), getRandomInt(-3, 3, seed + .3)]
-  const angle = getRandomChoice([Math.PI/2, Math.PI, 3*Math.PI/2], seed + .4)
+  const axis1 = [getRandomInt(-3, 3, seed++), getRandomInt(-3, 3, seed++)]
+  const axis2 = [getRandomInt(-3, 3, seed++), getRandomInt(-3, 3, seed++)]
+  const angle = getRandomChoice([Math.PI/2, Math.PI, 3*Math.PI/2], seed++)
 
   // Rotation then translation!. could do other way around if really needed.
   const midShape = originalShape.map((point) => rotatePoint(point, angle, axis1))
@@ -35,11 +31,11 @@ export default function DoubleTransformationQuestion({ seed, showAnswer }) {
       What single transformation..?
     </p>
     <Graph viewBox={viewBox} width="300" height="300">
-      <polygon className="color-1" points={shapeToString(originalShape)} />
-      <polygon className="color-2" points={shapeToString(midShape)} />
-      <polygon className="color-3" points={shapeToString(endShape)} />
-      <CoordinateLabel x={axis2[0]} y={axis2[1]} position="top" />
+      <Polygon points={originalShape} label="P" colour="1" />
+      <Polygon points={     midShape} label="Q" colour="2" />
+      <Polygon points={     endShape} label="R" colour="3" />
       <CoordinateLabel x={axis1[0]} y={axis1[1]} position="top" />
+      <CoordinateLabel x={axis2[0]} y={axis2[1]} position="top" />
     </Graph>
   </>)