website

commit 7354bc7de0d7c5c89206cb18a6ccfe77a988b3f5
parent 47d233b1221ade7b66f849788e7e558aae5587ee
Author: fen123456 <fenwthompson@gmail.com>
Date:   Sat,  8 Aug 2026 19:59:54 +0100

Merge branch 'main' of https://github.com/hrryt/website

Diffstat:
M
src/components/Question.jsx
 | 
7
++++++-
A
src/components/graphing/Cubic.jsx
 | 
14
++++++++++++++
M
src/components/graphing/Quadratic.jsx
 | 
16
++++------------
M
src/pages/Home.jsx
 | 
4
+++-
M
src/scripts/utils.js
 | 
6
++++++

5 files changed, 33 insertions(+), 14 deletions(-)
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -1,9 +1,14 @@
 import Equation from './Equation.jsx';
 
+function maybeEquation(expression) {
+  if (typeof expression == 'string') { return <Equation equation={expression} />; }
+  return expression;
+}
+
 export default function Question({ question, answer, showAnswer }) {
   return (
     <li>
-      <Equation equation={showAnswer ? answer : question} />
+      {maybeEquation(showAnswer ? answer : question)}
     </li>
   );
 }
diff --git a/src/components/graphing/Cubic.jsx b/src/components/graphing/Cubic.jsx
@@ -0,0 +1,14 @@
+import { getSymmetricBounds } from '/src/scripts/utils.js';
+
+export default function Cubic({ a=1, b=0, c=0, d=0, 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; }
+
+  const [i, f] = getSymmetricBounds(-b / (3*a), viewBox);
+  // https://math.stackexchange.com/questions/2414459/draw-cubic-polynomial-using-2d-cubic-bezier-curve
+  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)}`} />
+}
diff --git a/src/components/graphing/Quadratic.jsx b/src/components/graphing/Quadratic.jsx
@@ -1,18 +1,10 @@
-export default function Quadratic({ a, b, c, viewBox }) {
-  const [ minX, minY, width, height ] = viewBox;
+import { getSymmetricBounds } from '/src/scripts/utils.js';
+
+export default function Quadratic({ a=1, b=0, c=0, viewBox }) {
   function f(x) { return a*x*x + b*x + c; }
 
   const turnX = -b / (2*a);
-
-  const maxX = minX + width;
-  // Assumes turnX within viewBox!
-  const halfWidth = Math.max(
-    turnX -  minX,
-     maxX - turnX
-  );
-
-  const startX = turnX - halfWidth;
-  const   endX = turnX + halfWidth;
+  const [startX, endX] = getSymmetricBounds(turnX, viewBox);
 
   const endY = f(endX);
   const controlY = 2*f(turnX) - endY;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,10 +1,11 @@
 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 CoordinateLabel from '../components/graphing/CoordinateLabel.jsx';
 
 export default function Home() {
-  const viewBox = [-5, -4, 7, 8];
+  const viewBox = [-5, -4, 8, 8];
   return (
     <main>
       <Window title="Home">
@@ -15,6 +16,7 @@ export default function Home() {
             <CoordinateLabel x={-.25} y={-3.125} position="bottom" />
             <polygon points="1,2 -1,1, -4,3" />
             <CoordinateLabel x={-4} y={3} position="top" />
+            <Cubic a={1} b={-3} c={3} d={-1} viewBox={viewBox}/>
           </Graph>
         </div>
       </Window>
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
@@ -29,3 +29,9 @@ export function formatCoefficient(x, parameters = {showPlus: false, showOne: tru
   parameters.suffix || (parameters.suffix = '') // if suffix undefined
   return sign + x + parameters.suffix;
 }
+
+export function getSymmetricBounds(midX, viewBox) {
+  const [ minX, minY, width, height ] = viewBox;
+  const halfWidth = Math.max(midX - minX, minX + width - midX);
+  return [midX - halfWidth, midX + halfWidth];
+}