[HN Gopher] Draw SVG rope using JavaScript
___________________________________________________________________
Draw SVG rope using JavaScript
Author : stankot
Score : 677 points
Date : 2022-12-31 15:43 UTC (7 hours ago)
(HTM) web link (muffinman.io)
(TXT) w3m dump (muffinman.io)
| xg15 wrote:
| I wonder, could you turn this into a sort if generalized version
| using coordinate space transformations? Sort of like this:
|
| - design a rope pattern as you like (or any other pattern) as if
| it were perfectly straight - e.g. design your pattern as if the X
| axis were the path and the Y axis were the normals.
|
| - now take your actual (non-straight) path, divide it into
| sections and calculate the normals just as described in the post.
| Don't do any skewing.
|
| For now, I assume the path has a fixed length, so the length of
| your pattern must be the same as the length of the path.
|
| - divide the pattern into the same number of sections as the path
| has.
|
| - now you have a 1:1 correspondence between sections on the path
| and sections on the pattern. Each section begins and ends with a
| normal perpendicular to the length of the path or pattern. The
| only difference is that the pattern's sections are rectangular
| while the path's sections are trapezoids.
|
| - you can map the coordinate systems between them with a linear
| transformation.
|
| - finally, you can take the vectors that make up your rope
| pattern and transformation them into the coordinate systems of
| the path, section by section. Now your previously straight
| pattern follows the path!
|
| Caveats:
|
| 1) This assumes your path has a fixed length and your pattern is
| defined over the entire length. It would probably be more
| practical to have a repeating pattern or a function that can
| generate a pattern given the desired path length.
|
| 2) Each section is transformed individually, so if in the
| pattern, you have a straight line that crosses a section
| boundary, the line will have a visible kink after transformation.
| A way to mitigate this would be to use multiple overlapping sets
| of sections and interpolate the transformation between them.
|
| 3) The shape of the path sections is only determined by the two
| normals bounding the section - so all the path curvature _inside_
| a section is lost. If the path is very "curvy" and the sections
| are too coarse, the pattern will not correctly follow the path.
| This can be improved by increasing the number of sections and
| making the individual sections smaller.
| palmtree3000 wrote:
| I believe inkscape has this:
| http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathE...
| kuhewa wrote:
| This is great. I hope you get into Beziers next, I get the strong
| feeling they can be elegant if done programmatically but I
| haven't yet put my finger on how and still kinda eyeball them.
| Waterluvian wrote:
| Everything about this is stunning and incredible. It's one of
| those webpages that is art itself. Such a beautiful presentation.
| It's also amazing to see someone walking through this kind of
| problem. It escapes me entirely but you make it look so obvious
| in the end!
| TuringTest wrote:
| > _I 'm a visual thinker. For me drawing things on paper makes
| any problem easier to solve. I would suggest you try the same.
| Keep a pen and paper near your computer and reach out for them
| before you start typing code._
|
| I feel the same way. Of course it's easier for visual tasks like
| this one, but I tend to think of programs developing in space and
| time as trees and graphs, even for abstract stuff like complex
| algorithms and data structures.
|
| Though I think most programmers are more language-oriented. It is
| often hard for me to find the exact syntax required for coding a
| particular problem which is fully formed in my mind eye as visual
| steps. Programming languages are oriented to represent each
| concept with a precise linguistic abstract syntax, instead of
| representing concrete changes in the program state, and most
| developers don't seem to mind.
| klabb3 wrote:
| Same boat, checking in. My notebooks are full of scribbles even
| though I do lots of non-visual programming. It's my primary
| thinking aid.
|
| I've found this to work out well for me:
|
| - Use languages and tools that let you defer correctness while
| prototyping. I lose track of "the bigger picture" if I have to
| context switch to thinking pedantically about syntax and type
| systems. That's ok when everything is in place, but is
| disruptive when experimenting.
|
| - Find good visualization aids, such as sequence diagrams,
| dependency trees, call graphs etc. Even if you just do it on
| paper, they can be great tools.
|
| - Read up a bit about dataflow programming. It fits my brain
| very well, and you can apply the thinking in any language.
| (Unfortunately existing dataflow oriented programming
| environments are quite limited and come with other downsides).
|
| Let me know if you have tips to share as well.
| bambax wrote:
| This is excellent, and SVG is so cool. It's somehow overlooked
| and not used as often as it should, but it makes so many things
| possible!
| bobthepanda wrote:
| SVG is nice but could be better.
|
| unfortunately SVG 2 has been stuck in draft for pretty much an
| eternity
| 4RealFreedom wrote:
| "Depending on your needs, you could stop right here," but he
| doesn't and continues to make it better. What a great write-up
| and site!
| dvh wrote:
| I want to see gpt doing this
| __mharrison__ wrote:
| Pretty cool. Was crossing my fingers that they would show how to
| make the rope go over AND under itself (like tying a knot).
| stankot wrote:
| Author here.
|
| Woah! This kinda exploded, thank you so much for the kind words!
|
| Lately, I'm trying to add more interactivity to my posts. Mainly
| inspired by amazing work of Bartosz Ciechanowski [1].
|
| I started drawing with code a few years ago and completely fell
| in love with it. Problems like this one scratch my itch for
| creative programming.
|
| I hope some of my posts will inspire people to try making
| pictures using code, just for the sake of it. Programming should
| be fun :)
|
| [1] https://ciechanow.ski/
|
| edit: typos
| zackees wrote:
| [dead]
| andai wrote:
| Feels silly to say it here but I couldn't find a way to contact
| you: on your blog archive page I can expand categories but not
| collapse them.
| stankot wrote:
| Can you please tell me which browser/os are you using? I'll
| look into it, although it works my laptop/phone.
|
| P.S. Unfortunately I had some bad experiences with leaving
| contact info public.
| andai wrote:
| Brave browser (basically Chrome) on Windows 10, and same
| behavior on Safari on iOS.
| zagrebian wrote:
| Your feed is invalid (XML parsing error)
|
| https://muffinman.io/atom.xml
| stankot wrote:
| Thank you, I'll take care of it! It seems I broke it with
| HTML I'm using directly in markdown files.
|
| EDIT: Fixed it, thanks again!
| satvikpendem wrote:
| Please make the SVG on the side of the viewport rather than on
| the top, it makes it difficult to read, since our screens are
| generally wider than they are tall. A similar effect is used on
| https://pomb.us/build-your-own-react/ if you wanted to take a
| look.
| smrtinsert wrote:
| What publishing system do you use to embed react in your post?
| Very cool post.
| stankot wrote:
| Thank you! I'm using Zola[1] static site generator.
| Interactivity is is all done in plain JavaScript, no React in
| this post.
|
| [1] https://www.getzola.org/
| amelius wrote:
| Tip: this would be more beautiful if drawn with a calligraphic
| pen (source: just see any comic book).
|
| (a calligraphic pen is simply a solid angled ellipse that you
| move along the stroked path without changing its orientation)
| azeemba wrote:
| It's interesting that you mentioned, Ciechanowski. It's
| definitely what I thought of when I saw your post.
|
| After seeing the GPS post [1] on that website, I also decided
| that I wanted to write posts with more visualizations. I wonder
| how many people the author has inspired!
|
| [1] https://ciechanow.ski/gps/
| JKCalhoun wrote:
| Extremely cool.
|
| Something small seems a little off and I'm trying to quantify
| it. It's something to do with the rope in the tighter bends.
| Somehow I think the rope needs to be a little tighter -- the
| twisted bits a little closer together as the bend tightens.
|
| Maybe tightening the spacing between "knots" relative to the
| amount of curvature -- rather than using a fixed spacing?
| Imagine some longitudinal compression occurs as the bend
| tightens.
|
| Here's an example of an "analog" rope image that might be
| illustrative: https://cpartyrentals.com/wp-
| content/uploads/2015/06/rope-le...
| chrisdalke wrote:
| Off topic, but wow, your generative art is incredible! I was
| already impressed and then saw that you're actually physically
| plotting everything which is next level. Love the fusion of
| art/math/robotics.
| stankot wrote:
| Thank you very much, it means a lot!
|
| Plotting is the reason I always try to generate vector
| images. I'll probably try to plot a drawing with these ropes.
| But I would like to add some kind of shading and to figure
| out how to tie knots.
| dheera wrote:
| My first thought when I saw this is it would also be useful to
| draw millipedes and snakes
| [deleted]
| xenospn wrote:
| This is why I visit HN.
| streetburner wrote:
| [dead]
| Cerium wrote:
| Absolutely beautiful, excellent work.
|
| I would like to comment that for the animation it has the rope
| anchored on the left. I think that a up and down loop animation
| would be most natural to have the center of the rope anchored
| since that motion is generated with two hands going in and out,
| the center should not look like it slides back and forth as the
| visible length changes.
| stankot wrote:
| Ha, you are completely right. I didn't think about it at all.
|
| I've kept the interactive image short on purpose, so it doesn't
| cover too much content. Then I tried to squeeze as much
| movement in that short area.
|
| I may go back and update examples a little bit.
| [deleted]
| simonw wrote:
| It's worth spending some time exploring the rest of that blog -
| so much great content on there. I particularly enjoyed this one
| about generative art using Voronoi diagrams:
| https://muffinman.io/blog/breaking-down-krypton/
| [deleted]
| peer2pay wrote:
| Yeah the SVG and animation are cool but the blog post is
| phenomenal! Great stuff!
| chromatin wrote:
| Agree; I was stunned by the interactivity and progressive build
| of the blog post itself.
| bigyikes wrote:
| Computer graphics is such a fun area to work in. This rope is a
| perfect example of how having strong high school level math
| skills and a good idea can turn you into a kind of wizard. It's a
| really special feeling when you bring to life a dynamic
| illustration that you can customize programmatically. If you let
| it go to your head, if kind of makes you feel like a god.
| meindnoch wrote:
| Looks good, but is a bit overcomplicated...
|
| The proper way to bend some graphics around a curve is by
| transforming it to the tangent frame.
| [deleted]
| smrtinsert wrote:
| Could you elaborate on how you came to that decision? I really
| want to understand how to think in graphics, and I feel like
| there aren't any good books that explain that.
| schipplock wrote:
| wow, that is how you have to present something like that :). Well
| done! I'm impressed.
| cod1r wrote:
| This is too cool
| chagaif wrote:
| Does this work well on iOS?, I experienced some issues with
| foreignObject, and I failed to import an SVG in a react project,
| does anyone have an idea what I can do about that?
|
| https://chagai.website/chagai-website-react/
|
| Or the code here:
|
| https://github.com/chagai95/chagai-website-react
| [deleted]
| vermarish wrote:
| There are few things in design as beautiful as animations that
| update intuitively as you scroll. Bravo! I will be using this for
| my own scrollytelling inspiration :)
| lewj wrote:
| What a fantastic write up - love the choice of "accurate" vs
| "good enough" - wonder if there are any edge cases that this
| fails at - might find some time in the new year to check this!
| Lots of potential for "whip" mechanics in browser.
___________________________________________________________________
(page generated 2022-12-31 23:00 UTC)