3 ms·

Pomax (the author) here: for those wondering about what's different since last time this hit HN, this is a slowly-but-surely updating project that has been in t

Pomax (the author) here: for those wondering about what's different since last time this hit HN, this is a slowly-but-surely updating project that has been in the works since 2011. If you remember seeing it before: you're not wrong! But it will probably have been less content or less functionality than it is this time round =) The latest improvement is that the codebase now supports localization which means that if you're a dual (triple, etc) speaker and you want to help bring this content to people who don't speak English, now you can! Chinese and Japanese localizations are already underway (although it's a volunteer effort, much like the Primer itself, so progress is again steady, but slow) and currently cover the first 10 or so sections. For more details on the fine points of the build system and how much work it was to overhaul an "everything is assumed to be English, no l10n provisions have been made whatsoever" to "EASY to localize" (not just 'possible to', but 'easy'), hit up http://pomax.github.io/1489108158510/localization-is-hard http://pomax.github.io/1489108158510/localization-is-hard where I've blogged about the uplift and the tech choices I made. And on a less impressive note but certainly more useful for social sharing, the social share buttons now actually point to the section you're reading, so that future sections can be shared waaay easier. For the last six years, those things have just pointed to the base article URL and that is not very useful when you want to share the fact that you just read up on how to split a Bézier curve using matrix operations, or want to link to the B-Spline section all the way at the bottom of the Primer.

mxfh 10y ago
You're apparently part of the biannual State of SVG days on HN 2017: https://news.ycombinator.com/item?id=14155393 https://news.ycombinator.com/item?id=14155393 2015: https://news.ycombinator.com/item?id=10678652 https://news.ycombinator.com/item?id=10678652 2013: https://news.ycombinator.com/item?id=6470908 https://news.ycombinator.com/item?id=6470908
- TheRealPomax 10y ago
  Haha, that made my day, thanks! (it's only 10am atm, but that'll carry for a few hours yet)
- aidos 10y ago
  Excuse the pedantry: Biennial is every 2 years ;-)
  - TheRealPomax 10y ago
    Additional pedantry: while biennial does exclusively mean "once every two years", biannual is not strictly speaking wrong. However, quite inconveniently, like most "bi-[time span]" words, biannual can mean either twice a year or once every two years.
    - mxfh 10y ago
      I actually had it first with biennial, but thought but that would be the word for the event (like the italian Biennale) not the time interval, since it sounded weird as an adjective. Oh the ambivalence; yet listing the years should make the intent obvious. Also if you use search, there are some more high profile SVG related posts that don't follow that made up pattern.
dyarosla 10y ago
It's a truly great resource. Have you thought about the Primer for people who are newer to curves? For those unfamiliarized and looking to start adopting beziers, the Primer's layout, length and depth may be off-putting from a learning resource perspective. The layout makes it seem like you have to learn all of the parts in sequence which isn't the case. Depending on a person's use case, it could be that, for example, only 20% is applicable and found in sections 1-3, 17, 20-23, and could be learned without going through all the sections in-between. Someone totally new to beziers wouldn't know where to start making the distinction for which sections apply to them and give up entirely. My suggestion is, think you could create an "applications of beziers" page which lists common bezier use cases? eg. Draw a curved path. Animate using easing. Animate along a curve. Animate along a curve with an ease. Then link from there to only to the sections you'd need to learn and apply to get to that application? It would be infinitely more helpful to new learners. The Primer would then remain a great resource as a standalone. And the Applications page would be a great navigation and learning resource page for people looking to start.
- TheRealPomax 10y ago
  An interesting idea... hit up the github repo and we can discuss this idea in an issue - HN comments tend to easily get lost.
spi 10y ago
Very nice article! I've been willing to delve into Bézier curves for a while now, and this looks like an awesome reference to start. I'd just like to make an annoying mathematician comment on the beginning (paragraph 3): you might want to point out that the first definition you give of Bézier(n,t) is, for any n and t, nothing else than the constant function 1 (that, by the way, is an absolutely fine polynomial, unlike the statement above that if f(x) has no x then it's not a polynomial). You can see this by noting that it's nothing else than $((1-t)\cdot t)^n = 1^n = 1$. If you insist on being fancy, you can say that the i-th term in the sum is the probability of a discrete random variable X with binomial law being equal to i, so the sum over all i must be 1 (here the binomial law has parameters (n,t)). By the way, this last thing has the nice interpretation that each point of the Bézier curve is just the expected value of $p(X)$, where $p(0), \dots, p(n)$ are the points you are interpolating - by changing t you are just changing the parameter of the random variable.
- TheRealPomax 10y ago
  This depends on which definitions you work with. If you consider polynomials "any expression of \sum^n_{i=0}(c_i x^i) then sure, setting n=0 gets you "a polynomial that is a constant function". If you take polynomials to be "functions that are expressions of weighted terms" then constant functions are out, and the set of functions described by the previous summation contains, but is itself larger than, the set of possible polynomials.
vanderZwan 10y ago
BTW, since you mention the Catmull-Rom spline later on, it might be worth-while to mention it is proven that only centripetal CR splines will never form cusps and self-intersections: > In this paper we prove that, for cubic Catmull-Rom curves, centripetal parameterization is the only parameterization in this family that guarantees that the curves do not form cusps or self-intersections within curve segments. http://www.cemyuksel.com/research/catmullrom_param/catmullrom_cad.pdf http://www.cemyuksel.com/research/catmullrom_param/catmullro... (speaking as someone who gets slightly twitchy whenever he sees interpolated animations go bad)
- TheRealPomax 10y ago
  Please file this over on the repo - since we're dealing with CR/Bezier equivalence, there's technically nothing wrong with the fact that a CR spline might have a cusp if the corresponding Bezier does, too.
  - vanderZwan 10y ago
    True, it is not a technical bug, but it can be a visual one that the artist did not intend to have ;)
klunger 10y ago
I used this as a resource when I was studying geometric modelling, since your page was way more understandable than our course notes (http://www.uio.no/studier/emner/matnat/math/MAT-INF4160/h15/timeplan/index.html#FOR http://www.uio.no/studier/emner/matnat/math/MAT-INF4160/h15/...). It definitely helped with my comprehension and passing the course. So, thank you! Feature request: please expand the spline section or make a similar, separate primer on splines.
- TheRealPomax 10y ago
  Aw, that's awesome. I mean, not awesome that the course notes were inaccessible but if the material helped you pass a course, that's fantastic =)

mxfh 10y ago

You're apparently part of the biannual State of SVG days on HN 2017: https://news.ycombinator.com/item?id=14155393 https://news.ycombinator.com/item?id=14155393 2015: https://news.ycombinator.com/item?id=10678652 https://news.ycombinator.com/item?id=10678652 2013: https://news.ycombinator.com/item?id=6470908 https://news.ycombinator.com/item?id=6470908

TheRealPomax 10y ago
Haha, that made my day, thanks! (it's only 10am atm, but that'll carry for a few hours yet)
aidos 10y ago
Excuse the pedantry: Biennial is every 2 years ;-)
- TheRealPomax 10y ago
  Additional pedantry: while biennial does exclusively mean "once every two years", biannual is not strictly speaking wrong. However, quite inconveniently, like most "bi-[time span]" words, biannual can mean either twice a year or once every two years.
  - mxfh 10y ago
    I actually had it first with biennial, but thought but that would be the word for the event (like the italian Biennale) not the time interval, since it sounded weird as an adjective. Oh the ambivalence; yet listing the years should make the intent obvious. Also if you use search, there are some more high profile SVG related posts that don't follow that made up pattern.

dyarosla 10y ago

It's a truly great resource. Have you thought about the Primer for people who are newer to curves? For those unfamiliarized and looking to start adopting beziers, the Primer's layout, length and depth may be off-putting from a learning resource perspective. The layout makes it seem like you have to learn all of the parts in sequence which isn't the case. Depending on a person's use case, it could be that, for example, only 20% is applicable and found in sections 1-3, 17, 20-23, and could be learned without going through all the sections in-between. Someone totally new to beziers wouldn't know where to start making the distinction for which sections apply to them and give up entirely. My suggestion is, think you could create an "applications of beziers" page which lists common bezier use cases? eg. Draw a curved path. Animate using easing. Animate along a curve. Animate along a curve with an ease. Then link from there to only to the sections you'd need to learn and apply to get to that application? It would be infinitely more helpful to new learners. The Primer would then remain a great resource as a standalone. And the Applications page would be a great navigation and learning resource page for people looking to start.

TheRealPomax 10y ago
An interesting idea... hit up the github repo and we can discuss this idea in an issue - HN comments tend to easily get lost.

spi 10y ago

Very nice article! I've been willing to delve into Bézier curves for a while now, and this looks like an awesome reference to start. I'd just like to make an annoying mathematician comment on the beginning (paragraph 3): you might want to point out that the first definition you give of Bézier(n,t) is, for any n and t, nothing else than the constant function 1 (that, by the way, is an absolutely fine polynomial, unlike the statement above that if f(x) has no x then it's not a polynomial). You can see this by noting that it's nothing else than $((1-t)\cdot t)^n = 1^n = 1$. If you insist on being fancy, you can say that the i-th term in the sum is the probability of a discrete random variable X with binomial law being equal to i, so the sum over all i must be 1 (here the binomial law has parameters (n,t)). By the way, this last thing has the nice interpretation that each point of the Bézier curve is just the expected value of $p(X)$, where $p(0), \dots, p(n)$ are the points you are interpolating - by changing t you are just changing the parameter of the random variable.

TheRealPomax 10y ago
This depends on which definitions you work with. If you consider polynomials "any expression of \sum^n_{i=0}(c_i x^i) then sure, setting n=0 gets you "a polynomial that is a constant function". If you take polynomials to be "functions that are expressions of weighted terms" then constant functions are out, and the set of functions described by the previous summation contains, but is itself larger than, the set of possible polynomials.

vanderZwan 10y ago

BTW, since you mention the Catmull-Rom spline later on, it might be worth-while to mention it is proven that only centripetal CR splines will never form cusps and self-intersections: > In this paper we prove that, for cubic Catmull-Rom curves, centripetal parameterization is the only parameterization in this family that guarantees that the curves do not form cusps or self-intersections within curve segments. http://www.cemyuksel.com/research/catmullrom_param/catmullrom_cad.pdf http://www.cemyuksel.com/research/catmullrom_param/catmullro... (speaking as someone who gets slightly twitchy whenever he sees interpolated animations go bad)

TheRealPomax 10y ago
Please file this over on the repo - since we're dealing with CR/Bezier equivalence, there's technically nothing wrong with the fact that a CR spline might have a cusp if the corresponding Bezier does, too.
- vanderZwan 10y ago
  True, it is not a technical bug, but it can be a visual one that the artist did not intend to have ;)

klunger 10y ago

I used this as a resource when I was studying geometric modelling, since your page was way more understandable than our course notes (http://www.uio.no/studier/emner/matnat/math/MAT-INF4160/h15/timeplan/index.html#FOR http://www.uio.no/studier/emner/matnat/math/MAT-INF4160/h15/...). It definitely helped with my comprehension and passing the course. So, thank you! Feature request: please expand the spline section or make a similar, separate primer on splines.

TheRealPomax 10y ago
Aw, that's awesome. I mean, not awesome that the course notes were inaccessible but if the material helped you pass a course, that's fantastic =)