TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: Pulsar, micro creative coding playground

182 点作者 stankot8 个月前

12 条评论

stankot8 个月前
Hey, author here. I&#x27;m really glad to see this getting some traction on HN, it is one of those projects that really brings me joy.<p>It is inspired by a project that I saw on HN a while ago. I wasn&#x27;t able to find it again, so I made my own version. I swear, only after finishing Pulsar I managed to find <a href="https:&#x2F;&#x2F;tixy.land&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tixy.land&#x2F;</a> again.<p>As a bonus, I wanted to run these animations on my DIY LED frame. Check out the video:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;Stanko&#x2F;pulsar&#x2F;tree&#x2F;dev#led-retro-frame">https:&#x2F;&#x2F;github.com&#x2F;Stanko&#x2F;pulsar&#x2F;tree&#x2F;dev#led-retro-frame</a><p>Here are a few technical details:<p>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&#x27;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&#x27;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.<p>It was really fun to build and I hope you had some fun playing with it.<p>I made it around last new year&#x27;s eve, so here is a simple animation of a Christmas tree:<p><a href="https:&#x2F;&#x2F;muffinman.io&#x2F;pulsar&#x2F;?grid=classic&amp;animate=both&amp;code=Y2VpbCgoKGFicyh0ICogMC43KV4yKSo3KSAlIDEyMCkgPT09IGkgPyAwIDogKChhYnMoeS02KSAtIGFicyh4KjIuMykpICogKGNvcyh0ICogMC4yKSAqIDAuMyArIDAuNSkp" rel="nofollow">https:&#x2F;&#x2F;muffinman.io&#x2F;pulsar&#x2F;?grid=classic&amp;animate=both&amp;code=...</a>
评论 #41472834 未加载
评论 #41474534 未加载
评论 #41474097 未加载
评论 #41472398 未加载
oneearedrabbit8 个月前
Tangentially related, since you are exploring hexagonal and triangular grids; I once caught a space-filling curve bug and decided to port ideas from <a href="https:&#x2F;&#x2F;tixy.land" rel="nofollow">https:&#x2F;&#x2F;tixy.land</a> to fractional dimensions: <a href="https:&#x2F;&#x2F;oneearedrabbit.github.io&#x2F;l-sys-playground&#x2F;curves&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;oneearedrabbit.github.io&#x2F;l-sys-playground&#x2F;curves&#x2F;ind...</a>. After all, why not?
评论 #41471349 未加载
lifthrasiir8 个月前
Unfortunately, it was too easy to trigger XSS: <a href="https:&#x2F;&#x2F;muffinman.io&#x2F;pulsar&#x2F;?grid=classic&amp;animate=scale&amp;code=dD9jb3MuY29uc3RydWN0b3IoJ29ubWVzc2FnZT1lPT5wb3N0TWVzc2FcZ2Uoe2lkOmUuZGF0YS5pZCxlcnJvcjoiPG1ldGEgaHR0cC1lcXVpdj1yZWZyZXNoIGNvbnRlbnQ9MDsvL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zLzUvNTcvRG9uJTI3dF9QYW5pY19CYWRnZS5qcGc%252BIn0pJykoKTow" rel="nofollow">https:&#x2F;&#x2F;muffinman.io&#x2F;pulsar&#x2F;?grid=classic&amp;animate=scale&amp;code...</a><p>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.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;tc39&#x2F;proposal-shadowrealm">https:&#x2F;&#x2F;github.com&#x2F;tc39&#x2F;proposal-shadowrealm</a>
评论 #41471995 未加载
agys8 个月前
Martin Kleppe, the author of the mentioned <a href="https:&#x2F;&#x2F;tixy.land" rel="nofollow">https:&#x2F;&#x2F;tixy.land</a>, also likes to toy around with quines! One that I particularly like:<p><a href="https:&#x2F;&#x2F;aem1k.com&#x2F;qlock&#x2F;" rel="nofollow">https:&#x2F;&#x2F;aem1k.com&#x2F;qlock&#x2F;</a>
triclops2008 个月前
fun! <a href="https:&#x2F;&#x2F;muffinman.io&#x2F;pulsar&#x2F;?grid=classic&amp;animate=scale&amp;code=bWluKDEsbWF4KDAscG93KChzaW4oc3FydCh4LzYqeC82K3kvNip5LzYpKjMuMTQxNTkyNjUrdC8zLjE0MTU5MjY1KSsxKS8yLDIwKSkpKm1pbigxLG1heCgwLChwb3coYWJzKGF0YW4yKHkvNix4LzYpLzMuMTQxNTkrMSkvMisoY29zKHQvMy4xNDE1OTI2NSkrMSkvMiwxMDApLXBvdyhhYnMoYXRhbjIoeS82LHgvNikvMy4xNDE1OSsxKS8yKyhjb3ModC8zLjE0MTU5MjY1KSsxKS8yLTAuMDEsMTAwKSkpKQ%253D%253D" rel="nofollow">https:&#x2F;&#x2F;muffinman.io&#x2F;pulsar&#x2F;?grid=classic&amp;animate=scale&amp;code...</a>
评论 #41471915 未加载
spankalee8 个月前
Cool!<p>Reminds me a little bit of CSS Doodle: <a href="https:&#x2F;&#x2F;css-doodle.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-doodle.com&#x2F;</a><p>For expressions, hopefully the TC9 Shadow Realms proposal will make this easier in the future.
gcanyon8 个月前
This is hypnotic. I know that&#x27;s not very insightful, but it is.
internetter8 个月前
Also see <a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;</a> — art in 140 characters or less
swah8 个月前
Interesting how clicking Random a few times hints at how those old school demos were done in so little code, albeit in 3d.
alok-g8 个月前
&gt;&gt; (x,y,t,i)<p>Can someone explain what&#x27;s i hwre? I get x, y, and t as 2D space and time respectively, but may be not.
评论 #41476499 未加载
candeira8 个月前
This is a great shader intro tutorial!
keyle8 个月前
This is super cool and well executed. Congrats!