5 ms·

Show HN: Pulsar, micro creative coding playground

182 points by stankot 2y ago

keyle 2y ago
This is super cool and well executed. Congrats!
gcanyon 2y ago
This is hypnotic. I know that's not very insightful, but it is.
oneearedrabbit 2y 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 https://tixy.land to fractional dimensions: https://oneearedrabbit.github.io/l-sys-playground/curves/index.html https://oneearedrabbit.github.io/l-sys-playground/curves/ind.... After all, why not?
- throwaway8481 2y ago
  Obligatory side material that was a joy to read: https://www.redblobgames.com/grids/hexagons-v2/pre-index.html https://www.redblobgames.com/grids/hexagons-v2/pre-index.htm...
candeira 2y ago
This is a great shader intro tutorial!
triclops200 2y ago
fun! https://muffinman.io/pulsar/?grid=classic&animate=scale&code=bWluKDEsbWF4KDAscG93KChzaW4oc3FydCh4LzYqeC82K3kvNip5LzYpKjMuMTQxNTkyNjUrdC8zLjE0MTU5MjY1KSsxKS8yLDIwKSkpKm1pbigxLG1heCgwLChwb3coYWJzKGF0YW4yKHkvNix4LzYpLzMuMTQxNTkrMSkvMisoY29zKHQvMy4xNDE1OTI2NSkrMSkvMiwxMDApLXBvdyhhYnMoYXRhbjIoeS82LHgvNikvMy4xNDE1OSsxKS8yKyhjb3ModC8zLjE0MTU5MjY1KSsxKS8yLTAuMDEsMTAwKSkpKQ%253D%253D https://muffinman.io/pulsar/?grid=classic&animate=scale&code...
- stankot 2y ago
  Love this one, I'll add it to the examples!
  - triclops200 2y ago
    :3
lifthrasiir 2y ago
Unfortunately, it was too easy to trigger XSS: https://muffinman.io/pulsar/?grid=classic&animate=scale&code=dD9jb3MuY29uc3RydWN0b3IoJ29ubWVzc2FnZT1lPT5wb3N0TWVzc2FcZ2Uoe2lkOmUuZGF0YS5pZCxlcnJvcjoiPG1ldGEgaHR0cC1lcXVpdj1yZWZyZXNoIGNvbnRlbnQ9MDsvL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zLzUvNTcvRG9uJTI3dF9QYW5pY19CYWRnZS5qcGc%252BIn0pJykoKTow 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 https://github.com/tc39/proposal-shadowrealm
- stankot 2y ago
  Nice one! Yeah, it is quite tricky to protect from everything, I'll try to patch this and similar exploits, thanks for bringing it up. At least the exploit doesn't work until you start changing the code. EDIT: Patched it by checking for backslashes and the word "constructor".
  - lifthrasiir 2y ago
    I mean, it is still easy to work around that because `f.constructor` is just `f['const'+'ructor']` and so on. Backslash was just a cheap way to avoid the exact pattern and it will be hard to fix them with a disallowed word list. For example, you may disallow string literals but then template string literals can be used: `const${``}ructor`, and some interesting code would be disallowed over the course. Literals fully disallowed, it is still possible to construct a string "constructor" without them, as the good old JSFuck [1] demonstrates. Disallowing brackets is almost sufficient, but your global worker scope is still exposed and that may be exploitable. After some search, it seems that using a null-origin <iframe> seems the best approach you can use for now. Figma successfully used it in the production [2] and the only reason they switched was that no state can be ever shared, which is not a big problem for your case. They also tried the Realms shim for the aforementioned proposal but it seems to have a known vulnerability. And I guess you don't want to ship a WebAssembly JS interpreter ;-) Anyway, sorry to bother you; it is hard to balance the fun and robustness at once. As a parting gift, the following is a genuine code that renders a 7-segment counter: https://muffinman.io/pulsar/?grid=classic&animate=opacity&code=KGFicyh4KTw1KSooMS10JTEpKiouMyooKGMsZCk9PmMmMSZ%252BKGMrMT8yNjg2NTY3MjErKGQ8NSkqMTgwMjY4ODUxPj5kJTUqNitjLzI6ZD09MikpKCh5PjQpLTUqKHg%252BMikrKHk%252BMCktKHk8MCkrNSooeDwtMiktKHk8LTQpKzUsdCUxMHwwKQ%253D%253D https://muffinman.io/pulsar/?grid=classic&animate=opacity&co... [1] https://jsfuck.com/ https://jsfuck.com/ [2] https://www.figma.com/blog/how-we-built-the-figma-plugin-system/#attempt-1-the-iframe-sandbox-approach https://www.figma.com/blog/how-we-built-the-figma-plugin-sys...
stankot 2y ago
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.
internetter 2y ago
Also see https://www.dwitter.net/ https://www.dwitter.net/ — art in 140 characters or less
agys 2y ago
Martin Kleppe, the author of the mentioned https://tixy.land https://tixy.land, also likes to toy around with quines! One that I particularly like: https://aem1k.com/qlock/ https://aem1k.com/qlock/
swah 2y ago
Interesting how clicking Random a few times hints at how those old school demos were done in so little code, albeit in 3d.
Daadir 2y ago
[flagged]
alok-g 2y 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.
- stankot 2y ago
  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.
spankalee 2y ago
Cool! Reminds me a little bit of CSS Doodle: https://css-doodle.com/ https://css-doodle.com/ For expressions, hopefully the TC9 Shadow Realms proposal will make this easier in the future.

182 points by stankot 2y ago

keyle 2y ago

This is super cool and well executed. Congrats!

gcanyon 2y ago

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

oneearedrabbit 2y 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 https://tixy.land to fractional dimensions: https://oneearedrabbit.github.io/l-sys-playground/curves/index.html https://oneearedrabbit.github.io/l-sys-playground/curves/ind.... After all, why not?

throwaway8481 2y ago
Obligatory side material that was a joy to read: https://www.redblobgames.com/grids/hexagons-v2/pre-index.html https://www.redblobgames.com/grids/hexagons-v2/pre-index.htm...

candeira 2y ago

This is a great shader intro tutorial!

triclops200 2y ago

fun! https://muffinman.io/pulsar/?grid=classic&animate=scale&code=bWluKDEsbWF4KDAscG93KChzaW4oc3FydCh4LzYqeC82K3kvNip5LzYpKjMuMTQxNTkyNjUrdC8zLjE0MTU5MjY1KSsxKS8yLDIwKSkpKm1pbigxLG1heCgwLChwb3coYWJzKGF0YW4yKHkvNix4LzYpLzMuMTQxNTkrMSkvMisoY29zKHQvMy4xNDE1OTI2NSkrMSkvMiwxMDApLXBvdyhhYnMoYXRhbjIoeS82LHgvNikvMy4xNDE1OSsxKS8yKyhjb3ModC8zLjE0MTU5MjY1KSsxKS8yLTAuMDEsMTAwKSkpKQ%253D%253D https://muffinman.io/pulsar/?grid=classic&animate=scale&code...

stankot 2y ago
Love this one, I'll add it to the examples!
- triclops200 2y ago
  :3

lifthrasiir 2y ago

Unfortunately, it was too easy to trigger XSS: https://muffinman.io/pulsar/?grid=classic&animate=scale&code=dD9jb3MuY29uc3RydWN0b3IoJ29ubWVzc2FnZT1lPT5wb3N0TWVzc2FcZ2Uoe2lkOmUuZGF0YS5pZCxlcnJvcjoiPG1ldGEgaHR0cC1lcXVpdj1yZWZyZXNoIGNvbnRlbnQ9MDsvL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zLzUvNTcvRG9uJTI3dF9QYW5pY19CYWRnZS5qcGc%252BIn0pJykoKTow 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 https://github.com/tc39/proposal-shadowrealm

stankot 2y ago
Nice one! Yeah, it is quite tricky to protect from everything, I'll try to patch this and similar exploits, thanks for bringing it up. At least the exploit doesn't work until you start changing the code. EDIT: Patched it by checking for backslashes and the word "constructor".
- lifthrasiir 2y ago
  I mean, it is still easy to work around that because `f.constructor` is just `f['const'+'ructor']` and so on. Backslash was just a cheap way to avoid the exact pattern and it will be hard to fix them with a disallowed word list. For example, you may disallow string literals but then template string literals can be used: `const${``}ructor`, and some interesting code would be disallowed over the course. Literals fully disallowed, it is still possible to construct a string "constructor" without them, as the good old JSFuck [1] demonstrates. Disallowing brackets is almost sufficient, but your global worker scope is still exposed and that may be exploitable. After some search, it seems that using a null-origin <iframe> seems the best approach you can use for now. Figma successfully used it in the production [2] and the only reason they switched was that no state can be ever shared, which is not a big problem for your case. They also tried the Realms shim for the aforementioned proposal but it seems to have a known vulnerability. And I guess you don't want to ship a WebAssembly JS interpreter ;-) Anyway, sorry to bother you; it is hard to balance the fun and robustness at once. As a parting gift, the following is a genuine code that renders a 7-segment counter: https://muffinman.io/pulsar/?grid=classic&animate=opacity&code=KGFicyh4KTw1KSooMS10JTEpKiouMyooKGMsZCk9PmMmMSZ%252BKGMrMT8yNjg2NTY3MjErKGQ8NSkqMTgwMjY4ODUxPj5kJTUqNitjLzI6ZD09MikpKCh5PjQpLTUqKHg%252BMikrKHk%252BMCktKHk8MCkrNSooeDwtMiktKHk8LTQpKzUsdCUxMHwwKQ%253D%253D https://muffinman.io/pulsar/?grid=classic&animate=opacity&co... [1] https://jsfuck.com/ https://jsfuck.com/ [2] https://www.figma.com/blog/how-we-built-the-figma-plugin-system/#attempt-1-the-iframe-sandbox-approach https://www.figma.com/blog/how-we-built-the-figma-plugin-sys...

stankot 2y ago

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.

internetter 2y ago

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

agys 2y ago

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

swah 2y ago

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

Daadir 2y ago

[flagged]

alok-g 2y 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.

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

spankalee 2y ago

Cool! Reminds me a little bit of CSS Doodle: https://css-doodle.com/ https://css-doodle.com/ For expressions, hopefully the TC9 Shadow Realms proposal will make this easier in the future.