temp

chapters/extremities/content.en-GB.md

@@ -194,5 +194,5 @@ As it turns out, Newton-Raphson is so blindingly fast, so we could get away with
 
 So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics:
 
-<Graphic title="Quadratic Bézier curve extremities" setup={this.setupQuadratic} draw={this.draw}/>
-<Graphic title="Cubic Bézier curve extremities" setup={this.setupCubic} draw={this.draw}/>
+<graphics-element title="Quadratic Bézier curve extremities" width="825" src="./quadratic.js"></graphics-element>
+<graphics-element title="Cubic Bézier curve extremities" width="825" src="./cubic.js"></graphics-element>

chapters/extremities/quadratic.js

@@ -0,0 +1,51 @@
+setup() {
+    this.curve = Bezier.defaultQuadratic(this);
+    setMovable(this.curve.points);
+}
+
+draw() {
+    resetTransform();
+    clear();
+    const dim = this.height;
+    const curve = this.curve;
+    curve.drawSkeleton();
+    curve.drawCurve();
+    curve.drawPoints();
+
+    translate(dim, 0);
+    setStroke(`black`);
+    line(0,0,0,dim);
+
+    scale(0.8, 0.9);
+    translate(40,20);
+    drawAxes(`t`, 0, 1, `X`, 0, dim, dim, dim);
+
+    plot(new Bezier(this, curve.points.map((p,i) => ({
+        x: (i/2) * dim,
+        y: p.x
+    }))));
+
+    resetTransform();
+    translate(2*dim, 0);
+    setStroke(`black`);
+    line(0,0,0,dim);
+
+    scale(0.8, 0.9);
+    translate(40,20);
+    drawAxes(`t`, 0,1, `Y`, 0, dim, dim, dim);
+
+    plot(new Bezier(this, curve.points.map((p,i) => ({
+      x: (i/2) * dim,
+      y: p.y
+    }))))
+}
+
+plot(dimension) {
+    dimension.drawCurve();
+
+}
+
+
+onMouseMove() {
+    redraw();
+}