Love the preview widget that changes as your scroll through each section. Truly great work.
Draw SVG rope using JavaScript
61–70 of 74 posts
Re: Draw SVG rope using JavaScript
#62Re: Draw SVG rope using JavaScript
#63Integrating this with Verlet integration would be cool
Re: Draw SVG rope using JavaScript
#64Breaks down at high width and low thickness.
Re: Draw SVG rope using JavaScript
#65Earlier quoted context omitted.
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.
Brave browser (basically Chrome) on Windows 10, and same behavior on Safari on iOS.
I'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
Re: Draw SVG rope using JavaScript
#66Earlier quoted context omitted.
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 s…
I 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. 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.
Re: Draw SVG rope using JavaScript
#67Earlier quoted context omitted.
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!
Your elements are malformed, and spec-following feed readers will currently fail to get content, or mangle it: if using , the serialised HTML needs to be encoded as text, which it’s not currently. (Instead, you have a bunch of supposed-to-be-HTML XML tags in the Atom namespace.)
There’s also which requires an XHTML-namespaced wrapper div and goes full XML, but you should only use that if your tooling will guarantee its XML validity. https://datatracker.ietf.org/doc/html/rfc4287#section-4.1.3> is the spec for all of this. Reflecting on this and your particular content, there’s a fun technicality that probably theoretically makes type="xhtml" unsuitable for you: you can only use in HTML syntax, not XML syntax, because it’s resolved at parse time.
Re: Draw SVG rope using JavaScript
#68Author 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…
So , the sliders in ciechsnowskis website are really smooth. The animation starts as soon as the slider is moved but doesn't update "janky" ,
Suppose i jerk the slider a quick left and right , the animation doesn't update all the way to through every state the slider has been through the jerk .
I find this very visually appealing and clever.
Re: Draw SVG rope using JavaScript
#69Neat.
Now do it in a webgl vertex shader
Re: Draw SVG rope using JavaScript
#70Earlier quoted context omitted.
Brave browser (basically Chrome) on Windows 10, and same behavior on Safari on iOS.
I'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
I don't have JavaScript disabled on any device. As an aside, it is possible to implement your feature without JavaScript (with and ).