From b4910017ac3b3e0714416d839a3afefbc8e6d37d Mon Sep 17 00:00:00 2001 From: Pomax Date: Fri, 8 Jan 2016 16:10:39 -0800 Subject: [PATCH] catmull --- components/Graphic.jsx | 22 + components/sections/abc/index.js | 186 +++++--- components/sections/catmullconv/index.js | 417 ++++++++++++++++++ components/sections/catmullmoulding/index.js | 184 ++++++++ components/sections/index.js | 11 +- components/sections/moulding/index.js | 8 +- components/sections/pointcurves/index.js | 10 +- ...12c961898c470efe9e455ebb2f9a0fac7423cd.svg | 78 ++++ ...6db1a4d430965f0d71bb687662c05d59574a55.svg | 161 +++++++ ...e30af03e8ee0c0cc8a05b396561dde8ea9f30c.svg | 170 +++++++ ...e1af98e69d9fe7033e2c0ef7c37709211ddbad.svg | 66 +++ ...85622f062da4ca1ecaaf639fc99fc6005a219f.svg | 77 ++++ ...5ee5f197dbf27d95b2e941ef8a5358ace5531f.svg | 164 +++++++ ...0f632d4dc149e9099e47dc63a77e6b959042d2.svg | 118 +++++ ...b5be270e6a82cfe8fa78c5989f07c233eb6f5e.svg | 192 ++++++++ ...95d03a381353483b0977e80c30677aee8660f2.svg | 76 ++++ ...d5c2f03984dd0ddd8d52b17be6d184247e1642.svg | 219 +++++++++ ...1cef6da583e2809205a3d42304a78ec353a2bd.svg | 52 +++ ...ec3900b65b8aab2adf2450e2525b545de7872e.svg | 78 ++++ ...16982d677e180a1c1b8215f866165011b4586c.svg | 135 ++++++ ...bb5da1e08a72accd3e09e418f41f5da68bc35c.svg | 69 +++ ...47d1f7783f27d9360693a31748cc128456e0db.svg | 180 ++++++++ ...b51098777fc55c4c58f3e73efc7c9cdeb10111.svg | 190 ++++++++ ...66f7e99e6bac98e0a761599814ba714db7dd6b.svg | 169 +++++++ ...6c67a21b318295729cc2b9bd55a30e40e7e981.svg | 282 ++++++++++++ ...2a259e763a4af2e1de7835ac45dc6f3b564014.svg | 220 +++++++++ ...98783864c533514df9bda833f68b01b7a78aa6.svg | 159 +++++++ ...8a9fd68d0f0723511dfad29d5dae730c18ddbe.svg | 289 ++++++++++++ stylesheets/figure.less | 1 + stylesheets/note.less | 11 + stylesheets/section.less | 12 +- 31 files changed, 3933 insertions(+), 73 deletions(-) create mode 100644 components/sections/catmullconv/index.js create mode 100644 components/sections/catmullmoulding/index.js create mode 100644 images/latex/0612c961898c470efe9e455ebb2f9a0fac7423cd.svg create mode 100644 images/latex/0d6db1a4d430965f0d71bb687662c05d59574a55.svg create mode 100644 images/latex/0de30af03e8ee0c0cc8a05b396561dde8ea9f30c.svg create mode 100644 images/latex/11e1af98e69d9fe7033e2c0ef7c37709211ddbad.svg create mode 100644 images/latex/1685622f062da4ca1ecaaf639fc99fc6005a219f.svg create mode 100644 images/latex/2c5ee5f197dbf27d95b2e941ef8a5358ace5531f.svg create mode 100644 images/latex/340f632d4dc149e9099e47dc63a77e6b959042d2.svg create mode 100644 images/latex/3db5be270e6a82cfe8fa78c5989f07c233eb6f5e.svg create mode 100644 images/latex/6995d03a381353483b0977e80c30677aee8660f2.svg create mode 100644 images/latex/77d5c2f03984dd0ddd8d52b17be6d184247e1642.svg create mode 100644 images/latex/7f1cef6da583e2809205a3d42304a78ec353a2bd.svg create mode 100644 images/latex/a7ec3900b65b8aab2adf2450e2525b545de7872e.svg create mode 100644 images/latex/aa16982d677e180a1c1b8215f866165011b4586c.svg create mode 100644 images/latex/bfbb5da1e08a72accd3e09e418f41f5da68bc35c.svg create mode 100644 images/latex/c647d1f7783f27d9360693a31748cc128456e0db.svg create mode 100644 images/latex/cab51098777fc55c4c58f3e73efc7c9cdeb10111.svg create mode 100644 images/latex/cb66f7e99e6bac98e0a761599814ba714db7dd6b.svg create mode 100644 images/latex/d16c67a21b318295729cc2b9bd55a30e40e7e981.svg create mode 100644 images/latex/d92a259e763a4af2e1de7835ac45dc6f3b564014.svg create mode 100644 images/latex/e998783864c533514df9bda833f68b01b7a78aa6.svg create mode 100644 images/latex/ea8a9fd68d0f0723511dfad29d5dae730c18ddbe.svg create mode 100644 stylesheets/note.less diff --git a/components/Graphic.jsx b/components/Graphic.jsx index b134a740..d25ce82a 100644 --- a/components/Graphic.jsx +++ b/components/Graphic.jsx @@ -343,6 +343,28 @@ var Graphic = React.createClass({ } }, + drawGrid: function(xcount, ycount, offset) { + var w = this.defaultWidth, + h = this.defaultHeight, + xstep = w/xcount, + ox = xstep/2, + ystep = h/ycount, + oy = ystep/2, + x, xv, y, yv, p1, p2; + for (x=0; x @@ -92,16 +145,15 @@ var ABC = React.createClass({

How does that work? Succinctly: we run de Casteljau's algorithm in reverse!

-

Let's start out with a pre-existing curve, defined by start, two control points, and end. We can - mould this curve by picking a point somewhere on the curve, at some t value, and the moving it to a new - location and reconstructing the curve that goes through start, our new point with the original tangent, - and end. In order to see how and why we can do this, let's look at some identity information for Bézier - curves. There's actually a hidden goldmine of identities that we can exploit when doing Bézier operations, and - this will only scratch the surface. But, in a good way!

+

In order to run de Casteljau's algorithm in reverse, we need a few basic things: a start and end point, a point + on the curve that want to be moving around, which has an associated t value, and a point we've not explicitly + talked about before, and as far as I know has no explicit name, but lives one iteration higher in the de Casteljau + process then our on-curve point does. I like to call it "A" for reasons that will become obvious.

-

In the following graphic, click anywhere on the curves to see the identity information that we'll - be using to run de Casteljau in reverse (you can manipulate the curve even after picking a point. - Note the "ratio" value when you do so: does it change?):

+

So let's use graphics instead of text to see where this "A" is, because text only gets us so far: in the + following graphic, click anywhere on the curves to see the identity information that we'll be using to run + de Casteljau in reverse (you can manipulate the curve even after picking a point. Note the "ratio" value + when you do so: does it change?):

-

So, what exactly do we see in these graphics? First off, there's the three points A, B and C.

+

Clicking anywhere on the curves shows us three things:

-

Point B is our "on curve" point, A is the first "strut" point when running de Casteljau's - algorithm in reverse; for quadratic curves, this happens to also be the curve's control point. For cubic - curves, it's the "top of the triangle" for the struts that lead to point B. Point C, finally, - is the intersection of the line that goes through A and B and the baseline, - between our start and end points.

+
    +
  1. our on-curve point; let's call that B,
    2. +
  2. a point at the tip of B's "hat", on de Casteljau step up; let's call that A, and
    3. +
  3. a point that we get by projecting B onto the start--end baseline; let's call that C.
    4. +
-

There is some important identity information here: as long as we don't pick a new t coordinate, - the location of point C on the line start-end represents a fixed ratio distance. We can drag - around the control points as much as we like, that point won't move at all, and if we can drag around - the start or end point, C will stay at the same ratio-value. For instance, if it was located midway between - start and end, it'll stay midway between start and end, even if the line segment between start and end - becomes longer or shorter.

+

These three values ABC hide an important identity formula for quadratic and cubic Bézier curves: + for any point on the curve with some t value, the ratio distance of C along baseline is fixed: + if some t value sets up a C that is 20% away from the start and 80% away from the end, then it + doesn't matter where the start, end, or control points are: for that t value, C will always lie + at 20% from the start and 80% from the end point. Go ahead, pick an on-curve point in either graphic + and then move all the other points around: if you only move the control points, start and end won't move, + and so neither will C, and if you move either start or end point, C will move but its relative position + will not change. The following function stays true:

-

We can also see that the distances for the lines d1 = A-B and d2 = B-C may vary, but the - ratio between them, d1/d2, is a constant value. We can drag any of the start, end, or control points - around as much as we like, but that value also stays the same.

+

\[ + C = u \cdot P_{start} + (1-u) \cdot P_{end} + \]

+ +

So that just leaves finding A.

-

In fact, because the distance ratio is a fixed value for each point B, which we get by picking - some t value on our curve, the distance ratio is actually an identity function for Bézier curves. - If we were to plot all the ratio values for all possible t values for quadratic and cubic curves, - we'd see two very interesting functions: asymptotic at t=0 and t=1, tending towards positive - infinity, with a zero-derivative minimum at t=0.5.

+

While that relation is fixed, the function u(t) differs depending on whether we're working + with quadratic or cubic curves:

-

Since these are ratios, we can actually express the ratio values as a function of t. I actually - failed at coming up with the precise functions, but thanks to some help from - Boris - Zbarsky we can see that the ratio functions are actually remarkably simple:

+

\[\begin{align} + & u(t)_{quadratic} = \frac{(t-1)^2}{2t^2 - 2t + 1} \\ + & u(t)_{cubic} = \frac{(1-t)^3}{t^3 + (1-t)^3} + \end{align}\]

- - - - - - -
-

Quadratic curves:\[ - ratio(t)_2 = \left | \frac{2t^2 - 2t}{2t^2 - 2t + 1} \right | - \]

- 		-

Cubic curves: \[ - ratio(t)_3 = \left | \frac{t^3 + (1-t)^3 - 1}{t^3 + (1-t)^3} \right | - \]

-
+

So, if we know the start and end coordinates, and we know the t value, we know C:

+ +
+ + +
+ +

Mouse-over the graphs to see the expression for C, given the t value at the mouse pointer.

+
+ +

There's also another important bit of information that is inherent to the ABC values: while the distances + between A and B, and B and C, are dynamic (based on where we put B), the ratio between the two + distances is stable: given some t value, the following always holds:

+ +

\[ + ratio(t) = \frac{distance(B,C)}{distance(A,B)} = Constant + \]

+ +

This leads to a pretty powerful bit of knowledge: merely by knowing the t value of some on curve + point, we know where C has to be (as per the above note), and because we know B and C, and thus have the + distance between them, we know where A has to be:

+ +

\[ + A = B - \frac{C - B}{ratio(t)} = B + \frac{B - C}{ratio(t)} + \]

+ +

And that's it, all values found.

+ +
+

Much like the u(t) function in the above note, the ratio(t) function depends + on whether we're looking at quadratic or cubic curves. Their form is intrinsically related to + the u(t) function in that they both come rolling out of the same function evalution, + explained over on MathOverflow by + Boris Zbarsky and myself. The ratio functions are the "s(t)" functions from the answers there, + while the "u(t)" functions have the same name both here and on MathOverflow.

+ +

\[ + ratio(t)_{quadratic} = \left | \frac{2t^2 - 2t}{2t^2 - 2t + 1} \right | + \]

+ +

\[ + ratio(t)_{cubic} = \left | \frac{t^3 + (1-t)^3 - 1}{t^3 + (1-t)^3} \right | + \]

Unfortunately, this trick only works for quadratic and cubic curves. Once we hit higher order curves, things become a lot less predictable; the "fixed point C" is no longer fixed, moving around as we @@ -163,6 +244,11 @@ var ABC = React.createClass({ lie on that line before the start, or after the end, and there are no simple ratios that we can exploit.

+

So: if we know B and its corresponding t value, then we know all the ABC values, which + —together with a start and end coordinate— gives us the necessary information to reconstruct a curve's + "de Casteljau skeleton", which means that two points and a value between 0 and 1, we can come up with + a curve. And that opens up possibilities: curve manipulation by dragging an on-curve point, curve fitting + of "a bunch of coordinates", these are useful things, and we'll look at both in the next sections.

); } diff --git a/components/sections/catmullconv/index.js b/components/sections/catmullconv/index.js new file mode 100644 index 00000000..2c968935 --- /dev/null +++ b/components/sections/catmullconv/index.js @@ -0,0 +1,417 @@ +var React = require("react"); +var Graphic = require("../../Graphic.jsx"); +var SectionHeader = require("../../SectionHeader.jsx"); + +var CatmullRomConversion = React.createClass({ + getDefaultProps: function() { + return { + title: "Bézier curves and Catmull-Rom curves" + }; + }, + + render: function() { + return ( +
+ + +

Taking an excursion to different splines, the other common design curve is + the Catmull-Rom + spline. Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens + the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one + into the other, and back, with some simple substitutions?

+ +

Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, + except the first and last, which makes sense if you read the "natural language" description + for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point + Px, has a tangent along the line Px-1 to Px+1. The curve + runs from points P2 to Pn-1, and has a "tension" that determines + how fast the curve passes through each point. The lower the tension, the faster the curve + goes through each point, and the bigger its local tangent is.

+ +

I'll be showing the conversion to and from Catmull-Rom curves for the tension that the + Processing language uses for its Catmull-Rom algorithm.

+ +

We start with showing the Catmull-Rom matrix form:

+ +

\[ + CatmullRom(t) = + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + 0 & 0 & 1 & 0 \\ + -3 & 3 & -2 & -1 \\ + 2 & -2 & 1 & 1 + \end{bmatrix} + \cdot + \begin{bmatrix} + V_1 \\ V_2 \\ V'_1 \\ V'_2 + \end{bmatrix} + \] +

+ +

However, there's something funny going on here: the coordinate column matrix looks weird. + The reason is that Catmull-Rom curves are actually curve segments that are described by two + points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead, + this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1 + with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and + arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate + 4). So if we want to express this as a matrix form based on four coordinates, we get this + representation instead:

+ +

\[ + \begin{bmatrix} + V_1 \\ V_2 \\ V'_1 \\ V'_2 + \end{bmatrix} + = + T + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + = + \begin{bmatrix} + P_2 \\ P_3 \\ \frac{P_3 - P_1}{2} \\ \frac{P_4 - P_2}{2} + \end{bmatrix} + \ \Rightarrow \ + T + = + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + 0 & 0 & 2 & 0 \\ + -1 & 0 & 1 & 0 \\ + 0 & -1 & 0 & 1 + \end{bmatrix} + \]

+ +
+

Where did that 2 come from?

+ +

Catmull-Rom splines are based on the concept of tension: the higher the tensions, + the shorter the tangents at the departure and arrival points. The basic Catmull-Rom + curve arrives and departs with tangents equal to half the distance between the two + adjacent points, so that's where that 2 came from.

+ +

However, the "real" matrix is this:

+ +

\[ + T + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + = + \begin{bmatrix} + P_2 \\ P_3 \\ \frac{P_3 - P_1}{2 \cdot τ} \\ \frac{P_4 - P_2}{2 \cdot τ} + \end{bmatrix} + \Rightarrow \ + T + = + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + 0 & 0 & 2 & 0 \\ + -τ & 0 & τ & 0 \\ + 0 & -τ & 0 & τ + \end{bmatrix} + \]

+ +

This bakes in the tension factor τ explicitly.

+
+ +

Plugging this into the "two coordinates and two tangent vectors" matrix form, + we get:

+ +

\[ + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + 0 & 0 & 1 & 0 \\ + -3 & 3 & -2 & -1 \\ + 2 & -2 & 1 & 1 + \end{bmatrix} + \cdot + \begin{bmatrix} + V_1 \\ V_2 \\ V'_1 \\ V'_2 + \end{bmatrix} + \]

+ +

\[ + = + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + 0 & 0 & 1 & 0 \\ + -3 & 3 & -2 & -1 \\ + 2 & -2 & 1 & 1 + \end{bmatrix} + \cdot + \left ( + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + 0 & 0 & 2 & 0 \\ + -τ & 0 & τ & 0 \\ + 0 & -τ & 0 & τ + \end{bmatrix} + \right ) + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + \]

+ +

\[ + = + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + -τ & 0 & τ & 0 \\ + 2τ & τ-6 & -2(τ-3) & -τ \\ + -τ & 4-τ & τ-4 & τ + \end{bmatrix} + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + \]

+ +

So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:

+ +

\[ + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + -τ & 0 & τ & 0 \\ + 2τ & τ-6 & -2(τ-3) & -τ \\ + -τ & 4-τ & τ-4 & τ + \end{bmatrix} + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + = + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + \cdot + A + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + \]

+ +

The difference is somewhere in the actual hermite matrix, since the t and coordinate + values are identical, so let's solve that matrix equasion:

+ +

\[ + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + -τ & 0 & τ & 0 \\ + 2τ & τ-6 & -2(τ-3) & -τ \\ + -τ & 4-τ & τ-4 & τ + \end{bmatrix} + = + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + \cdot + A + \]

+ +

We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the + Bézier matrix on the right side of the equals sign:

+ +

\[ + { + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + }^{-1} + \cdot + \frac{1}{2} + \cdot + \begin{bmatrix} + 0 & 2 & 0 & 0 \\ + -τ & 0 & τ & 0 \\ + 2τ & τ-6 & -2(τ-3) & -τ \\ + -τ & 4-τ & τ-4 & τ + \end{bmatrix} + = + { + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + }^{-1} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + \cdot + A + \ =\ + I \cdot A + \ =\ + A + \] +

+ +

Which gives us:

+ +

\[ + \frac{1}{6} + \cdot + \begin{bmatrix} + 0 & 6 & 0 & 0 \\ + -τ & 6 & τ & 0 \\ + 0 & τ & 0 & -τ \\ + 0 & 0 & 6 & 0 + \end{bmatrix} + = + A + \]

+ +

Multiplying this A with our coordinates + will give us a proper Bézier matrix expression again:

+ +

\[ + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + \cdot + \frac{1}{6} + \cdot + \begin{bmatrix} + 0 & 6 & 0 & 0 \\ + -τ & 6 & τ & 0 \\ + 0 & τ & 0 & -τ \\ + 0 & 0 & 6 & 0 + \end{bmatrix} + \cdot + \begin{bmatrix} + P_1 \\ P_2 \\ P_3 \\ P_4 + \end{bmatrix} + \]

+ +

\[ + = + \begin{bmatrix} + 1 & t & t^2 & t^3 + \end{bmatrix} + \cdot + \begin{bmatrix} + 1 & 0 & 0 & 0 \\ + -3 & 3 & 0 & 0 \\ + 3 & -6 & 3 & 0 \\ + -1 & 3 & -3 & 1 + \end{bmatrix} + \cdot + \begin{bmatrix} + P_2 \\ + P_2 + \frac{P_3-P_1}{6 \cdot τ} \\ + P_3 - \frac{P_4-P_2}{6 \cdot τ} \\ + P_3 + \end{bmatrix} + \]

+ +

So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning + the Catmull-Rom coordinates on the left into the Bézier coordinates on the right + (with τ being our tension factor):

+ +

\[ + \begin{bmatrix} + P_1 \\ + P_2 \\ + P_3 \\ + P_4 + \end{bmatrix}_{CatmullRom} + \Rightarrow + \begin{bmatrix} + P_2 \\ + P_2 + \frac{P_3-P_1}{6 \cdot τ} \\ + P_3 - \frac{P_4-P_2}{6 \cdot τ} \\ + P_3 + \end{bmatrix}_{Bézier} + \]

+ +

And the other way around, a Bézier to Catmull-Rom conversion requires turning + the Bézier coordinates on the left this time into the Catmull-Rom coordinates + on the right. Note that there is no tension this time, because Bézier curves + don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension + Catmull-Rom curve:

+ +

\[ + \begin{bmatrix} + P_1 \\ + P_2 \\ + P_3 \\ + P_4 + \end{bmatrix}_{Bézier} + \Rightarrow + \begin{bmatrix} + P_4 + 6 \cdot (P_1 - P_2) \\ + P_1 \\ + P_4 \\ + P_1 + 6 \cdot (P_4 - P_3) + \end{bmatrix}_{CatmullRom} + \]

+ +

Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom + splines, the choice mostly being which drawing algorithms we have natively available.

+
+ ); + } +}); + +module.exports = CatmullRomConversion; diff --git a/components/sections/catmullmoulding/index.js b/components/sections/catmullmoulding/index.js new file mode 100644 index 00000000..50b86fa8 --- /dev/null +++ b/components/sections/catmullmoulding/index.js @@ -0,0 +1,184 @@ +var React = require("react"); +var Graphic = require("../../Graphic.jsx"); +var SectionHeader = require("../../SectionHeader.jsx"); + +var CatmullRomMoulding = React.createClass({ + getDefaultProps: function() { + return { + title: "Creating a Catmull-Rom curve from three points" + }; + }, + + setup: function(api) { + api.setPanelCount(3); + api.lpts = [ + {x:56, y:153}, + {x:144,y:83}, + {x:188,y:185} + ]; + api.distance = 0; + }, + + onKeyDown: function(evt, api) { + if (evt.key === "ArrowUp") { + evt.preventDefault(); + api.distance += 1; + } else if (evt.key === "ArrowDown") { + evt.preventDefault(); + api.distance -= 1; + } + }, + + convert: function(p1, p2, p3, p4) { + var t = 0.5; + return [ + p2, + { + x: p2.x + (p3.x-p1.x)/(6*t), + y: p2.y + (p3.y-p1.y)/(6*t), + }, + { + x: p3.x - (p4.x-p2.x)/(6*t), + y: p3.y - (p4.y-p2.y)/(6*t), + }, + p3 + ]; + }, + + draw: function(api) { + api.reset(); + api.setColor("lightblue"); + api.drawGrid(10,10); + + var pts = api.lpts; + api.setColor("black"); + api.setFill("black"); + pts.forEach((p,pos) => { + api.drawCircle(p, 3); + api.text("point "+(pos+1), p, {x:10, y:7}); + }); + + var w = api.getPanelWidth(); + var h = api.getPanelHeight(); + var offset = {x:w, y:0}; + api.setColor("lightblue"); + api.drawGrid(10,10,offset); + api.setColor("black"); + api.drawLine({x:0,y:0}, {x:0,y:h}, offset); + + pts.forEach((p,pos) => { + api.drawCircle(p, 3, offset); + }); + var p1 = pts[0], p2 = pts[1], p3 = pts[2]; + var dx = p3.x - p1.x, + dy = p3.y - p1.y, + m = Math.sqrt(dx*dx + dy*dy); + dx /= m; + dy /= m; + api.drawLine(p1, p3, offset); + + var p0 = { + x: p1.x + (p3.x - p2.x) - api.distance * dx, + y: p1.y + (p3.y - p2.y) - api.distance * dy + }; + var p4 = { + x: p1.x + (p3.x - p2.x) + api.distance * dx, + y: p1.y + (p3.y - p2.y) + api.distance * dy + }; + var center = api.utils.lli4(p1,p3,p2,{ + x: (p0.x + p4.x)/2, + y: (p0.y + p4.y)/2 + }); + api.setColor("blue"); + api.drawCircle(center, 3, offset); + api.drawLine(pts[1],center, offset); + api.setColor("#666"); + api.drawLine(center, p0, offset); + api.drawLine(center, p4, offset); + + api.setFill("blue"); + api.text("p0", p0, {x:-20 + offset.x, y:offset.y + 2}); + api.text("p4", p4, {x:+10 + offset.x, y:offset.y + 2}); + + // virtual point p0 + api.setColor("red"); + api.drawCircle(p0, 3, offset); + api.drawLine(p2, p0, offset); + api.drawLine(p1, { + x: p1.x + (p2.x - p0.x)/5, + y: p1.y + (p2.y - p0.y)/5 + }, offset); + + // virtual point p4 + api.setColor("#00FF00"); + api.drawCircle(p4, 3, offset); + api.drawLine(p2, p4, offset); + api.drawLine(p3, { + x: p3.x + (p4.x - p2.x)/5, + y: p3.y + (p4.y - p2.y)/5 + }, offset); + + // Catmull-Rom curve for p0-p1-p2-p3-p4 + var c1 = new api.Bezier(this.convert(p0,p1,p2,p3)), + c2 = new api.Bezier(this.convert(p1,p2,p3,p4)); + api.setColor("lightgrey"); + api.drawCurve(c1, offset); + api.drawCurve(c2, offset); + + + offset.x += w; + api.setColor("lightblue"); + api.drawGrid(10,10,offset); + api.setColor("black"); + api.drawLine({x:0,y:0}, {x:0,y:h}, offset); + + api.drawCurve(c1, offset); + api.drawCurve(c2, offset); + api.drawPoints(c1.points, offset); + api.drawPoints(c2.points, offset); + api.setColor("lightgrey"); + api.drawLine(c1.points[0], c1.points[1], offset); + api.drawLine(c1.points[2], c2.points[1], offset); + api.drawLine(c2.points[2], c2.points[3], offset); + }, + + render: function() { + return ( +
+ + +

Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, + why can't we just use those to do curve fitting, instead?

+ +

As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the + previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous + section we came up with a single curve that goes through three points. There was a decent amount of + maths and computation involved, and the end result was three or four coordinates that described a + single curve, depending on whether we were fitting a quadratic or cubic curve.

+ +

Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom + curve of n points, in order to draw the equivalent curve using cubic Bézier curves we need a + massive 3n-1 points (and that's without double-counting points that are shared by consecutive + cubic curves).

+ + +

In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through + (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom + information: in black there's the baseline start--end, which will act as tangent orientation for the curve at + point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. + However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would + we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as + arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:

+ + + +

As should be obvious by now, Catmull-Rom curves are great for "fitting a curvature to some points", but if we want + to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. + Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends + entirely on you.

+
+ ); + } +}); + +module.exports = CatmullRomMoulding; diff --git a/components/sections/index.js b/components/sections/index.js index 76c6a171..c5839adc 100644 --- a/components/sections/index.js +++ b/components/sections/index.js @@ -34,14 +34,14 @@ module.exports = { abc: require("./abc"), moulding: require("./moulding"), - pointcurves: require("./pointcurves") + pointcurves: require("./pointcurves"), + + catmullconv: require("./catmullconv"), + catmullmoulding: require("./catmullmoulding") }; /* - catmullconv: require("./catmullconv"), - catmullmoulding: require("./catmullmoulding"), - polybezier: require("./polybezier"), shapes: require("./shapes"), @@ -56,9 +56,6 @@ module.exports = { */ /* - - Bézier curves and Catmull-Rom curves - Creating a Catmull-Rom curve from three points Forming poly-Bézier curves Boolean shape operations Projecting a point onto a Bézier curve diff --git a/components/sections/moulding/index.js b/components/sections/moulding/index.js index 0464fb04..3b010c93 100644 --- a/components/sections/moulding/index.js +++ b/components/sections/moulding/index.js @@ -234,7 +234,7 @@ var Moulding = React.createClass({ we can compute the ABC ratio for this configuration, and we know that our new point A' should like at a distance:

\[ - A' = B' + \frac{B' - C}{ratio} = B' - \frac{C - B'}{ratio} + A' = B' - \frac{C - B'}{ratio} = B' + \frac{B - C}{ratio} \]

For quadratic curves, this means we're done, since the new point A' is equivalent to the new quadratic control point. @@ -249,7 +249,9 @@ var Moulding = React.createClass({ curve. Given A', B', and the endpoints e1 and e2 of the strut line relative to B', we can now compute where the new control points should be. Remember that B' lies on line e1--e2 at a distance t, because that's how Bézier curves work. In the same manner, we know the distance A--e1 is only line-interval [0,t] of the full segment, and A--e2 is only line-interval [t,1], so constructing - the new control points is fairly easy:

+ the new control points is fairly easy.

+ +

First, we construct the one-level-of-de-Casteljau-up points:

\[ \left \{ \begin{align} @@ -258,6 +260,8 @@ var Moulding = React.createClass({ \end{align} \right . \]

+

And then we can compute the new control points:

+

\[ \left \{ \begin{align} C1' &= v1 + \frac{v1 - start}{t} \\ diff --git a/components/sections/pointcurves/index.js b/components/sections/pointcurves/index.js index ca2b3663..43129b46 100644 --- a/components/sections/pointcurves/index.js +++ b/components/sections/pointcurves/index.js @@ -12,7 +12,11 @@ var PointCurves = React.createClass({ }, setup: function(api) { - api.lpts = []; + api.lpts = [ + {x:56, y:153}, + {x:144,y:83}, + {x:188,y:185} + ]; }, onClick: function(evt, api) { @@ -209,8 +213,8 @@ var PointCurves = React.createClass({

In each graphic, the blue parts are the values that we "just have" simply by setting up our three points, combined with our decision on which t value to use (and construction line orientation and length for cubic curves). There are of course many ways to determine a combination - of t and tangent values that lead to a more "aesthetic" curve, but this will be left as an - exercise to the reader, since there are many, and aesthetics are often quite personal.

+ of t and tangent values that lead to a more "æsthetic" curve, but this will be left as an + exercise to the reader, since there are many, and æsthetics are often quite personal.

); } diff --git a/images/latex/0612c961898c470efe9e455ebb2f9a0fac7423cd.svg b/images/latex/0612c961898c470efe9e455ebb2f9a0fac7423cd.svg new file mode 100644 index 00000000..53ec05fa --- /dev/null +++ b/images/latex/0612c961898c470efe9e455ebb2f9a0fac7423cd.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/0d6db1a4d430965f0d71bb687662c05d59574a55.svg b/images/latex/0d6db1a4d430965f0d71bb687662c05d59574a55.svg new file mode 100644 index 00000000..d2667da5 --- /dev/null +++ b/images/latex/0d6db1a4d430965f0d71bb687662c05d59574a55.svg @@ -0,0 +1,161 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/0de30af03e8ee0c0cc8a05b396561dde8ea9f30c.svg b/images/latex/0de30af03e8ee0c0cc8a05b396561dde8ea9f30c.svg new file mode 100644 index 00000000..ea0142b3 --- /dev/null +++ b/images/latex/0de30af03e8ee0c0cc8a05b396561dde8ea9f30c.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/11e1af98e69d9fe7033e2c0ef7c37709211ddbad.svg b/images/latex/11e1af98e69d9fe7033e2c0ef7c37709211ddbad.svg new file mode 100644 index 00000000..75023003 --- /dev/null +++ b/images/latex/11e1af98e69d9fe7033e2c0ef7c37709211ddbad.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/1685622f062da4ca1ecaaf639fc99fc6005a219f.svg b/images/latex/1685622f062da4ca1ecaaf639fc99fc6005a219f.svg new file mode 100644 index 00000000..435e41b2 --- /dev/null +++ b/images/latex/1685622f062da4ca1ecaaf639fc99fc6005a219f.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/2c5ee5f197dbf27d95b2e941ef8a5358ace5531f.svg b/images/latex/2c5ee5f197dbf27d95b2e941ef8a5358ace5531f.svg new file mode 100644 index 00000000..22382400 --- /dev/null +++ b/images/latex/2c5ee5f197dbf27d95b2e941ef8a5358ace5531f.svg @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/340f632d4dc149e9099e47dc63a77e6b959042d2.svg b/images/latex/340f632d4dc149e9099e47dc63a77e6b959042d2.svg new file mode 100644 index 00000000..15a6d858 --- /dev/null +++ b/images/latex/340f632d4dc149e9099e47dc63a77e6b959042d2.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/3db5be270e6a82cfe8fa78c5989f07c233eb6f5e.svg b/images/latex/3db5be270e6a82cfe8fa78c5989f07c233eb6f5e.svg new file mode 100644 index 00000000..432c1069 --- /dev/null +++ b/images/latex/3db5be270e6a82cfe8fa78c5989f07c233eb6f5e.svg @@ -0,0 +1,192 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/6995d03a381353483b0977e80c30677aee8660f2.svg b/images/latex/6995d03a381353483b0977e80c30677aee8660f2.svg new file mode 100644 index 00000000..8ba019c8 --- /dev/null +++ b/images/latex/6995d03a381353483b0977e80c30677aee8660f2.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/77d5c2f03984dd0ddd8d52b17be6d184247e1642.svg b/images/latex/77d5c2f03984dd0ddd8d52b17be6d184247e1642.svg new file mode 100644 index 00000000..a51a0f79 --- /dev/null +++ b/images/latex/77d5c2f03984dd0ddd8d52b17be6d184247e1642.svg @@ -0,0 +1,219 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/7f1cef6da583e2809205a3d42304a78ec353a2bd.svg b/images/latex/7f1cef6da583e2809205a3d42304a78ec353a2bd.svg new file mode 100644 index 00000000..fad5c7ea --- /dev/null +++ b/images/latex/7f1cef6da583e2809205a3d42304a78ec353a2bd.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/a7ec3900b65b8aab2adf2450e2525b545de7872e.svg b/images/latex/a7ec3900b65b8aab2adf2450e2525b545de7872e.svg new file mode 100644 index 00000000..e65a0024 --- /dev/null +++ b/images/latex/a7ec3900b65b8aab2adf2450e2525b545de7872e.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/aa16982d677e180a1c1b8215f866165011b4586c.svg b/images/latex/aa16982d677e180a1c1b8215f866165011b4586c.svg new file mode 100644 index 00000000..f411f0e7 --- /dev/null +++ b/images/latex/aa16982d677e180a1c1b8215f866165011b4586c.svg @@ -0,0 +1,135 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/bfbb5da1e08a72accd3e09e418f41f5da68bc35c.svg b/images/latex/bfbb5da1e08a72accd3e09e418f41f5da68bc35c.svg new file mode 100644 index 00000000..6e27ec9e --- /dev/null +++ b/images/latex/bfbb5da1e08a72accd3e09e418f41f5da68bc35c.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/c647d1f7783f27d9360693a31748cc128456e0db.svg b/images/latex/c647d1f7783f27d9360693a31748cc128456e0db.svg new file mode 100644 index 00000000..ebc50c59 --- /dev/null +++ b/images/latex/c647d1f7783f27d9360693a31748cc128456e0db.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/cab51098777fc55c4c58f3e73efc7c9cdeb10111.svg b/images/latex/cab51098777fc55c4c58f3e73efc7c9cdeb10111.svg new file mode 100644 index 00000000..6e1cb97e --- /dev/null +++ b/images/latex/cab51098777fc55c4c58f3e73efc7c9cdeb10111.svg @@ -0,0 +1,190 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/cb66f7e99e6bac98e0a761599814ba714db7dd6b.svg b/images/latex/cb66f7e99e6bac98e0a761599814ba714db7dd6b.svg new file mode 100644 index 00000000..37330f8f --- /dev/null +++ b/images/latex/cb66f7e99e6bac98e0a761599814ba714db7dd6b.svg @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/d16c67a21b318295729cc2b9bd55a30e40e7e981.svg b/images/latex/d16c67a21b318295729cc2b9bd55a30e40e7e981.svg new file mode 100644 index 00000000..1de8932e --- /dev/null +++ b/images/latex/d16c67a21b318295729cc2b9bd55a30e40e7e981.svg @@ -0,0 +1,282 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/d92a259e763a4af2e1de7835ac45dc6f3b564014.svg b/images/latex/d92a259e763a4af2e1de7835ac45dc6f3b564014.svg new file mode 100644 index 00000000..c6a3dfd2 --- /dev/null +++ b/images/latex/d92a259e763a4af2e1de7835ac45dc6f3b564014.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/e998783864c533514df9bda833f68b01b7a78aa6.svg b/images/latex/e998783864c533514df9bda833f68b01b7a78aa6.svg new file mode 100644 index 00000000..f20e1a1d --- /dev/null +++ b/images/latex/e998783864c533514df9bda833f68b01b7a78aa6.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/latex/ea8a9fd68d0f0723511dfad29d5dae730c18ddbe.svg b/images/latex/ea8a9fd68d0f0723511dfad29d5dae730c18ddbe.svg new file mode 100644 index 00000000..00d97e43 --- /dev/null +++ b/images/latex/ea8a9fd68d0f0723511dfad29d5dae730c18ddbe.svg @@ -0,0 +1,289 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/stylesheets/figure.less b/stylesheets/figure.less index 41b7edda..2c77b174 100644 --- a/stylesheets/figure.less +++ b/stylesheets/figure.less @@ -18,6 +18,7 @@ figure { &:focus { border: 1px solid grey; + outline: none; } } diff --git a/stylesheets/note.less b/stylesheets/note.less new file mode 100644 index 00000000..1eafb537 --- /dev/null +++ b/stylesheets/note.less @@ -0,0 +1,11 @@ +div.note { + font-size: 90%; + margin: 1em 2em; + padding: 1em; + border: 1px solid grey; + background: rgba(150,150,50,0.05); + + h1,h2,h3,h4,h5,h6,p { margin: 0; padding: 0; } + p { margin: 1em 0; } + div.MathJax_Display { margin: 1em 0; } +} diff --git a/stylesheets/section.less b/stylesheets/section.less index 1915f267..9183ae06 100644 --- a/stylesheets/section.less +++ b/stylesheets/section.less @@ -22,14 +22,4 @@ section { } } -div.note { - font-size: 90%; - margin: 1em 2em; - padding: 1em; - border: 1px solid grey; - background: rgba(150,150,50,0.05); - - * { margin: 0; padding: 0; } - p { margin: 1em 0; } - div.MathJax_Display { margin: 1em 0; } -} +@import "note.less";