118 comments

[ 10.5 ms ] story [ 337 ms ] thread
That gives me demo scene vibes. Nice!
You know it's good when at the end you're thinking: already?

Thank you. That was really nice.

The length of that demo was mathematically perfect.
Fantastic! Thanks for sharing.
Glorious. This blog post by the creator on the insanity of the JS ecosystem is also a good read https://pouria.dev/programs-are-dead/
Looking in the browser devtools it seems to be a three.js application.
Looking into the dev tools also reveals that the page tries to load Google Analytics without consent. Not cool.
I'm sorry, I forgot about that. I removed Google Analytics from my personal website just now.
I didn't think it worth mentioning because it's blocked by uBlock Origin anyway ;)
What an absurdly high bar that 99% of the sites on HN certainly don’t reach.
The law?
Laws are different in different countries. The internet is in all of them.

What is it that you’re looking for, a useless “this site uses cookies” warning? That can mean anything, from a site that has a simple login feature, to a site that participates in a network that tracks you across the internet. The legal requirement for that notification is a great example of futile regulation that achieves nothing but globally wasted productivity. It’s like having to warn people that you breathe - regulators focused on the wrong common factor.

If you care enough about the issue, there are plenty of off-the-shelf blockers you can install.

(comment deleted)
The great irony of this post is that the author dreams of a world where they can use a library without it depending on hundreds of other modules, yet their website is built on Gatsby, an NPM package with one of the most insane dependency graphs I've seen. Uploading the author's website's package.json[1] into npmgraph[2] lists a total of 1561 dependencies. All that for what amounts to a simple blog site.

[1] https://github.com/poeti8/pouria.dev/blob/master/package.jso...

[2] https://npmgraph.js.org/

That's why I wrote the blog post.
Why not use a different tool then? Hugo or Zola are mature and provide static binaries. If you want to stay in the Node world, I can recommend tinyjam by mourner (or anything by Volodymyr, really).
The point of the article is to complain about the state of the JS ecosystem as a whole. Of course there are workarounds and alternatives but it doesn't detract from the main point.
I agree, it doesn't detract from the main point, and I understand the purpose of the article. I only find it surprising that the website is built with Gatsby given the author's stance.
Surely the stance can come after and because of building the website?

There's a lot of projects that've taught me exactly what tool I wouldn't use if I were redoing them from scratch, but there's no time to start again or no wish to go through a lot of extra pain and work (until needed) to end up with the same end result.

But do you think there is a solution? Why do we have to bear such a painful ecosystem?May we are at an evolutionary stage where too much variety is proliferating, and over time things will converge into a few proven ways of doing things.
Thanks for writing it.

Whenever I see WebGL posts like yours & chiechanowski I think like these folks must really love JavaScript to create such masterpiece & with my apprehension towards the JS ecosystem I couldn't indulge myself to put such effort.

Your post on JS ecosystem resonates with me & perhaps there's a narrow gap for someone without liking the JS ecosystem could do something extraordinary with JavaScript.

Am I the only one uncomfortable clicking on a link called "Unknown Pleasures" on their work laptop? Or is my brain truly rotten?
The last thing I read on HN was something about boobs overtaking the Stable Diffusion community, so yeah, I'm a little uncomfortable too.
(comment deleted)
Without knowing the context, being hesitant definitely makes sense. I know the album its referencing and I was still a little apprehensive.
Congratulations! Soo good (even on an old iPhone)
Great, was worried about the performance on smart phones.
This is super cool, would love to see the work thats gone into it.

Havent played around too much with WebGL but this is a tiny inspiration.

Thank you! I'll probably make a video on how I made this.

3D web is fun, and Three.js and React Three Fiber make it easy to start from somewhere. I aboslutely recommend trying them.

Really cool ! Is this just JS or using wasm?
Well, it's WebGL so neither, it runs on the GPU :)
It appears to be three.js, so there's a lot of Javascript involved too.
JavaScript, and a few lines of shaders. You can view the code on GitHub.
As someone who creates apis and web apps for a living, I’d love to know what the creative / development process for building something like this is?

I would love to watch a video explaining how this was made from idea, first line of code, to publishing. Especially what tools were used.

You probably won’t find exactly the video you’re looking for, but if you’re interested in creative coding and shader based animation, IQ (Shadertoy author) has some amazing videos on his YouTube channel. Shaders are tricky!

It’s a deep and fascinating development world, one much less thoroughly documented than the world of web apps. Good luck!

Hey, could you post the link of the channel you mean? Looking for 'shadertoy' in Youtube brought me only a playlist by 'The Art of Code'. Is that the channel you mean?
IQ= Inigo Quilez. His work is a good entry point.

https://iquilezles.org/

I've only only lightly dipped my toes into the webGL landscape, but I can definitely vouch for this man. I love the way he explains things. He's like the Carl Sagan of WebGL. I'll see if I can dig up a couple resources from my own foray drop them in this comment below.

EDIT: here are the links as promised.

1. https://thebookofshaders.com/ (mentioned above, I think)

2. https://threejs.org/docs/ (of course)

3. https://docs.pmnd.rs/react-three-fiber/getting-started/intro... (optional; good for React and those comfortable for maybe don't dive right in until you get a good grasp on Three.js)

4. https://threejs-journey.com/ (a paid course with some good intro lessons as freebies)

Hope this helps!

Theres also library using Svelte and threejs(https://svelthree.dev/). Its newer but worth checking out.

Also, threejs journey is worth it. Lots of great content.

I have the same background as you, this is my first WebGL project.

While building it I actually was thinking of making a video of the process some day, but I thought it wouldn't have an audience, plus, I'm not an expert, I might say the wrong stuff. But anyway, I'll be happy to make a video that would help others like me!

Actually a video from someone who has just learnt can be more valuable, as you have the closest perspective to the viewer
Exactly, I might do it fast then, before learning more. :P
A Monday morning unknown pleasure. Thank you.
„Love Will Tear Us Apart” might not be my favourite Joy Division song (that title goes to „Atmosphere”), but still I’m delighted to find this on HN #1. Splendidly executed. I watched in awe, then smiled at the final „Again” being rendered as a button.
The Again button is so clever!
This song isn't a part of the unknown pleasures album. Otherwise this was great but for me a fly in the ointment
Thank you. They have so many great songs, Atmosphere is one my favorites.
Ceremony deserves a WebGL treatment as well ;)

https://www.youtube.com/watch?v=2zPIod2wjYE

Interesting, never heard this version. Heard only another Joy Division recording of it and New Order's. Digging the lower tempo
> Interesting, never heard this version. Heard only another Joy Division recording of it and New Order's. Digging the lower tempo

It was written as a Joy Division song; Ian Curtis wrote the lyrics just a few weeks before he died. There are three Joy Divison recordings of it: one performed live (at what ended up being their final concert, though nobody knew it at the time), one studio recording, and one bootleg recording of a soundcheck for the aforementioned concert.

Because Curtis died before Joy Division finished the studio recording, all three recordings are unfortunately of suboptimal quality. Which is quite a shame - it would be nice to have an album quality recording of that final song.

<insert obligatory comment triggering a debate over whether "Ceremony" is really a Joy Division song or a New Order song/>

"Disorder" might be my favorite Joy Divison song.

Hard to pick a favorite New Order song since they had so many different eras and styles. "Ceremony" is the best of their classic post-punk works. "True Faith" was an incredibly influential song musically despite being less-known. "Temptation" and "Sub-Culture" are works of art.

Galaxie 500's cover is better than both

https://www.youtube.com/watch?v=92Nkrav2-Aw

It's a masterpiece as well, for sure.

There are a lot of great covers of the tune. I love Dean Wareham's. Every time he plays it, he seems to find something new.

His cover tends toward melancholy. Peter Hook's, a little angry, sometimes triumphant. There's a cover by Day Wave that's almost happy. Several ambient covers that range from, I dunno, anhedonic to transcendent.

"True Faith" is also notable for having a really fun music video, which is often projected during their live shows: https://www.youtube.com/watch?v=mfI1S0PKJR8

Picking favorite New Order tracks is especially difficult since many of their singles have multiple mixes, with substantial differences. For example I always prefer the gothier 12" remix of Sub-Culture, or the dancier Shep Pettibone remix of "True Faith". And meanwhile with some hits like "Bizarre Love Triangle" there are far too many versions to even keep track of...

That was just lovely. Thank you.
opening the link on brave shows nothing and the error

> index-e853a9de.js:40 TypeError: Cannot read properties of null (reading 'indexOf')

works happily in FF though

Extremely impressive. Meanwhile, I'm struggling to get the text aligned inside this blasted <div> tag...
I've found what helps with aligning text is to set your laptop on fire and chuck it from a 5th story window.
Thanks for the tip, but I have a follow up question. When is best to pour an oblation of goat's blood to the Dark Lord? Is it just as I'm defenestrating the laptop or while it is midway in its descent? I've heard that's also part of the puzzle.
I just ask ChatGPT at least 5 times using different prompts then take the most frequent response. The result is aligned correctly as long as you don’t resize the browser window.
Start pouring as the laptop leaves your hands, keep the stream going until it kisses the ground. The idea is having a rain of blood around it for the whole trip down.

Garden sprinkler can may be a useful tool in this circumstance.

Let's take this offline, we need to get alignment from a few AIs on this one.
Thank Christ someone said it…
I once wrote a webgl viewer for viewing results of CFD simulations in 3D in a web browser, and doing the 3D stuff was an easier than getting the text and GUI components to align nicely the way I wanted.
Or, how I learned to stop worrying and love position:absolute.
display:flex

then just justify align items self thingy

Hey, I myself just struggled to center align an image on GitHub today. If I can create this, then anybody can, with enough time put into it.