Curves and Surfaces(ciechanow.ski)
ciechanow.ski
Curves and Surfaces
https://ciechanow.ski/curves-and-surfaces/
71 comments
The use of such splines comes earlier from boat building.
The process looks like: https://www.youtube.com/watch?v=oKJagvumvCI
The process looks like: https://www.youtube.com/watch?v=oKJagvumvCI
I didn't know that; that's a great video, thanks! I'm crazy jealous of his workshop.
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.
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.
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.
Traditional boat builders obviously did not employ piecewise-rational parametric curves with off-curve control points.
But they did use physical splines to draw smooth curves long before car/airplane designers.
But they did use physical splines to draw smooth curves long before car/airplane designers.
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.
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.
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.
People should watch the UNISURF system used in those days
https://www.youtube.com/watch?v=c0_a6r2JaWQ
they'd be surprised
https://www.youtube.com/watch?v=c0_a6r2JaWQ
they'd be surprised
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.
Sources:
http://mae.engr.ucdavis.edu/~farouki/bernstein.pdf Wikipedia
Sources:
http://mae.engr.ucdavis.edu/~farouki/bernstein.pdf Wikipedia
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
(edit: Mercedes-Benz)
(edit: Mercedes-Benz)
If you can remember the name of that book, I'd love to know it!
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.
http://ibm-1401.info/KenShirriff-1403Animation.html
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.
http://ibm-1401.info/KenShirriff-1403Animation.html
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.
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.
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 don't have any experience with check sorters, but I do have experience with replacing hydraulic fluid in the printer :-)
The museum in Binghamton, NY has an IBM 1255 check sorter, which is puny in comparison to the 3890, which is a long, long, long machine.
The museum in Binghamton, NY has an IBM 1255 check sorter, which is puny in comparison to the 3890, which is a long, long, long machine.
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.
JavaScript being enabled should be the exception, not the rule.
I try to visit only quality websites, like the article's. Enabling JS on every website I visit seems backward.
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.
What we want blocked isn't all of javascript, it's some of the browser APIs.
How would WebGL work without JavaScript? Also have a hard time seeing how the input could be handled without JS.
https://webassembly.org/
Again, it's all about the interface the browser provides. They could decide to remove this API for example: https://developer.mozilla.org/en-US/docs/Web/API/History
Again, it's all about the interface the browser provides. They could decide to remove this API for example: https://developer.mozilla.org/en-US/docs/Web/API/History
> https://webassembly.org/
How is that any better than 'javascript'?
How is that any better than 'javascript'?
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.
No, you're talking about something completely different, so saying "what we want" and "it's all about" is simply incorrect.
[deleted]
Haven't even started exploring everything (hope to find the time to do so), but in random dive I see lots of handcrafted js
https://ciechanow.ski/js/gears.js
https://ciechanow.ski/js/gears.js
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.
I find these play-with me mini-apps incredibly useful, a technique used by the author Bartosz in other articles:
https://ciechanow.ski/naval-architecture/
https://ciechanow.ski/internal-combustion-engine/
https://ciechanow.ski/cameras-and-lenses/
https://ciechanow.ski/gears/
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!
https://ciechanow.ski/naval-architecture/
https://ciechanow.ski/internal-combustion-engine/
https://ciechanow.ski/cameras-and-lenses/
https://ciechanow.ski/gears/
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!
He answered that here: https://twitter.com/BCiechanowski/status/1387790984356917249
For the internal combustion engine his response was: "I started working on it around two months ago on most weekends and many weekday evenings"
For the internal combustion engine his response was: "I started working on it around two months ago on most weekends and many weekday evenings"
God damn that is shorter than expected. Those little drawing examples were very slick.
These really are incredible. Not only from an art and science perspective, but also an engaging educational user experience. He's a brilliant teacher!
His posts are so unique, I after reading the first few paragraphs I knew who created the page without looking at the URL before ;-)
[deleted]
These are incredible, I need more!
fantastic - many thanks to Bartosz if you're reading this
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.
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.
Curves and Surfaces was my favorite class in college and I’ve tried to apply it where ever possible.
I recommend this video from Freya Holmer on Bézier curves. Really cool: https://m.youtube.com/watch?v=aVwxzDHniEw
I recommend this video from Freya Holmer on Bézier curves. Really cool: https://m.youtube.com/watch?v=aVwxzDHniEw
Really liked this one on Bezier curves: http://jamie-wong.com/post/bezier-curves/
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.
Really, really beautiful work. It's an entire course on 2-D and 3-D modelling that takes you all the way from polygons to subdivision surfaces.
If you appreciate Bartosz’s work, please consider supporting his Patreon: https://www.patreon.com/ciechanowski
(I’m adding this because he’s too modest about the quality of his work & solicitation. I’m happy to solicit for him.)
(I’m adding this because he’s too modest about the quality of his work & solicitation. I’m happy to solicit for him.)
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.
Catmull-Clark subdivision surface.
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.
This is really good - I'd love to see an article just about how he made those mini-apps.
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 :)
[1] https://en.wikipedia.org/wiki/Ruled_surface
[2] https://www.guidepatterns.com/wp-content/uploads/2015/01/3D-...
[3] https://polyhedr.com/hyperboloid-net.html
[4] https://en.wikipedia.org/wiki/Hyperboloid_structure
[5] https://en.wikipedia.org/wiki/Helicoid
[6] https://www.architectureartdesigns.com/16-elegant-modern-spi...
[7] https://en.wikipedia.org/wiki/M%C3%B6bius_strip
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 :)
[1] https://en.wikipedia.org/wiki/Ruled_surface
[2] https://www.guidepatterns.com/wp-content/uploads/2015/01/3D-...
[3] https://polyhedr.com/hyperboloid-net.html
[4] https://en.wikipedia.org/wiki/Hyperboloid_structure
[5] https://en.wikipedia.org/wiki/Helicoid
[6] https://www.architectureartdesigns.com/16-elegant-modern-spi...
[7] https://en.wikipedia.org/wiki/M%C3%B6bius_strip
Thanks for these!
[deleted]
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.
Always like the interactive parts, canvas witchcraft
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].
[0] https://www.redblobgames.com/
[1] https://www.redblobgames.com/making-of/line-drawing/
[2] https://simblob.blogspot.com/
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].
[0] https://www.redblobgames.com/
[1] https://www.redblobgames.com/making-of/line-drawing/
[2] https://simblob.blogspot.com/
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.
Probably the best interactive introduction to Bezier paths you'll see today. Also check out his other posts!
As an example of how higher-order programming can simplify splines, see: https://discourse.julialang.org/t/seven-lines-of-julia-examp...
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.
This kind of immense effort that’s put into making concepts easy to understand is greatly appreciated.
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!
So beautifully demonstrated and explained. Thanks for posting this!
[deleted]
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.
I'm knee deep building a feature/tool to model stitches and I have nightmares about it, so I deeply appreciate all the work you have put on this.
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)
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)
> "a limited number of small points that you can drag around to change the mask’s shape"
"It's-a meee!" https://www.youtube.com/watch?v=Nn-Rz6lBGW0
"It's-a meee!" https://www.youtube.com/watch?v=Nn-Rz6lBGW0
Simply fantastic! This is really impressive work and very clear too.
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.