Show HN: Pulsar, micro creative coding playground

stankot | 182 points

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:

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=...

stankot | 4 months ago

Tangentially related, since you are exploring hexagonal and triangular grids; I once caught a space-filling curve bug and decided to port ideas from https://tixy.land to fractional dimensions: https://oneearedrabbit.github.io/l-sys-playground/curves/ind.... After all, why not?

oneearedrabbit | 4 months ago

Unfortunately, it was too easy to trigger XSS: https://muffinman.io/pulsar/?grid=classic&animate=scale&code...

It is really hard to make a correct sandbox in JS in general, without something like the Realms proposal [1]. Until that point you would have to be conservative to be safe.

[1] https://github.com/tc39/proposal-shadowrealm

lifthrasiir | 4 months ago

Martin Kleppe, the author of the mentioned https://tixy.land, also likes to toy around with quines! One that I particularly like:

https://aem1k.com/qlock/

agys | 4 months ago

Cool!

Reminds me a little bit of CSS Doodle: https://css-doodle.com/

For expressions, hopefully the TC9 Shadow Realms proposal will make this easier in the future.

spankalee | 4 months ago

This is hypnotic. I know that's not very insightful, but it is.

gcanyon | 4 months ago

Also see https://www.dwitter.net/ — art in 140 characters or less

internetter | 4 months ago

Interesting how clicking Random a few times hints at how those old school demos were done in so little code, albeit in 3d.

swah | 4 months ago

>> (x,y,t,i)

Can someone explain what's i hwre? I get x, y, and t as 2D space and time respectively, but may be not.

alok-g | 4 months ago

This is a great shader intro tutorial!

candeira | 4 months ago

This is super cool and well executed. Congrats!

keyle | 4 months ago

[flagged]

Daadir | 4 months ago