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/ again.
As a bonus, I wanted to run these animations on my DIY LED frame. Check out the video:
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:
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/ 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.
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!
> 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.
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.
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.
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!)
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.
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 ;)
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/ 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
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=...