8 ms·
Draw SVG rope using JavaScript
- schipplock 4y agowow, that is how you have to present something like that :). Well done! I'm impressed.
- Waterluvian 4y agoEverything 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!
- Cerium 4y agoAbsolutely 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 4y agoHa, 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.
- peer2pay 4y agoYeah the SVG and animation are cool but the blog post is phenomenal! Great stuff!
- chromatin 4y agoAgree; I was stunned by the interactivity and progressive build of the blog post itself.
- bigyikes 4y agoComputer 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.
- deleted 4y ago[deleted]
- cod1r 4y agoThis is too cool
- chagaif 4y agoDoes 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/ https://chagai.website/chagai-website-react/ Or the code here: https://github.com/chagai95/chagai-website-react https://github.com/chagai95/chagai-website-react
- deleted 4y ago[deleted]
- lewj 4y agoWhat 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.
- 4RealFreedom 4y ago"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!
- Bilal_io 4y agoIt's like when I watch sped up digital painting videos on YouTube, every time I think "this is perfect" the artist continues and redefines what "perfect" means.
- xg15 4y agoI 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 4y agoI believe inkscape has this: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-PatternAlongPath.html http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathE...
- simonw 4y agoIt'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/ https://muffinman.io/blog/breaking-down-krypton/
- deleted 4y ago[deleted]
- meindnoch 4y agoLooks 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 4y ago[deleted]
- smrtinsert 4y agoCould 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.
- meindnoch 4y agoConsider that a 2D bitmap is just a function p(x, y) = (r(x, y), g(x, y), b(x, y)), that assigns colors to (x, y) coordinates. If you have a parametric curve c(t) = (x(t), y(t)), it’s easy to see that for each parameter value t, the tangent of the curve is going to point towards dc/dt = (dx/dt, dy/dt). You can take a perpendicular vector to this tangent by rotating it 90 degrees, and the two vectors will form a so-called tangent frame at t. If you want to bend your bitmap around this curve, the key idea is to transform the domain of the bitmap. That is, instead of putting your bitmap pixel at (x, y), you would put it at something like c(x) + (dc/dt)(y) (some scaling factors omitted for brevity). (In practice, you would want to invert this mapping, and map the pixels around the curve back to the domain of the bitmap, to avoid holes, but that’s an implementation detail. The key idea is thinking in terms of warping the bitmap’s domain.)
- panzerboiler 4y agoI don't agree that what you propose is less complicated. Deriving an UV mapping along the curve could be done, but for a cubic bezier spline is not exactly as trivial as you paint it. For an example implementation along a quadratic bezier spline, see https://www.shadertoy.com/view/NltBRB https://www.shadertoy.com/view/NltBRB. A cubic bezier is more complex to map since you have to solve an equation of 5th degree. I also think that the author wants to keep everything in vector format to be able to draw the results with a plotter. You could displace the vertices of a straight vector model of the rope using the UVs, but I am not sure that it would be any simpler.
- bambax 4y agoThis 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 4y agoSVG is nice but could be better. unfortunately SVG 2 has been stuck in draft for pretty much an eternity
- stankot 4y agoAuthor 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/ https://ciechanow.ski/ edit: typos
- andai 4y agoFeels 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 4y agoCan 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 4y agoBrave browser (basically Chrome) on Windows 10, and same behavior on Safari on iOS.
- stankot 4y agoI'm not sure what is happening. I can replicate that behavior only when I disable javascript. If that case you can't close it as it relies on the url hash. edit: typo
- andai 4y agoI don't have JavaScript disabled on any device. As an aside, it is possible to implement your feature without JavaScript (with <details> and <summary>).
- deleted 4y ago[deleted]
- TuringTest 4y ago> 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 4y agoSame 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.
- TuringTest 4y agoYeah, I've worked with dataflow languages and they're a very good fit for data transformations (not so much for complex runtime control flow). Functional-reactive languages like spreadsheets also make it way easier to reason about than imperative programming. I like environments where you can keep visualization aids close to the code to which they apply; nowadays, that means using online notebooks a la Jupyter and ObservableHQ, or at least markdown files with a preview plugin integrated in your IDE. There you can represent diagrams as code, like Graphviz and Mermaid. I long for the day that those visual representations can be accessed programmatically and used as part of the code itself, like VB6 interactive widgets were created graphically yet usable in the application; e.g. creating state machines visually by representing states and transitions as boxes and arrows, then compiling the diagram to add conditions and access their values from code (there are some libraries doing this in some environments and languages, but I'm not aware of one that is portable to many languages). I think we're really close to that being possible with modern languages.
- xenospn 4y agoThis is why I visit HN.
- streetburner 4y ago[dead]
- __mharrison__ 4y agoPretty cool. Was crossing my fingers that they would show how to make the rope go over AND under itself (like tying a knot).
- vermarish 4y agoThere 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 :)
- dvh 4y agoI want to see gpt doing this
- JayPalm 4y agoIt cannot. This is its result: ```svg Copy code <svg width="100" height="100"> <defs> <pattern id="rope-texture" patternUnits="userSpaceOnUse" width="10" height="10"> <rect x="0" y="0" width="5" height="10" fill="#333" /> <circle cx="7.5" cy="5" r="2.5" fill="#333" /> </pattern> </defs> <path d="M20,50 C20,30 50,30 50,50 C50,70 20,70 20,50" fill="url(#rope-texture)" /> </svg> ```
- kuhewa 4y agoThis 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.
- panstromek 4y ago> The image below will stay in the viewport and update as you scroll. This blew my mind for some reason.
- drpixie 4y agoAnd that is why it is so important to solve the problem first. Best and clearest advice I've seen for quite a while :)
- Existenceblinks 4y agoTry pressing F10 0 . , and see the background keyboard layout on the blog. It's semi-easter-egg right there, pretty nice. * I have vimium binded, so the sample keys aren't conflict
- FatActor 4y agoI see things like this and I think, "Wow, should I be calling myself a programmer?" ... even after ~40 years at it! But that feeling makes me love programming even more. I adore this project!
- hipjiveguy 4y agoThe fact that you are still reading Hacker News, and programming, STILL, says it all :D 37 years in myself
- underanalyzer 4y agoLove the preview widget that changes as your scroll through each section. Truly great work.
- None4U 4y agoIntegrating this with Verlet integration would be cool
- anonytrary 4y agoBreaks down at high width and low thickness.
- tobyhinloopen 4y agoNeat. Now do it in a webgl vertex shader
- fatih-erikli 4y agoNice 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
- creatonez 4y agoShould be noted, a lot of phobias are common but trypophobia is not one of them. There are hardly any case studies where pattern-based imagery has actually sent someone into fight-or-flight the same way that spiders or heights can. Most of the time when it's discussed on the internet it's a rather mild disgust/horror reaction rather than a clinical phobia. It's possible the term has only gained popularity from internet communities where people intentionally share wacky images, which isn't exactly a useful support group. That's not to say it's not possible, just so extremely rare that it's not a reasonable design consideration.