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

51–60 of 74 posts

Re: Draw SVG rope using JavaScript

#51

Post by quickthrower2 »

satvikpendem wrote: post #45
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…

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.

That said on mobile it is perfect to have it on top.

Re: Draw SVG rope using JavaScript

#53

Post by satvikpendem »

quickthrower2 wrote: post #51
satvikpendem wrote: post #45

Earlier quoted context omitted.

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.

That said on mobile it is perfect to have it on top.

Media queries ;)

Re: Draw SVG rope using JavaScript

#55

Post by Daub »

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…

I love the fact that you use good old-fashioned pencil and paper to work out the details. Not enough of our students appreciate the value of such preparation.

Re: Draw SVG rope using JavaScript

#58

Post by Existenceblinks »

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…

Also thanks for https://muffinman.io/blog/get-lines-of-text-from-html-elemen... I think I had this requirement before but did not have desire to do it, your solution is very helpful.

Re: Draw SVG rope using JavaScript

#59

Post by meindnoch »

smrtinsert wrote: post #23
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.

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

Post reply on HN