31 ms·

Hey, author here. I'm really glad to see this getting some traction on HN, it is one of those projects that really brings me joy. It is inspired by a project t

Hey, author here. I'm really glad to see this getting some traction on HN, it is one of those projects that really brings me joy. It is inspired by a project that I saw on HN a while ago. I wasn't able to find it again, so I made my own version. I swear, only after finishing Pulsar I managed to find https://tixy.land/ https://tixy.land/ again. As a bonus, I wanted to run these animations on my DIY LED frame. Check out the video: https://github.com/Stanko/pulsar/tree/dev#led-retro-frame https://github.com/Stanko/pulsar/tree/dev#led-retro-frame Here are a few technical details: It is built in TypeScript and open source. User code is executed in a web worker to minimize the risk of malicious use (tbh I'm proud of the solution, and I find it quite nifty). Initially, I used to render everything as an SVG, but in order to create GIFs for the LED frame, I switched to canvas. Not to mention that SVG gave me a few headaches which I'll cover in a blog post (if I ever write one). The syntax highlighter is a trick I found on Stack Overflow. The textarea is transparent, and as you type in it, I take the code, highlight and copy it into a div which overlays the textarea. It was really fun to build and I hope you had some fun playing with it. I made it around last new year's eve, so here is a simple animation of a Christmas tree: https://muffinman.io/pulsar/?grid=classic&animate=both&code=Y2VpbCgoKGFicyh0ICogMC43KV4yKSo3KSAlIDEyMCkgPT09IGkgPyAwIDogKChhYnMoeS02KSAtIGFicyh4KjIuMykpICogKGNvcyh0ICogMC4yKSAqIDAuMyArIDAuNSkp https://muffinman.io/pulsar/?grid=classic&animate=both&code=...

Towaway69 2y ago
Great stuff :+1: Sorry for going OT, I noticed from the demo video that you got an axidraw - what are doing with it, if a may ask? Got one myself and been playing around with it. The latest idea has been to use a hand engraver as pen!
- stankot 2y ago
  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/ 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 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.
  - Towaway69 2y ago
    Wow, nice to find someone with the same hobby :) I already had to replace the servo because of over use - unfortunately it’s really hard to get the original servo, got some cheap copycats and they break fairly quickly. I used some oil paint and a brush to create some plots. I created an svg with layers to move the brush to the paint, draw a circle (to get paint on the brush) and then moved the brush to paint a line. This was repeated with various colours … made for an interest effect! I engraved some paper and that worked fine (as a test). I’ll definitely be careful with it. Another idea I had was to have the plotter draw on a arm, something like doing an automatic tattoo but that’s me doing some mindstorming ;)
    - stankot 2y ago
      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 https://x.com/arnaudpfef/status/1830305098376909205?s=46
      - Towaway69 2y ago
        That’s just an amazing brush, I would love to know how to come up with those ideas - crazy good 8-O (or what’s the emoji for wide eyes mouth open!) I’m EU based so I could take you up on your offer - I’ll drop you a line this week - cheers :+1:
Lerc 2y ago
I think there's opportunity for more expression if you depict negative values as a distinct state. For instance you could depict negative values as a 180 degree flip the hue (just a suggestion lots of options there) When I made my (more esoteric) thing https://c50.fingswotidun.com/ https://c50.fingswotidun.com/ I took a long time to consider the features before I froze them to allow people to submit their own code. I think you might have more scope for expandability given you already have modes of operation radio buttons for shapes.
- stankot 2y ago
  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!
tomduncalf 2y ago
Haha I was going to say this seems inspired by Tixy - which I also forgot the name of and hunted for for a long time. Love this kind of thing, they should use it in school to show how cool maths can be (maybe they do now!)
- stankot 2y ago
  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.
a1o 2y ago
> User code is executed in a web worker to minimize the risk of malicious use Can you expand on this a bit? I have something that I would love to enable user plugins by using JS eval or something but I am too afraid of someone doing evil stuff to bring the feature in-place.
- throwup238 2y ago
  The only way for a worker to communicate with the rest of the browser context is by using the `postMessage` method. The host code has to listen and respond via the `onmessage` handler, so the worker is unable to do anything that you don't explicitly implement in your `onmessage` handler. You still have to make sure the API you expose to the user plugins aren't exploitable.
  - a1o 2y ago
    Thank you for the explanation, I was not familiar with this method, it looks interesting, a tradeoff between flexibility and safety vs iframe.
- stankot 2y ago
  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.

Towaway69 2y ago

Great stuff :+1: Sorry for going OT, I noticed from the demo video that you got an axidraw - what are doing with it, if a may ask? Got one myself and been playing around with it. The latest idea has been to use a hand engraver as pen!

stankot 2y ago
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/ 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 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.
- Towaway69 2y ago
  Wow, nice to find someone with the same hobby :) I already had to replace the servo because of over use - unfortunately it’s really hard to get the original servo, got some cheap copycats and they break fairly quickly. I used some oil paint and a brush to create some plots. I created an svg with layers to move the brush to the paint, draw a circle (to get paint on the brush) and then moved the brush to paint a line. This was repeated with various colours … made for an interest effect! I engraved some paper and that worked fine (as a test). I’ll definitely be careful with it. Another idea I had was to have the plotter draw on a arm, something like doing an automatic tattoo but that’s me doing some mindstorming ;)
  - stankot 2y ago
    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 https://x.com/arnaudpfef/status/1830305098376909205?s=46
    - Towaway69 2y ago
      That’s just an amazing brush, I would love to know how to come up with those ideas - crazy good 8-O (or what’s the emoji for wide eyes mouth open!) I’m EU based so I could take you up on your offer - I’ll drop you a line this week - cheers :+1:

Lerc 2y ago

I think there's opportunity for more expression if you depict negative values as a distinct state. For instance you could depict negative values as a 180 degree flip the hue (just a suggestion lots of options there) When I made my (more esoteric) thing https://c50.fingswotidun.com/ https://c50.fingswotidun.com/ I took a long time to consider the features before I froze them to allow people to submit their own code. I think you might have more scope for expandability given you already have modes of operation radio buttons for shapes.

stankot 2y ago
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!

tomduncalf 2y ago

Haha I was going to say this seems inspired by Tixy - which I also forgot the name of and hunted for for a long time. Love this kind of thing, they should use it in school to show how cool maths can be (maybe they do now!)

stankot 2y ago
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.

a1o 2y ago

> User code is executed in a web worker to minimize the risk of malicious use Can you expand on this a bit? I have something that I would love to enable user plugins by using JS eval or something but I am too afraid of someone doing evil stuff to bring the feature in-place.

throwup238 2y ago
The only way for a worker to communicate with the rest of the browser context is by using the `postMessage` method. The host code has to listen and respond via the `onmessage` handler, so the worker is unable to do anything that you don't explicitly implement in your `onmessage` handler. You still have to make sure the API you expose to the user plugins aren't exploitable.
- a1o 2y ago
  Thank you for the explanation, I was not familiar with this method, it looks interesting, a tradeoff between flexibility and safety vs iframe.
stankot 2y ago
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.