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.
Draw SVG rope using JavaScript
11–20 of 74 posts
Re: Draw SVG rope using JavaScript
#12I 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.
Re: Draw SVG rope using JavaScript
#13"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!
Re: Draw SVG rope using JavaScript
#14It'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/
Re: Draw SVG rope using JavaScript
#15Looks good, but is a bit overcomplicated…
The proper way to bend some graphics around a curve is by transforming it to the tangent frame.
Re: Draw SVG rope using JavaScript
#16Looks 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]
Re: Draw SVG rope using JavaScript
#17This 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!
Re: Draw SVG rope using JavaScript
#18Author 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 :)
edit: typos
Re: Draw SVG rope using JavaScript
#19Absolutely 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.
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.
Re: Draw SVG rope using JavaScript
#20Author 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…
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.