Show HN: Unknown Pleasures, a tiny web experiment with WebGL | Hacker News Reader

Show HN: Unknown Pleasures, a tiny web experiment with WebGL

pouria.dev

661 pointspoeti8115 comments

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

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

Radiohead cover of Ceremony

https://m.youtube.com/watch?v=sCZV2_z5w4Q

For those who might have missed the connection, related to https://news.ycombinator.com/item?id=35401185 the joy division cover art for their album unknown pleasures

Thanks! Macroexpanded:

The origin of Joy Division’s Unknown Pleasures album cover art (2015) - https://news.ycombinator.com/item?id=35401185

Also currently being discussed:

Animated Unknown Pleasures in 3 lines of K (2015) - https://news.ycombinator.com/item?id=35422570

List of past threads at https://news.ycombinator.com/item?id=35426173

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.

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.

Yeah, I believe that is what happened here. See the author's comment: https://news.ycombinator.com/item?id=35422496

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.

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.

https://www.youtube.com/@InigoQuilez/videos is what I'm talking about. It's not necessarily a from-zero introduction, but it's a nice resource.

https://www.youtube.com/watch?v=0ifChJ0nJfM is probably the the most beginner friendly.

https://thebookofshaders.com/ is another great place to start.

Good luck and enjoy!

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

I would definitely watch it!

Not really code, but you might find Erin Dale interesting, he takes a lot of time explaining how he creates his amazing Blender geometry nodes concepts – https://www.youtube.com/watch?v=F2NcNJQZFqw

This is so cool. This is the kind of thing that convinces me that human powered art isn't going anywhere. Sure, AI can pump out nice pictures, but the creativity and vision it takes to make something like this isn't going anywhere for a long time. Great stuff.

That gives me demo scene vibes. Nice!

Am I the only one uncomfortable clicking on a link called "Unknown Pleasures" on their work laptop? Or is my brain truly rotten?

https://en.m.wikipedia.org/wiki/Unknown_Pleasures

The thing you need to know is that it is the name of the Joy Division album with the iconic cover. I didn't know that until I read https://news.ycombinator.com/item?id=35401185 which was posted a few hours earlier.

The last thing I read on HN was something about boobs overtaking the Stable Diffusion community, so yeah, I'm a little uncomfortable too.

Without knowing the context, being hesitant definitely makes sense. I know the album its referencing and I was still a little apprehensive.

Outstanding. We need more like this on the internet so thanks for making it a better place. And thanks just as much for the github repo!! [bottom right]. Simply wonderful.

Thanks for your kind words! I'm happy it had an impact, even if a small one.

Beautiful. Conjures up memories of the glorious days of the mid 90s.

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.

After pressing the loose control button the spectrograph turns 3d. Music begins to play and the camera starts to move. The screen flickered a couple of times (did it try to go full screen?) and then a frowny face appears in the top left-hand corner.

Running Chromium Edge 111.

Edit: works fine in Firefox.

Great job, I tried something similar (although much less polished) a while back. https://unknown-mp3.netlify.app/#debug

This made me realize I have no MP3s anymore :(

Nice, thanks for sharing!

Similar, but different: https://github.com/jo-m/waterfall-plot-webgl/

(I am the author)

Nice! I looked for similar projects and inspiration before creating mine and I remember seeing yours and bookmarking it.

If we're sharing similar but different ... https://codepen.io/kaliedarik/pen/BaLZYwJ

(Sadly without music)

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.

This is the most beautiful thing I’ve seen in a long while

I appreciate it.

You know it's good when at the end you're thinking: already?

Thank you. That was really nice.

Glad you liked it!

Love it. Reminds me of the Wilderness Downtown 'music experience' from Arcade Fire in 2010 - http://www.thewildernessdowntown.com

This might be my favorite thing I've seen on HN ever. Outstanding work. I hope you're able to find remote work from Tehran in such a tumultuous time.

Thank you so much. I was lucky and had one remote job for 4-5 years but I did quit it recently. Hopefully, I'll be lucky again and find a new one.

The length of that demo was mathematically perfect.

Thanks!

I opened this on Twitter using the in app browser on iOS 16.4, after I closed the browser, it continued to play the music whenever I bring twitter to the foreground!

https://twitter.com/newsycombinator/status/16428898341747916...

I once did something like this! Forked from someone who did most of the heavy lifting

https://fede.dm/unknown-pleasures/

https://github.com/FdelMazo/unknown-pleasures/

When playing it "again" the animations and sound are not sync anymore. Otherwise great work.

How does one go about creating something like this? Is there any tutorials out there? I'm eager to include interactive graphics in my work

So fun, didn't even know, they also made the Kutt.it URL shortener, that I am using for quite a while already. Small world...

Congratulations! Soo good (even on an old iPhone)

Great, was worried about the performance on smart phones.

This gave me some nostalgic vibes from http://ro.me

This gave me chills. Whoever made this has a serious capacity for vision. Really well done.

That was just lovely. Thank you.

Thanks!

Beautiful.

Somehow it gave me the vibe of watching a transitional scene from Regular Show.

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

A Monday morning unknown pleasure. Thank you.

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.

True, and HTML too :)

three.js mostly. Here’s the repo: https://github.com/poeti8/unknown-pleasures

JavaScript, and a few lines of shaders. You can view the code on GitHub.

Fantastic! Thanks for sharing.

𝄆♡䷖𝄇

It's awesome, Love it!

Superb! Love the vibe <3

Love it

This is great! Well done.

Great work! I love it!

Very cool, great work.

Fantastic :)

Very slick!

Great!

Love it!

Awesome

Reply on news.ycombinator.com