Draw SVG rope using JavaScript

Author here.<p>Woah! This kinda exploded, thank you so much for the kind words!<p>Lately, I&#x27;m trying to add more interactivity to my posts. Mainly inspired by amazing work of Bartosz Ciechanowski [1].<p>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.<p>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 :)<p>[1] <a href="https:&#x2F;&#x2F;ciechanow.ski&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ciechanow.ski&#x2F;</a><p>edit: typos

It&#x27;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: <a href="https:&#x2F;&#x2F;muffinman.io&#x2F;blog&#x2F;breaking-down-krypton&#x2F;" rel="nofollow">https:&#x2F;&#x2F;muffinman.io&#x2F;blog&#x2F;breaking-down-krypton&#x2F;</a>

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!

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.

&gt; <i>I&#x27;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><p>I feel the same way. Of course it&#x27;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.<p>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&#x27;t seem to mind.

Absolutely beautiful, excellent work.<p>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.

I see things like this and I think, &quot;Wow, should I be calling myself a programmer?&quot; ... even after ~40 years at it! But that feeling makes me love programming even more. I adore this project!

Yeah the SVG and animation are cool but the blog post is phenomenal! Great stuff!

&quot;Depending on your needs, you could stop right here,&quot; but he doesn&#x27;t and continues to make it better. What a great write-up and site!

What a fantastic write up - love the choice of &quot;accurate&quot; vs &quot;good enough&quot; - 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 &quot;whip&quot; mechanics in browser.

This is excellent, and SVG is so cool. It&#x27;s somehow overlooked and not used as often as it should, but it makes so many things possible!

I wonder, could you turn this into a sort if generalized version using coordinate space transformations? Sort of like this:<p>- 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.<p>- now take your actual (non-straight) path, divide it into sections and calculate the normals just as described in the post. Don&#x27;t do any skewing.<p>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.<p>- divide the pattern into the same number of sections as the path has.<p>- 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&#x27;s sections are rectangular while the path&#x27;s sections are trapezoids.<p>- you can map the coordinate systems between them with a linear transformation.<p>- 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!<p>Caveats:<p>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.<p>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.<p>3) The shape of the path sections is only determined by the two normals bounding the section - so all the path curvature <i>inside</i> a section is lost. If the path is very &quot;curvy&quot; 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.

Love the preview widget that changes as your scroll through each section. Truly great work.

&gt; The image below will stay in the viewport and update as you scroll.<p>This blew my mind for some reason.

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&#x27;t yet put my finger on how and still kinda eyeball them.

Try pressing F10 0 . , and see the background keyboard layout on the blog. It&#x27;s semi-easter-egg right there, pretty nice.<p>* I have vimium binded, so the sample keys aren&#x27;t conflict

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 :)

This is why I visit HN.

Nice work, but I have to say that it looks like a voronoi diagram, which triggers trypophobia for some internet people. I would make them assuming the robe as a segmented 3d cylinder object and tangle it with another one as we do in real life

Pretty cool. Was crossing my fingers that they would show how to make the rope go over AND under itself (like tying a knot).

<i>And that is why it is so important to solve the problem first.</i><p>Best and clearest advice I&#x27;ve seen for quite a while :)

I want to see gpt doing this

Integrating this with Verlet integration would be cool

Breaks down at high width and low thickness.

wow, that is how you have to present something like that :). Well done! I&#x27;m impressed.

Looks good, but is a bit overcomplicated…<p>The proper way to bend some graphics around a curve is by transforming it to the tangent frame.

Neat.<p>Now do it in a webgl vertex shader

This is too cool

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?<p><a href="https:&#x2F;&#x2F;chagai.website&#x2F;chagai-website-react&#x2F;" rel="nofollow">https:&#x2F;&#x2F;chagai.website&#x2F;chagai-website-react&#x2F;</a><p>Or the code here:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;chagai95&#x2F;chagai-website-react">https:&#x2F;&#x2F;github.com&#x2F;chagai95&#x2F;chagai-website-react</a>