stankot

I've figured it out. The error means that this call fails:

    const animation = animationElement.getAnimations()[0];

As Firefox supports `getAnimations` since 2020, I figured something else is messing up with it. I've tried to enable "reduced motion" in the system settings and it broke the animation!

It is because I had force-disabled all animations on the site when this option is enabled.

I patched it, it should work now. Thank you for your help!

EDIT: typo

EDIT2: I also added simple error handling to display a message if parsing the animation fails.

Go for it, and share a link!

Thanks for checking, I’ll try to see what is going on.

That is weird, because it is HTML/CSS only. Do you see anything that would help me debug it? Could it be that an add-on (content blocker) messes up with it? I don't have an android device to test. I don't see any issues on desktop and ios though.

Tixy is amazing! I built something very similar:

https://muffinman.io/pulsar/

I wanted to create animations for my LED matrix screen, and I couldn’t find tixy anywhere. Only after I built pulsar I found it again.

Another similar project is https://sliderland.blinry.org/ which uses HTML sliders.

Fun stuff!

I stumbled on this some time ago and saved it for when my kid grows up enough. It is a collection of a few thousands kid friendly videos. I think their curation is pretty good, but check it out for yourself.

https://thekidshouldseethis.com/

Thank you! There is nothing wrong with large libraries. But you are right, there is something very satisfactory in solving a problem in a few lines of code.

Thank you, you made my day!

Thanks for the tip! Does it make paper shiny and stiff?

This is awesome! I’ve seen it but forgot to bookmark it, thanks for sharing it again.

Sure, I think the hard part is creating hand drawn animation. If you can draw or generate it, the rest is fairly straight forward.

I have an idea for somewhat different flip animation, stay tuned :)

Actually that's my usual approach, but you should see the vector output from these. I tried doing it and than went back to cleaning up the raster images.

For me, pen plotting is a lot of fun. There is something so satisfying in bringing digital work to the physical world.

As for the text, I have it on my todo list to create a few single line fonts, for some time now. The obvious one is my own handwriting, ideally with some randomness built in. I would like others to be less conventional to sprinkle them in my drawings, or like you mentioned, to create some pieces that are text only.

That is correct. I use AxiDraw SE/A3 and I love it. One of the best purchases I ever made.

I just released a fix for it and updated the blog post.

Honestly, I don't think that is a bug. All examples are quite dense and the thumb covers multiple steps on the track. Firefox then translates every click like you clicked directly on the track. The library doesn't interfere with it in any way, it is how Firefox works.

If you can replicate this, please open a github issue [1].

Which browser and OS are you using? Because this library doesn't do anything regarding the scroll blocking (because it is using native inputs). On my phone (iOS) scroll is blocked on all input[type=range] elements, styled or not.

[1] https://github.com/Stanko/dual-range-input/issues

I think it can be theoretically done, like it is mentioned in the comment above, but you would need a new block of CSS for every slider min/max/step combination. It feels it would be harder to maintain than the javascript version.

Nice catch! Actually I thought of this and it works in Chrome and Firefox, but it seems that Safari is not triggering the focus event on mouse down, but only when you start moving the slider. Thank you for the report, I'll make sure to fix it.

Thank you, comments like yours really make my day!

Hey, author here, glad to see it popping up on HN.

I see people started opening issues and leaving bug reports here. I’ll try to go through them tomorrow (it is getting late here).

I created it because I needed it for my generative drawings. I prefer dragging a slider and seeing how the image changes, more than typing in a number.

I really tried to keep it minimal.

This reminded me of ArnoldC

https://lhartikk.github.io/ArnoldC/

I love creative coding. I'm mostly focused on the visual stuff, especially generating vector files for pen-plotting. That said, I'm very proud of Rayven, my small vector 3D engine that mimics hand hatching:

- https://muffinman.io/blog/sneak-peek-of-rayven/

I would say it is 80% done, but it needs to be polished for a public release. I do plan to release it, and I would love to prepare a proper talk about it.

There are also other small tools I created, like Pulsar (micro creative coding playground) and Vertigo (turning raster images to SVGs). Both are open source and available here:

- https://muffinman.io/pulsar/

- https://muffinman.io/vertigo/

If you liked these, you might want to check my other projects: - https://muffinman.io/projects/

That was a lot of shameless self-promotion, but I love these "useless" projects. They really put fun back into programming after being in the industry for a while. Cheers!

Edit: formatting

Haha ok, I will spare the backslash.

The code is brilliant, I remember similar code golf in C years ago. Thanks for the comment, I'll link it next to the example.

The i parameter is a point’s index. I just checked, there is an example in the tutorial. I started with x, y and t, but then added index as well, it gets handy sometimes.

If you are in EU, I have a spare I can send you (I upgraded to the brushless servo).

You might also want to check Arnaud Pfeffer who uses weird brushes with AxiDraw:

https://x.com/arnaudpfef/status/1830305098376909205?s=46

Thank you! It really annoyed me that I couldn’t find it.

Same here, I’m a visual thinker and stuff like this really helps me grasp certain concepts.

It is probably the safest to use an iframe (like CodePen for example), but I was looking for a simpler solution. I ended up with a web worker as it has a completely separate scope (no access to window object). However, it still has access to a bunch of browser APIs, so I also have a list of “forbidden” words. It is not ideal, (as proved in one of the comments below) but it is a middle ground that seemed fine for my usecase.

Your thing is way more hardcore!

As for colors, I wanted more than one color (or two with negative), so I went with a simple hardcoded palette. I wanted to keep the scope in control, but I might try inverting colors when I decide to add more features. Thanks!

Hehe I don't mind, it is my favorite off topic, I love pen plotting. I use it to draw my generative art, which you can see here:

https://muffinman.io/art/

As for the engraver, keep in mind that AxiDraw is only using the weight of the pen (engraver) to press on a surface, so you might need to add some weight for it to work. But please be careful not to damage the servo motor or the plotter. Tyler Hobbs did something similar, he was using a drill bit to remove fresh paint from mirrors: https://www.tylerxhobbs.com/works/mirror-removal

People are doing all kinds of wacky stuff with plotters. I want to try using a brush along with markers. I think the combination of the two can be used to create interesting effects.