6 ms·

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 ama

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, just for the sake of it. Programming should be fun :) [1] https://ciechanow.ski/ https://ciechanow.ski/ edit: typos

andai 4y ago
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.
- stankot 4y ago
  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.
  - andai 4y ago
    Brave browser (basically Chrome) on Windows 10, and same behavior on Safari on iOS.
    - stankot 4y ago
      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
      - andai 4y ago
        I don't have JavaScript disabled on any device. As an aside, it is possible to implement your feature without JavaScript (with <details> and <summary>).
zagrebian 4y ago
Your feed is invalid (XML parsing error) https://muffinman.io/atom.xml https://muffinman.io/atom.xml
- stankot 4y ago
  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!
  - zagrebian 4y ago
    Thanks, subscribed.
  - chrismorgan 4y ago
    Your <content> elements are malformed, and spec-following feed readers will currently fail to get content, or mangle it: if using <content type="html">, 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 <content type="xhtml"> 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 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 <noscript> in HTML syntax, not XML syntax, because it’s resolved at parse time.
smrtinsert 4y ago
What publishing system do you use to embed react in your post? Very cool post.
- stankot 4y ago
  Thank you! I'm using Zola[1] static site generator. Interactivity is is all done in plain JavaScript, no React in this post. [1] https://www.getzola.org/ https://www.getzola.org/
chrisdalke 4y ago
Off topic, but wow, your generative art is incredible! I was already impressed and then saw that you're actually physically plotting everything which is next level. Love the fusion of art/math/robotics.
- stankot 4y ago
  Thank you very much, it means a lot! Plotting is the reason I always try to generate vector images. I'll probably try to plot a drawing with these ropes. But I would like to add some kind of shading and to figure out how to tie knots.
amelius 4y ago
Tip: this would be more beautiful if drawn with a calligraphic pen (source: just see any comic book). (a calligraphic pen is simply a solid angled ellipse that you move along the stroked path without changing its orientation)
zackees 4y ago
[dead]
dheera 4y ago
My first thought when I saw this is it would also be useful to draw millipedes and snakes
satvikpendem 4y ago
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/ https://pomb.us/build-your-own-react/ if you wanted to take a look.
- quickthrower2 4y ago
  That said on mobile it is perfect to have it on top.
  - satvikpendem 4y ago
    Media queries ;)
    - quickthrower2 4y ago
      Or flex!
azeemba 4y ago
It's interesting that you mentioned, Ciechanowski. It's definitely what I thought of when I saw your post. After seeing the GPS post [1] on that website, I also decided that I wanted to write posts with more visualizations. I wonder how many people the author has inspired! [1] https://ciechanow.ski/gps/ https://ciechanow.ski/gps/
JKCalhoun 4y ago
Extremely cool. Something small seems a little off and I'm trying to quantify it. It's something to do with the rope in the tighter bends. Somehow I think the rope needs to be a little tighter — the twisted bits a little closer together as the bend tightens. Maybe tightening the spacing between "knots" relative to the amount of curvature — rather than using a fixed spacing? Imagine some longitudinal compression occurs as the bend tightens. Here's an example of an "analog" rope image that might be illustrative: https://cpartyrentals.com/wp-content/uploads/2015/06/rope-letters-1024x1024.jpg https://cpartyrentals.com/wp-content/uploads/2015/06/rope-le...
Daub 4y ago
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.
Existenceblinks 4y ago
Also thanks for https://muffinman.io/blog/get-lines-of-text-from-html-element/ 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.
arbitrandomuser 4y ago
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.

andai 4y ago

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.

stankot 4y ago
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.
- andai 4y ago
  Brave browser (basically Chrome) on Windows 10, and same behavior on Safari on iOS.
  - stankot 4y ago
    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
    - andai 4y ago
      I don't have JavaScript disabled on any device. As an aside, it is possible to implement your feature without JavaScript (with <details> and <summary>).

zagrebian 4y ago

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

stankot 4y ago
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!
- zagrebian 4y ago
  Thanks, subscribed.
- chrismorgan 4y ago
  Your <content> elements are malformed, and spec-following feed readers will currently fail to get content, or mangle it: if using <content type="html">, 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 <content type="xhtml"> 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 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 <noscript> in HTML syntax, not XML syntax, because it’s resolved at parse time.

smrtinsert 4y ago

What publishing system do you use to embed react in your post? Very cool post.

stankot 4y ago
Thank you! I'm using Zola[1] static site generator. Interactivity is is all done in plain JavaScript, no React in this post. [1] https://www.getzola.org/ https://www.getzola.org/

chrisdalke 4y ago

Off topic, but wow, your generative art is incredible! I was already impressed and then saw that you're actually physically plotting everything which is next level. Love the fusion of art/math/robotics.

stankot 4y ago
Thank you very much, it means a lot! Plotting is the reason I always try to generate vector images. I'll probably try to plot a drawing with these ropes. But I would like to add some kind of shading and to figure out how to tie knots.

amelius 4y ago

Tip: this would be more beautiful if drawn with a calligraphic pen (source: just see any comic book). (a calligraphic pen is simply a solid angled ellipse that you move along the stroked path without changing its orientation)

zackees 4y ago

[dead]

dheera 4y ago

My first thought when I saw this is it would also be useful to draw millipedes and snakes

satvikpendem 4y ago

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/ https://pomb.us/build-your-own-react/ if you wanted to take a look.

quickthrower2 4y ago
That said on mobile it is perfect to have it on top.
- satvikpendem 4y ago
  Media queries ;)
  - quickthrower2 4y ago
    Or flex!

azeemba 4y ago

It's interesting that you mentioned, Ciechanowski. It's definitely what I thought of when I saw your post. After seeing the GPS post [1] on that website, I also decided that I wanted to write posts with more visualizations. I wonder how many people the author has inspired! [1] https://ciechanow.ski/gps/ https://ciechanow.ski/gps/

JKCalhoun 4y ago

Extremely cool. Something small seems a little off and I'm trying to quantify it. It's something to do with the rope in the tighter bends. Somehow I think the rope needs to be a little tighter — the twisted bits a little closer together as the bend tightens. Maybe tightening the spacing between "knots" relative to the amount of curvature — rather than using a fixed spacing? Imagine some longitudinal compression occurs as the bend tightens. Here's an example of an "analog" rope image that might be illustrative: https://cpartyrentals.com/wp-content/uploads/2015/06/rope-letters-1024x1024.jpg https://cpartyrentals.com/wp-content/uploads/2015/06/rope-le...

Daub 4y ago

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.

Existenceblinks 4y ago

Also thanks for https://muffinman.io/blog/get-lines-of-text-from-html-element/ 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.

arbitrandomuser 4y ago

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.