A lot of the engineering math associated with splines (NURBs) and surface approximations came from Citroen, Peugeot and Renault, the car makers, in the mid-20th century. I read a great book on this back in the 80's and can't remember the name. It was about the early days of CAD and its origins.
Like, the control points on splines were called "ducks", which were weights attached to spring steel suspended from the ceiling of the studio, which caused the steel to bend into particular shapes computed mathematically beforehand by the design engineers. These curves were used to guide model making. It was a fascinating book.
Historic boat-building has little to do with nurbs or Bézier curves.
It is true that a boat is a curved shape (as were cars or aeroplanes before the mathematical models were devised) but the construction is quite different. To state the obvious, there are no control points. Instead you get some cross-sections for various different planes, then scale it up and manually try to achieve G2 continuity by comparing the points described in multiple places in the plan (ie in different cross sections from different but intersecting planes), adjusting them, and springing batons to create curved lines. You get different shapes depending on how thick/springy your baton is. Once more of the boat is built, the process continues with adjustments and baton-springing to try to ensure that curvature is continuous and it’s derivative is not too large.
But these plans would traditionally be produced by starting with a scale model for half the boat (often this model would be scaled up straight into the boat without plans in between). And traditional boat building (say 100 years ago) would often not be particularly true to the plans anyway, treating them much more as a guide (a case where this matters more is some of the traditional steel shipbuilding in Scotland where the yards were too small so boats were built in two halves then perfectly joined together at the end).
Now compare this to the OP which is about various mathematical models for curves and surfaces, and the comments above which talk about the history of those models. I think the automaker usage described above was about the problem of going from the computer-described curves to the real world and I guess CNC at the time couldn’t do it properly (you surely aren’t going to CNC-mill a car model out of a massive block of metal) hence transforming a computer description into something suitable for a physical model—fixed lengths of spring steel plus weights. Spring steel sounds a bit like springing batons but I think that is where the connection ends and I think this connection has little to do with the rest of this reply chain.
Though to be honest I’m not particularly sad that you posted it.
Yes, and citroen used those same splines like boat builders, but they developed mathematical models based on those physical splines so that computers could draw and execute accurate physical items. That's what grandparent comment is about.
The whole series is great and he releases videos every two weeks. The shop in that video he was able to use thanks to a nice couple who own it. He's since had to move the boat as a neighbor complained about him and he's in the Port Townsend shipyard.
To be specific on the history Paul De Casteljau worked it our first in 1959 while working at Citroen. Not long after in the early 60s Pierre Bézier worked out the same thing at Renault independently and Bézier curves are named in his honor.
In computer software, bezier curves have always been common in 2d desktop publishing (fonts, adobe illustrator and its predecessors etc.) but 3d software had an ambivalent relationship where animation software (3DS-max etc.) always used them but games avoided them due to higher computation time than straight meshes, hence lower framerates. Of course this is changing now.
Paul de Casteljau described Bézier curves before Pierre Bézier, and in the modern form (a cage of control points). Bézier defined them later, as a point and offset vectors. de Casteljau's algorithm is still used. Bézier is dead. de Casteljau lives. He was recently granted a Bézier Award.
Gerald Farin has written many books, articles, publications on Computer-Aided Geometric Design (CAGD) stretching back a long way, here's a sample of books on Amazon: https://www.amazon.com/Books-Gerald-Farin/s?rh=n%3A283155%2C... ... had a stint at Mercedes-Benz
Not sure about the specific text the parent had in mind but "Principles of Interactive Computer Graphics" by Newman and Sproull (1979, but I bought it in '81 in the student edition and it influenced me a lot in my youth) made a bit of the connection with Renault in the chapter on Bezier Curves - many of its other examples of advanced graphics (at the time) were on flight simulators and such built by Evans and Sutherland, where the "Evans" was one of Alan Kay's mentors at the University of Utah.
And "Sutherland" was Ivan Sutherland, who created Sketchpad in 1963, and is credited to have pioneered the field of CAD, 3D graphics in general, immersive media and the modern GUI.
These animated cases are an incredible learning resource. A picture is worth a thousand words but a cool animation is worth a thousand pictures.
I spent years repairing IBM rotating chain mainframe printers (1403) in the field in the 80s, and I never really understood what I was doing. When I saw Ken Shirriff's animation of how hammer timing works, I instantly got it.
Thanks! That animation was mainly to help me understand the chain printer timing myself. If it helps anyone else, that's a bonus :-)
The quick summary is that the characters are on a rotating chain, and the printer has 132 hammers, one for each column. When the character lines up with the column the hammer fires. Thus, a whole line is printed very fast.
This sounds straightforward, but the implementation is surprisingly tricky to make it optimized. The complicated part is the vernier spacing between the chain and the hammers, so one hammer lines up at a time, and this timing is synchronized with the core memory access speed so the computer can check the character in the print buffer at that position at the right time.
I have happy memories of printing lines of HHHHHH characters and tweaking hammer timings to get each character to print on both sides. Not to mention getting squirted from hot hydraulic fluid.
Well, not really happy come to think of it :)
If you've had any experience Ken with 3890 check sorters, those were true electromechanical marvels.
I guess this site should be sent to anybody saying javascript should be blocked in web browsers... In the end whether a technology is used to track and exploit or educate and delight is entirely up to us.
Aren't most things neatly placed in <canvas> tags? Not to mention that it's basically all some form of web GL, which could avoid JS pretty easily is it wanted to these days.
What we want blocked isn't all of javascript, it's some of the browser APIs.
You definitely can’t use canvas (or any DOM API) without JS. The idea of using WebAssembly for WebGL (or canvas via whatever JS bridge) almost certainly won’t satisfy a large portion of the no-JS crowd, whose opposition to JS is opposition to the browser as an application platform generally.
The "no js" crowd isn't about language wars rather client side programmability. As such WASM is only a superset for this conversation, not an alternative.
Bartosz if you are here (username doesn't seem like it) how long does an article like this take to make? Looking a bit deeper and seeing how there are 10k LOC just in curves.js, and the curves.js seems custom for this, I'd guesstimate 1-3 months of fulltime work.
In any case, thank you for these incredible works of art and science! I had only seen a couple before so I'll have a deep look into the others!
This is so cool. It's well written and engaging. Good balance between text and interactive graphics. More learning texts should be this way.
The only minor thing I might add is some "sectioning", it's pretty long as a single linear evolution.
What would be cool in a very meta way, is if someone wrote the "this is how this kind of page is built", layering up in the same progressive way, that broke down the different pieces of JS, CSS and HTML.
This is amazing. I’m taking a class in computational geometry currently, and this single article better explains many of the concepts covered than the professor, textbook, or any resources I’ve found online. The explanation of B Spline Basis functions is particularly useful.
ASK HN COMMENT: Can anyone here point to / have anything to add on the mathematics of defining curved surfaces with greater than 4 edges?
Most software requires you to define patches with 3 or 4 edges, in some cases the natural curves you would want to model create areas of 5 or more sides.
I have been NURBS modelling professionally for a while, the way >4 sided curved surfaces are usually done is by bulding a <=4 sided surface and then intersecting it with another surface to trim a corners away. So techically most 5, 6 etc sided NURBS surfaces you see in the wild are just 4 sided surfaces with part of the surface hidden.
Awesome. But. I didn't like the part where a 3D surface with linear interpolation was turned into a 2-D quadratic by placing 2 control points on top of each other. Yes, the interpolation formula becomes the same as a 2nd order Bezier, but I'm not sure the folding of the 3d surface like that was necessary. I though the author was going to show something new that I hadn't seen before, but soon ended up using the repeated-interpolation to describe higher order curve. That one part seems like a distraction to me.
An excellent exposition! This is the way mathematics should be taught.
This is a great explanation of Gaussian curvature and Bezier curves, splines, and patches, B-Splines, NURBS, and subdivision surfaces. It reads like a story, and nothing is introduced without the reader having an understanding why it's needed, what problem it solves, and how. One thing I wish was mentioned (in the final notes, perhaps):
The surfaces formed by dragging lines in space are called Ruled Surfaces, and have many interesting applications in fields ranging from pure math to architecture[1].
If you have ever seen string art in two or three dimensions[2], it's the same thing.
Hyperboloid[3] is an example of particular importance, as it allows for building light, structurally sound structures - particularly, towers and domes[4].
You have walked up a Helicoid[5] if you ever went up or down a spiral staircase[6]. This would give you an intuition about the seeming paradox of having a curved surface made out of straight lines.
The Mobius Strip[7] is a ruled surface of a special kind: it only has one side (an ant crawling on a Mobius strip would eventually walk over both sides of the piece of paper it was made from, without ever touching the boundary).
It has always surprised me just how much complexity one can get out of one simple rule. But that's why math is interesting :)
Worked on implementing such functions as part of larger project to mimic CATIA in Xenix system. I was and still fascinated with computer graphics and it was a dream project to work straight out of school. At that time we relied heavily on the computer graphics book by Foley et. al. It should be still a comprehensive book for someone trying to wet his feet and beyond in computer graphics.
For those that enjoy this style of article, Amit Patel's Red Blob Games site[0] has similarly well-written and interactive articles, mostly regarding pathfinding and map generation in games.
He also wrote an article[1] about how he creates the interactive elements of these articles, and a lot of "background" information about the articles on redblobgames.com can be found on his other blog[2].
This guy, I did not even open the post yet I know what to expect. I don’t know where he works and what’s his expertise but this is the man, I think his blog posts are 100x better than Apple product pages and I can only assume small army works on the latter. Mister Ciechanowski, thank you. I love you.
Woah! Superb post! It takes me back to my 3D modeling days in Maya, and the options at the time (10+ years ago) were NURBS and Sub-D surfaces. Now it's all just millions of polygons because why not. I mostly code now and got into math after that so I thoroughly enjoyed this lecture.
So, in another post I said there is ALWAYS another layer... and here we are... all these curves are a new layer added between the days of character generator ROMs feeding a text screen, and our GUI present.
So beautifully demonstrated and explained. Thanks for posting this!
It would be interesting to connect things like Bezier patches with constructive solid geometry. So that by recognizing the curves in the surfaces and combinations of them you could then go to a more compact semantic representation.
It could be done, but like bezier curves, bezier splines and nurbs can be self-intersecting, which makes finding intersection points non-trivial. Representing objects with surfaces is called BREP (Boundary REPresentation), but CSG (Constructive Solid Geometry) is much easier when you are representing shapes with solids. In fact, typically csg on vertexes is done by treating each vertex as half-solid (one side of space is solid, other is not) and then combining them into single solid. When your dividing shape can self-intersect you can have two independent solids which wreaks havoc on equations. Some newer CSG systems use signed distance functions now, which represent 3d shapes mathematically and for many cases it works wonderfully without nurbs.
bezier curves helped me connect simple (geometric) ideas like repeated middles to polynomials.
it's a crime that kids don't get to see that connection, it's as fun as profound (and it blows every lesson about solving quadratic polynomials with a closed form solution out of the water IMO)
Like, the control points on splines were called "ducks", which were weights attached to spring steel suspended from the ceiling of the studio, which caused the steel to bend into particular shapes computed mathematically beforehand by the design engineers. These curves were used to guide model making. It was a fascinating book.