From 837fdbe1873d84a4a3630cb960bb9d12fc7a5280 Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Sun, 16 Aug 2020 09:34:24 -0700
Subject: [PATCH] temp

---
 chapters/extremities/content.en-GB.md |  4 +--
 chapters/extremities/quadratic.js     | 51 +++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 chapters/extremities/quadratic.js

diff --git a/chapters/extremities/content.en-GB.md b/chapters/extremities/content.en-GB.md
index a5327f0f..982b5dec 100644
--- a/chapters/extremities/content.en-GB.md
+++ b/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>
diff --git a/chapters/extremities/quadratic.js b/chapters/extremities/quadratic.js
new file mode 100644
index 00000000..d4f4a27c
--- /dev/null
+++ b/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();
+}