8 ms·
Show HN: A new spline
- gus_massa 8y ago> For the impatient, click on the screenshot below to try the demo yourself. You should add a link to the demo in the word "demo" for the people like me that can't follow instructions :). I tried to drag the points in the screenshot instead of clicking it.
- raphlinus 8y agoDone, thanks for the suggestion.
- s1mon 8y agoYou might want to add some basic instructions somewhere too. I had to dig through the source to figure out what some of the keyboard and tool tricks are. Perhaps they are standard in Illustrator or some other tool, but double clicking, shift-clicking, option/alt-clicking, nudging etc... I only figured out by poking around the .js.
- eridius 8y agoSpeaking as someone who's never touched splines before, this looks pretty nice. I was able to very quickly reproduce the "a" from your screenshot using your demo.
- raphlinus 8y agoThanks, that's music to my ears! A major focus of this work was making a primitive that would be intuitive and that you could build a good UX around. Considering the nontrivial learning curve for Béziers, I think your report is significant.
- rntz 8y agoAlso as someone who's never touched splines before, I found it pretty difficult to replicate. The "a" from the screenshot looks fairly smooth everywhere (except possibly the upper-right outside curve), but I found that unless I got the positioning just right, I could run into some degree of "bumpiness". This may, of course, say more about me than about Raph's new splines :P. If I wanted to try Raph's prior work on spiro splines for comparison, is there some way to do that that's easier than learning to use Fontforge? (When I last tried Fontforge, it didn't seem to handle hi-DPI screens well...)
- archagon 8y agoThere's a downloadable demo here: https://levien.com/spiro/ https://levien.com/spiro/
- Jasper_ 8y agoThis looks really awesome. I'm curious, because I haven't seen much work built on top of Knuth and Hobby's "Most Pleasing Curve" as defined by Mathematical Typography [0] and Hobby's follow-up papers [1] [2] [3]. Has anybody investigated these? As far as I know they're just not very convenient to rasterize. [0] http://www.math.lsa.umich.edu/~millerpd/docs/501_Winter13/Knuth79.pdf http://www.math.lsa.umich.edu/~millerpd/docs/501_Winter13/Kn... [1] http://i.stanford.edu/pub/cstr/reports/cs/tr/85/1047/CS-TR-85-1047.pdf http://i.stanford.edu/pub/cstr/reports/cs/tr/85/1047/CS-TR-8... [2] http://ect.bell-labs.com/who/hobby/thesis.pdf http://ect.bell-labs.com/who/hobby/thesis.pdf [3] http://ect.bell-labs.com/who/hobby/87_2-04.pdf http://ect.bell-labs.com/who/hobby/87_2-04.pdf
- raphlinus 8y agoWell, there's my thesis :) There has been some work on this. Apple's Pages uses an implementation of the Hobby spline, demonstrating that it can be used in real consumer products. I think if you put these two side-by-side though, mine comes out quite a bit better; when you push the Hobby spline you get curvature extrema quite a distance from the control points, and mine doesn't do that. Hobby's work has of course been an inspiration for mine for a long time, and it holds up academically quite well too - it has just the right blend of practical and aesthetic considerations and theoretical analysis; his solver runs in linear time and there's a proof it always converges (as long as tension values are within a reasonable range). And of course there's the k-Curve work from Adobe. I think it is a step forward from Hobby in some ways (more robust) but a step back in others (it's not as smooth and most especially doesn't form true inflections).
- Ninjaneered 8y agoVery nice! I've used a spline tool in SolidWorks that I found useful and was hoping to find something outside of solid modeling that was similar and this seems to be it, super intuitive and clean! Probably not the use it was intended for, but I wonder if this could be used to improve imagemap polylines. I use Wikipedia's imagemap tool [0] and I wish the interface was like this (actually, I use a separate site [1] to generate the polyline values). [0] https://www.mediawiki.org/wiki/Extension:ImageMap https://www.mediawiki.org/wiki/Extension:ImageMap [1] http://maschek.hu/imagemap/imgmap/ http://maschek.hu/imagemap/imgmap/
- s1mon 8y agoIt would be great to be able to compare this with Béziers of arbitrary degree. Some people get frustrated with degree 3 Béziers, but you can do great things with degree 5, 6, 7, or even higher - and they're C^infinity internally. If you could add curvature combs to your demo it would help in evaluating what it can do. I can see from the curve itself that I can get pretty nice results, but occasionally I notice small wobbles that would be more obvious with a curvature plot. Is it possible with this type of curve to vary the weights of the tangent vectors?
- raphlinus 8y agoI'll add curvature combs in a future revision. I'll also point out that you can see a curvature plot of the underlying 2-parameter curve family by playing with beztoy.html in the linked github repo, which is one of the main ways I evaluated this. Higher degree Béziers illustrate the "curse of too many parameters." Yes, they're very expressive, and yes you can have very high degrees of continuity, but it's also easy to make very wiggly or lumpy curves. I don't know of anyone who uses them, certainly not for font design.
- s1mon 8y agoClass-A automotive surfacing (using Alias, ICEM, Catia, NX) is all done with higher degree Béziers. I use them all the time in SolidWorks for consumer and medical product design engineering. It’s certainly tricky to figure out how to manage Béziers, but with the right tools and some knowledge of the math, you can do amazing things. Using the sketcher constraint tools in the SolidWorks it’s possible to join higher degree Béziers with G3 tangency (or even higher). I also build approximate offset curves of the same degree using a modified version of Tiller and Hansen’s method (I keep the control polygon legs parallel, but I add constraints to control the offset distance of the curve at n-2 places along the curve). If I was doing font design, I’d love to have higher degree Béziers. Being able to make a sans-serif ‘S’ with single span curves would be great. Or lining up 3 control points on either end of the top of a lower case ‘n’ with vertical straight lines to have it be G3 would be nice.
- ttoinou 8y ago
- potiuper 8y ago"I intend to port to at least C++ so that it can be more easily integrated into real systems" - disregarding the implication that C++ is a more "real" system than Javascript what steps are necessary to make the numerical methods that are not perfect and if pushed hard will sometimes get a slightly wrong answer along with addressing not being able to make multiple subpaths required to draw font shapes?
- raphlinus 8y agoI tweaked the language, thanks for pointing that out. Obviously JavaScript is capable of very real systems and many of the potential applications of this work. Regarding the timeline, I'm hoping soon, but it's going to depend on where I want to take this codebase; I still haven't really decided, and it will depend in large part on what kind of interest I see. The multiple subpaths question is of course not a problem with the spline itself but whether the test app has a sophisticated enough document model to manage multiple path objects.
- spiralganglion 8y agoThis is very interesting! I'm mostly familiar with b-splines and NURBS and such, and there's some behaviour in this demo that I don't understand. If I create a round control point, and spin that point's handles around, sometimes the curve coming in and out of the point is a beautifully smooth tangent, coming in one side and out the other, and sometimes it forms a spike, doubling back on itself. Is there a term for that? Why does it happen? I find it fascinating and would like to learn more.
- raphlinus 8y agoIt's likely it could be reworked to not make those spikes. The reason it happens is tricky. The basic curve family (what you get when you don't add explicit tangents) has a π-periodicity in the angles. Essentially it cares about the slope of the tangent but not the signed direction, and reverses the sign as needed. The curvature blending uses the same family but the sign reversals don't always "make sense" in terms of producing a smooth result. It's not obvious it would be better, as what you'd get would be more "twisty," and it's also possible the twistiness would snap as you rotated the handles. So making a direction reversal might be one of the less visually objectionable ways to handle the problem. This is one of those "deep UX" questions I find fascinating.
- spiralganglion 8y agoMakes sense. Personally, I like it, though it does make the curve slightly less predictable.
- strainer 8y agoWhen the bar is turned through 360 degrees its adjustment effect seems to go through 2 complete cycles. A single ended adjustment line which begins perpendicular in a default orientation and goes through just 1 complete adjustment cycle when turned 360 might be easier to control and understand, even though it would be less like the familiar bezier tweak lines.
- jacobolus 8y ago
- pontifier 8y agoIt's interesting to me, to think about how curves like this can be useful in robotic path planning.
- hayd 8y agoWow Raph is pretty busy/productive: xi, druid, a his company and this.
- amelius 8y agoWhat is his company doing?
- raphlinus 8y agoIt's not really a company, just me, but I'm making a music video game. And yes, the last few months have been a burst of creativity, after something of a slump the first half of the year. Leaving Google and going out on my own has been good for me. Now, if only I had a source of income...
- pouta 8y agoLow-maintenance boring companies can generate a lot of income if done right. I would love to talk a bit more about this with you
- amelius 8y agoDid you ever think about doing a Kickstarter project? For example, the guy who is writing Prosemirror (an editor), started such a project, and was able to secure a source of income. https://www.indiegogo.com/projects/prosemirror#/ https://www.indiegogo.com/projects/prosemirror#/ You could start a bunch of these projects, see which one is funded first, and then focus all your energy on that project.
- tobr 8y agoThis looks great. I appreciate the article as an example of how the specifics of an algorithm impacts user experience. Far too often we think of user experience as being independent of the implementation, like it’s just a layer on top.
- hevi_jos 8y agoHello Ralph. It looks great but you should add some basic usage howto. It is obvious that you know how to use it, you created it, but other people do not. The first time I used it it was very frustrating because I only created circle handlers, and said: This is sh*t!! Then I close the window and looked back at the sample image and saw square pointers, so I said: There must be some key that creates square pointers. After trying again I discover it creates square handlers by default. This is the typical engineer mindset, after having spent years doing something they consider obvious what it is not. Read "The Design of everyday things" for more design concepts if you are interested.
- jacobolus 8y ago> This is the typical engineer mindset, after having spent years doing something they consider obvious what it is not. More charitably, this is the way all research prototypes work in any field. Production vector illustration packages hire a team of people who spend man-years of effort canvassing customers, collecting bug reports, adding features and affordances and refining the user interface, writing documentation, and so on. Someone making a research prototype where the UI per se was built in a few weeks is not going to have the same feature richness, level of polish, or clarity of outward-facing documentation. Give it some time.
- zengid 8y agoI just clicked around on it and figured it out in 10 seconds. Maybe you should not approach new things with prior assumptions.
- raphlinus 8y ago"The Design of Everyday Things" is a great book, I enjoyed it. Part of why I put it up with no instructions is to get feedback on how intuitive it is to use without any explicit instruction. I've gotten mixed response; some people seem to get it, others don't. So thanks for this bit of feedback. There's a basic help panel now.
- ratmice 8y agoThere is an odd mishap, when you are dragging one of the circle handlers, and drag outside of the gridded area, then through the center of the circle. It flips into a corner
- abainbridge 8y agoI'm up to page 9 on your thesis, and have already learned many things. Your "empirical testing of fairness" section is great. From your thesis: > Intuitively, curvature is the position of the steering wheel when driving a car along the curve. Therefore, G2 continuity is equivalent to the lack of jerks of the steering wheel I particularly like this analogy because I've worked simulating NPC cars in computer games and I found lack of G2 continuity of 3 Beziers annoying - the jerk of the steering wheel clearly put a sudden change of cornering forces through the suspension simulation which looked very unnatural.
- speps 8y ago> and solves most of the problems that held that back from wider popularity. > … > and is in JavaScript with a GPL license. If you want them to be widely adopted outside of research circles, you should avoid the GPL. Many companies would be interested in a curve like this but would avoid GPL just avoid any possible litigation. It's not great, and it's probably not a popular opinion I have but it's what I've seen from experience.
- TickleSteve 8y agoAgree, GPL effectively means non-commercial. Most companies won't touch GPL code with a barge-pole.
- detaro 8y agoWould you want to use code the author explicitly describes as not yet complete research-code and not for production commercially?
- CamperBob2 8y agoIf it doesn't belong in a commercial product, does it belong in Inkscape or OpenOffice?
- Fnoord 8y agoThat was previous millennium. We're in 2018 now.
- patrec 8y agoThis comment kinda rubs me the wrong way, especially since the author notes that I also want to preserve full ownership of the code so that I can do commercial licensing of code derived from it. If there are many companies that want a curve like this (which means it presumably took non-trivial time and skills to develop), maybe they should come to a commercial agreement with the author? What is it with pushing people to unpaid labour to make megacorps happy with some fuzzy notion of potential "wide adoption" as the only reward?
- CamperBob2 8y agoThe code is in a research repo... with a GPL license This seems like the sort of thing that LGPL is really well-suited for. Any reason for going with GPL? Not many people are going to want to GPL-infect an entire project just to adopt a new spline solver.
- rsp1984 8y agoJust reading your thesis: Very interesting stuff! Thanks for sharing it. Thinking about "fairness" of a spline: Intuitively I'd say a curve is "most fair" as compared to other curves when it minimizes the sum of squared centrifugal forces of a body moving along the path. In other words: The faster I can drive a car along the path the fairer the path :) Would such a definition make any sense?
- AnthonBerg 8y agoFor what it’s worth it makes beautiful sense to me. Both as a motorcyclist and also as someone who has thought a lot about splines. My favorite spline editor is the Bezigon tool in Macromedia Freehand of yore. It sprang to mind as I read the passages you wrote.
- raphlinus 8y agoThis is very similar to the "Minimum Energy Curve" fairness metric, which minimizes sum of of bending energy, which in turn is proportional to curvature squared. And, thanks to basic physics, curvature is proportional to the centripetal force given a constant velocity. The problem with MEC is that it tends to optimize for low tension; for inputs that are not well behaved, it sometimes optimizes for infinitely low tension, ie an infinitely long road. So there are other metrics, like Minimum Variation of Curvature, that work better for actual spline use, even though they have an energy metric that's "worse." These curves are absolutely useful for path planning. A lot of the literature on "clothoids" from a hundred years or so ago is on transition curves for railroads. The G2 continuity condition basically means that you never have to suddenly turn the steering wheel to follow the curve, it's always moving continuously.
- bsenftner 8y agoHaving written the TCB spline (Kochanek–Bartels spline) implementation for a few animation pipelines, I am curious what you see as the problems with the TCB spline? Having explicit controls for tension, continuity and bias feels pretty comprehensive and I'm not aware of animators unhappy with it.
- raphlinus 8y agoIt's very good, but I think the problem is "too many parameters." In some contexts that's fine (animators are used to it) but in others it might not be ideal. People don't use that spline for font design work; why? The Hobby spline has a tension parameter, which is said to be "very useful" in the paper, but when Apple adapted it for Pages, they left it out of the UI. Was that a mistake, or did they make an informed user experience tradeoff? (Incidentally, I believe tension is in there, as part of the illusion of extensibility, but deeply hidden) So whether this spline is better for, say, animation, is what I consider a fascinating research question. Hopefully putting it out there will start to get answers.
- bsenftner 8y agoI can't tell from your online demo if there is any control over the trade off between only dropping curve points where tangentially required verses even distances between curve points. (I'm sure there is some shorter term for that.) I remember a talented animator remarking to me how he had acceleration control with TCB Splines that allowed him to achieve the same curve shapes but with control where curve points are emitted, giving him timing controls for objects in motion. He liked using TCBs for everything.
- jacobolus 8y ago> Kochanek–Bartels spline YMMV, but the problem I have is that it generally makes ugly shapes unless you are very skilled/practiced with it and very careful about twiddling parameters, because the control parameters are based on the implementation details of the mathematical tool rather than directly on features of human perception. There’s basically a mismatch between human-centered goals and the mathematical model of those. As an analogy, you might think of it like trying to learn how to dance vs. learning how to make a puppet dance by manipulating a control bar with your fingers to pull on its strings. The latter involves more indirection, which makes it harder for novices to get approximately their desired result. For anyone unfamiliar with this tool, see the image in https://en.wikipedia.org/wiki/Kochanek%E2%80%93Bartels_spline https://en.wikipedia.org/wiki/Kochanek%E2%80%93Bartels_splin...
- theveloped 8y agoThis will be amazing for shape optimization. As it seems one can describe various shapes with very little control points and parameters. Furthermore the relation between the control points and the final spline is very well behaved and thus great for use in an optimization. Great work!
- jacobolus 8y agoWhat do you mean by “shape optimization”?
- theveloped 8y agoIt’s a field in engineering where optimization is used to optimize a engineering design for a certain purpose (e.g. a beam for stiffness). Topology optimization is the broader field that allows topological changes to the design (e.g. the addition or removal of nodes). These optimization’s often have a solution that first have to be interpreted by an engineer to turn it into a manufacturable design. A shape optimization performs optimization only of certain variables of a predefined design. The splines as described here seems to fit well for describing for instance sheet metal parts or cross-sections of beams.
- kazinator 8y agoI must say, that "a" looks good given the number of control points.
- person_of_color 8y agoI don't understand how is this different to somethigng in Inkscape?