Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Draw SVG rope using JavaScript

muffinman.io

Post reply on HN
Print view View original

21–30 of 74 posts

Re: Draw SVG rope using JavaScript

#22

Post by zagrebian »

stankot wrote: post #18

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…

Your feed is invalid (XML parsing error)

https://muffinman.io/atom.xml

Re: Draw SVG rope using JavaScript

#23

Post by smrtinsert »

meindnoch wrote: post #15

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.

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.

Re: Draw SVG rope using JavaScript

#24

Post by TuringTest »

> 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.

Re: Draw SVG rope using JavaScript

#25

Post by stankot »

andai wrote: post #20
stankot wrote: post #18

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…

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.

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.

Re: Draw SVG rope using JavaScript

#26

Post by stankot »

zagrebian wrote: post #22
stankot wrote: post #18

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…

Your feed is invalid (XML parsing error) https://muffinman.io/atom.xml

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!

Re: Draw SVG rope using JavaScript

#27

Post by palmtree3000 »

xg15 wrote: post #12

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 i…

I believe inkscape has this: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathE...

Re: Draw SVG rope using JavaScript

#30

Post by [deleted] »

simonw wrote: post #14

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]
Post reply on HN