[HN Gopher] Morphing Arbitrary Paths in SVG
       ___________________________________________________________________
        
       Morphing Arbitrary Paths in SVG
        
       Author : vg_head
       Score  : 40 points
       Date   : 2024-06-07 19:55 UTC (1 days ago)
        
 (HTM) web link (minus-ze.ro)
 (TXT) w3m dump (minus-ze.ro)
        
       | tobr wrote:
       | Nice, fancy approach. The stupid simple approach I've used is to
       | sample each path with path.getPointAtLength() at an appropriate
       | resolution, and use that to approximate the paths with many short
       | straight lines segments which are trivial to interpolate between.
        
         | jahewson wrote:
         | Microsoft's WPF does this and then applies a bezier recovery
         | algorithm to (approximately) get the curves back.
        
       | krogue wrote:
       | The astral renderer released as open source on
       | https://github.com/InVisionApp/astral-renderer does all sorts of
       | path morphing.
       | 
       | It is a C++ library, builds for native (MacOS, Linux and MS-
       | Windows via msys2/ming2 and WebAssembly). It also included a
       | some-what user hostile demo to allow one to make their own
       | animated paths (and save them and load them).
       | 
       | As an example try running
       | 
       | ./create_animated_path-release load
       | demo_data/animated_path/example_insane.bin
       | 
       | after you build it for release.
       | 
       | If you download the SVG-Tiger (say from
       | https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscr...)
       | you can see it animate an SVG to its reflection too:
       | 
       | ./svg-release file ./Ghostscript_Tiger.svg reflect_direction_x 1
       | reflect_direction_y 1
       | 
       | The library is not really worked on at all since I (the author)
       | left InvisionApp quite some time ago; that and InvisionApp
       | announced that they are shutting down by the end of 2024.
       | 
       | Because it targeted WebGL2 (which is jut GLES 3.0) it could not
       | use compute so some portions of how path filling are handled
       | become CPU bound instead of GPU bound once the GPU is too
       | powerful; a Mac-Mini with an M1 was generally the sweet spot.
        
       | nico wrote:
       | Very cool effect
       | 
       | Is there a basic JS library to do something like this by giving
       | it two image paths via a property of an html tag? (and then the
       | library automatically replacing the html element with an
       | animation)
       | 
       | For example:
       | 
       | <div x-img-1="img1.svg" x-img-2="img2.svt">default content to
       | replace with animation</div>
       | 
       | Extra bonus point if it works on the background image of an
       | element, so that a whole page might have an animated svg
       | background
        
       | Etherlord87 wrote:
       | no, no, no, no, no, no....
       | 
       | Look at the heart to star morphing. How can you call it a "very
       | cool effect"?! It's so damn ugly. It existed back in the day of
       | Macromedia Flash 4 (maybe earlier), called shape tweening. Except
       | there, you could use tween hints to control the transition.
       | 
       | Try this instead: look at the pairs of nearest points, take a
       | heap sort of like 4 best matching pairs of points, and from those
       | points traverse the curves, resampling the paths with less
       | resolution. Now instead of interpolating positions, interpolate
       | angles. This way the curves will naturally deform, instead of
       | line segments passing through each-other.
        
         | vg_head wrote:
         | Always open to suggestions! I don't claim this to be any kind
         | of novel method, or even a "good method". It's just an
         | explanation of one way to do it, which is (IMO) relatively easy
         | to understand, and implement.
         | 
         | When researching about this, I didn't find a lot of writing.
         | Macromedia definitely had this a long time ago, but I don't
         | think you can look up how it was implemented. Not to my
         | knowledge, at least.
         | 
         | Do you have an example of the algorithm you describe? Or a more
         | detailed explanation? I don't quite get how it would work from
         | what you've described.
        
       ___________________________________________________________________
       (page generated 2024-06-08 23:00 UTC)