My name's Wray. This is my first time here.

Firstly, I like curves. I've been keeping a pet project for a long time that would implement a delightful new curve-interpolation algorithm named the Spiro Spline. The details of the Spiro are laid out in Raph Levein's PHD paper, "From Spiral to Spline: Optimal Techniques in Interactive Curve Design". Have a look at that first.

My problem is that I am a programmer and not a mathematician. Almost all my experience with math is algebraic (with loops). I've tried reading the paper a bunch of times but I'm flunking at understanding what's going on.

How can I get started on understanding what Levein is doing? (This question is open-ended and I apologize for that) I'm not as interested in the later parts of the paper where the spiro curves are converted to bezier curves. I'm just trying to understand his spiro function.

$$ spiro({ k }_{ 0 },{ k }_{ 1 },{ k }_{ 2 },{ k }_{ 3 })=\int _{ -0.5 }^{ 0.5 }{ { e }^{ i({ k }_{ 0 }s+\frac { 1 }{ 2 } { k }_{ 1 }{ s }^{ 2 }+\frac { 1 }{ 6 } { k }_{ 2 }{ s }^{ 3 }+\frac { 1 }{ 24 } { k }_{ 3 }{ s }^{ 4 }) } } $$

I'm not sure what $k$ is or why it has four sub-components. My best guess is that ${ k }_{ 1 }$ and ${ k }_{ 2 }$ are two nodes between which the curve in question lies, while ${ k }_{ 0 }$ and ${ k }_{ 3 }$ rest beyond those? My logic breaks down for a set of only two or three points.

I recognize the integral symbol, but I didn't learn about it in school. Moreover, I'm concerned that they don't translate well to programming languages. I've showed the paper to a few people that know this sort of stuff. They say things like "Oh, he's just using a bunch of pre-computed constants." What does that mean?

I do understand the concept of a function. For example, a Bezier/Casteljau spline takes multiple $(x,y)$ coordinates, a variable $t$ from $0$ to $1$ and returns a new $(x,y)$ coordinate that will be along that curve. Making the curve show up on the screen is as simple as running the function a bunch of times for $0$, $0.1$, $0.2$, ... $1$ and connecting the dots.

If I had bounty to hand out on math.stack, I totally would. I've been trying at this for a long time on my own. Any help, suggestions, links to tutorials, or anything else are welcomed and much appreciated. :)

Update 1 year later: I had a chance to meet Raph Levien in person. We geeked out about this and it was amazing. Funny enough, I'm still not quite sure I understand it all, but I did join Khan Academy and I'm determined to make sense of it this year.

  • $\begingroup$ Any progress since last update? If so, I'd be interested to hear it. Working on something that this question helped me with regarding mathematical equivalences between bezier splines and spiro contours. $\endgroup$
    – mpacer
    Nov 4 '15 at 8:20
  • $\begingroup$ Actually yes. @bubba had it 99% right, but left out some crucial details. Mainly though, k is curvature. Each k is a deeper derivative and used at less and less amounts toward determining how circle-like of a slice to get from the Euler spiral e^k $\endgroup$ Nov 6 '15 at 19:23
  • $\begingroup$ Raph told me that Beziers have curvature too. The Spiro is just different in that it uses that curvature on itself to maintain geometric continuity. One of the most elegant examples I found of this (which really helped things click) was an entry on Shadertoy: shadertoy.com/view/Mlf3zl $\endgroup$ Nov 6 '15 at 19:30

If you're a programmer, not a mathematician, you'd probably be better off reading the code, rather then the thesis. He provides both Python and Javascript versions.

But, to answer your question about the integral ...

Right after that equation, he explains what $k_0,k_1,k_2,k_3$ are. They are the curvature and its first three derivatives at the mid-point of the curve. More specifically, $k_0$ is the curvature at the mid-point, $k_1$ is the derivative of curvature with respect to arclength, $k_2$ is the second derivative of curvature with respect to arclength, and so on. He says that figuring out the shape of the desired curve requires calculation of this integral. Informally, if we know about curvature, and how fast it's changing, we should be able to determine the shape of the curve, right (though it's not easy). There are some worked examples later in chapter 8.

This is the most general form of the "spiral" curves the thesis considers. One important special case is when curvature is a linear function of arclength ($k_3=k_2=0$). This gives you the Euler spirals that are covered in chapter 6.

You might say that defining a curve by giving curvature derivatives at its mid-point is a pretty strange approach, and I'd tend to agree. This choice is just to make the subsequent math work out more nicely, it seems. These curvature values aren't used in the user interface -- they are just for computational purposes.

If you don't have much mathematical background, maybe you should start with a simpler approach to curve design. There are several much simpler approaches that give very nice results. One example is John Hobby's approach, which is discussed in section 4.7 of Levien's thesis.

  • $\begingroup$ I have had some success already in reading the code, but after a while I would get stuck wondering why things were happening. So thanks for the help. I definitely agree that this is maybe too hard for me right now, but I like the results of the Spiro so much that I want to keep trying. :) $\endgroup$ Apr 5 '13 at 21:05
  • $\begingroup$ Where can I find the js code? $\endgroup$ Dec 9 '18 at 20:44
  • 1
    $\begingroup$ @AntonBallmaier Search for libspiro or libspiro-js $\endgroup$
    – bubba
    Dec 10 '18 at 0:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.