section 15, 16

components/sections/boundingbox/index.js

@@ -0,0 +1,64 @@
+var React = require("react");
+var Graphic = require("../../Graphic.jsx");
+var SectionHeader = require("../../SectionHeader.jsx");
+
+var BoundingBox = React.createClass({
+  getDefaultProps: function() {
+    return {
+      title: "Bounding boxes"
+    };
+  },
+
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    api.setCurve(curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+    api.setColor("#00FF00");
+    api.drawbbox(curve.bbox());
+  },
+
+  render: function() {
+    return (
+      <section>
+        <SectionHeader {...this.props} />
+
+
+        <p>If we have the extremities, and the start/end points, a simple for loop that tests for min/max values for
+        x and y means we have the four values we need to box in our curve:</p>
+
+        <p id="bounds_p"><i>Computing the bounding box for a Bézier curve</i></p>
+
+        <ol>
+          <li>Find all <i>t</i> value(s) for the curve derivative's x- and y-roots.</li>
+          <li>Discard any <i>t</i> value that's lower than 0 or higher than 1, because Bézier curves only use the interval [0,1].</li>
+          <li>Determine the lowest and highest value when plugging the values <i>t=0</i>, <i>t=1</i> and each of the found
+          roots into the original functions: the lowest value is the lower bound, and the highest value is the upper
+          bound for the bounding box we want to construct.</li>
+        </ol>
+
+        <p>Applying this approach to our previous root finding, we get the following bounding boxes (with curve
+        extremities coloured the same as in the root finding graphics):</p>
+
+        <Graphic preset="simple" title="Quadratic Bézier bounding box" setup={this.setupQuadratic} draw={this.draw} />
+
+        <Graphic preset="simple" title="Cubic Bézier bounding box" setup={this.setupCubic} draw={this.draw} />
+
+
+        <p>We can construct even nicer boxes by aligning them along our curve, rather than along the x- and y-axis,
+        but in order to do so we first need to look at how aligning works.</p>
+      </section>
+    );
+  }
+});
+
+module.exports = BoundingBox;