[HN Gopher] Curves and Surfaces
       ___________________________________________________________________
        
       Curves and Surfaces
        
       Author : todsacerdoti
       Score  : 828 points
       Date   : 2021-11-02 16:14 UTC (1 days ago)
        
 (HTM) web link (ciechanow.ski)
 (TXT) w3m dump (ciechanow.ski)
        
       | miki_tyler wrote:
       | 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.
        
       | rkhacker wrote:
       | 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.
        
       | phkahler wrote:
       | 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.
        
       | aidenn0 wrote:
       | Remember, curves are more computationally expensive than straight
       | lines...
       | 
       | It's the law of spline demand.
        
         | pmdulaney wrote:
         | Hee, hee, hee!
        
       | Lammy wrote:
       | > "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
        
       | franciscop wrote:
       | 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!
        
         | 123pie123 wrote:
         | fantastic - many thanks to Bartosz if you're reading this
        
         | [deleted]
        
         | askytb wrote:
         | 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"
        
           | gunshai wrote:
           | God damn that is shorter than expected. Those little drawing
           | examples were very slick.
        
         | aceazzameen wrote:
         | These really are incredible. Not only from an art and science
         | perspective, but also an engaging educational user experience.
         | He's a brilliant teacher!
        
         | zbtaylor1 wrote:
         | These are incredible, I need more!
        
       | ilaksh wrote:
       | 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.
        
         | yetihehe wrote:
         | 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.
        
       | zestyping wrote:
       | 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.
        
       | [deleted]
        
       | hld wrote:
       | This is really good - I'd love to see an article just about how
       | he made those mini-apps.
        
       | MH15 wrote:
       | 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.
        
       | proc0 wrote:
       | 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.
        
       | kruxigt wrote:
       | I find it amazing that this runs so smooth compared to 99% of the
       | web. It is in my experience typical that a guy of this caliber is
       | also more skilled than 99% of people in a field he's not
       | specialised in.
        
       | jcun4128 wrote:
       | Always like the interactive parts, canvas witchcraft
        
       | b212 wrote:
       | 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.
        
       | WhitneyLand wrote:
       | This kind of immense effort that's put into making concepts easy
       | to understand is greatly appreciated.
        
       | SavantIdiot wrote:
       | 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.
        
         | jacobolus wrote:
         | The use of such splines comes earlier from boat building.
         | 
         | The process looks like:
         | https://www.youtube.com/watch?v=oKJagvumvCI
        
           | dan-robertson wrote:
           | Historic boat-building has little to do with nurbs or Bezier
           | 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.
        
             | jacobolus wrote:
             | 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.
        
               | yetihehe wrote:
               | 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.
        
           | SavantIdiot wrote:
           | I didn't know that; that's a great video, thanks! I'm crazy
           | jealous of his workshop.
        
             | jorts wrote:
             | 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.
        
         | yig wrote:
         | Paul de Casteljau described Bezier curves before Pierre Bezier,
         | and in the modern form (a cage of control points). Bezier
         | defined them later, as a point and offset vectors. de
         | Casteljau's algorithm is still used. Bezier is dead. de
         | Casteljau lives. He was recently granted a Bezier Award.
         | 
         | Sources:
         | 
         | http://mae.engr.ucdavis.edu/~farouki/bernstein.pdf Wikipedia
        
         | nwatson wrote:
         | 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)
        
         | twelvechairs wrote:
         | 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 Bezier worked out the same thing at Renault
         | independently and Bezier 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.
        
         | agumonkey wrote:
         | People should watch the UNISURF system used in those days
         | 
         | https://www.youtube.com/watch?v=c0_a6r2JaWQ
         | 
         | they'd be surprised
        
         | bmitc wrote:
         | If you can remember the name of that book, I'd love to know it!
        
           | nigel_bree wrote:
           | 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.
        
             | Naracion wrote:
             | 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.
        
       | Grustaf wrote:
       | Probably the best interactive introduction to Bezier paths you'll
       | see today. Also check out his other posts!
        
       | ted_dunning wrote:
       | As an example of how higher-order programming can simplify
       | splines, see: https://discourse.julialang.org/t/seven-lines-of-
       | julia-examp...
        
       | [deleted]
        
       | travisgriggs wrote:
       | 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.
        
       | streamofdigits wrote:
       | 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.
        
         | nixpulvis wrote:
         | 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.
        
           | eyelidlessness wrote:
           | 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.
        
           | Kiro wrote:
           | How would WebGL work without JavaScript? Also have a hard
           | time seeing how the input could be handled without JS.
        
             | nixpulvis wrote:
             | 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
        
               | zamadatix wrote:
               | 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.
        
               | [deleted]
        
               | Kiro wrote:
               | No, you're talking about something completely different,
               | so saying "what we want" and "it's all about" is simply
               | incorrect.
        
               | bigbillheck wrote:
               | > https://webassembly.org/
               | 
               | How is that any better than 'javascript'?
        
           | streamofdigits wrote:
           | 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
        
         | nyanpasu64 wrote:
         | JavaScript being enabled should be the exception, not the rule.
        
           | amelius wrote:
           | I try to visit only quality websites, like the article's.
           | Enabling JS on every website I visit seems backward.
        
       | mikewarot wrote:
       | 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!
        
       | agumonkey wrote:
       | 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)
        
       | Sillzen wrote:
       | 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/
        
       | monkeycantype wrote:
       | 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.
        
         | websg-x wrote:
         | Catmull-Clark subdivision surface.
        
         | atoav wrote:
         | 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.
        
       | wetmore wrote:
       | Simply fantastic! This is really impressive work and very clear
       | too.
        
       | romwell wrote:
       | 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
        
         | ensiferum wrote:
         | Thanks for these!
        
       | jbluepolarbear wrote:
       | 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 Bezier curves. Really
       | cool: https://m.youtube.com/watch?v=aVwxzDHniEw
        
         | lkuty wrote:
         | Really liked this one on Bezier curves: http://jamie-
         | wong.com/post/bezier-curves/
        
       | abraae wrote:
       | 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
        
         | kens wrote:
         | 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.
        
           | abraae wrote:
           | 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.
        
             | kens wrote:
             | 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.
        
       ___________________________________________________________________
       (page generated 2021-11-03 23:02 UTC)