10 ms·
Show HN: Unknown Pleasures, a tiny web experiment with WebGL
- mugr 4y agoWhen playing it "again" the animations and sound are not sync anymore. Otherwise great work.
- Tepix 4y agoVery slick!
- rado 4y agoAwesome
- MrGilbert 4y agoThat gives me demo scene vibes. Nice!
- gjadi 4y agoYou know it's good when at the end you're thinking: already? Thank you. That was really nice.
- poeti8 4y agoGlad you liked it!
- mach1ne 4y agoThe length of that demo was mathematically perfect.
- poeti8 4y agoThanks!
- shever73 4y agoFantastic! Thanks for sharing.
- dmje 4y agoLove it
- fsto 4y agoLove it!
- quintussss 4y agoVery cool, great work.
- jack_riminton 4y agoGlorious. This blog post by the creator on the insanity of the JS ecosystem is also a good read https://pouria.dev/programs-are-dead/ https://pouria.dev/programs-are-dead/
- flohofwoe 4y agoLooking in the browser devtools it seems to be a three.js application.
- Kovah 4y agoLooking into the dev tools also reveals that the page tries to load Google Analytics without consent. Not cool.
- poeti8 4y agoI'm sorry, I forgot about that. I removed Google Analytics from my personal website just now.
- flohofwoe 4y agoI didn't think it worth mentioning because it's blocked by uBlock Origin anyway ;)
- KyeRussell 4y agoWhat an absurdly high bar that 99% of the sites on HN certainly don’t reach.
- thiht 4y agoThe law?
- antonvs 4y agoLaws 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.
- tmikaeld 4y agoSuperb! Love the vibe <3
- chunqiuyiyu 4y agoIt's awesome, Love it!
- newswasboring 4y agoAm I the only one uncomfortable clicking on a link called "Unknown Pleasures" on their work laptop? Or is my brain truly rotten?
- noncoml 4y agohttps://en.m.wikipedia.org/wiki/Unknown_Pleasures https://en.m.wikipedia.org/wiki/Unknown_Pleasures
- gpvos 4y agoThe 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 https://news.ycombinator.com/item?id=35401185 which was posted a few hours earlier.
- muzani 4y agoThe last thing I read on HN was something about boobs overtaking the Stable Diffusion community, so yeah, I'm a little uncomfortable too.
- deleted 4y ago[deleted]
- joemi 4y agoWithout knowing the context, being hesitant definitely makes sense. I know the album its referencing and I was still a little apprehensive.
- uvesten 4y agoCongratulations! Soo good (even on an old iPhone)
- poeti8 4y agoGreat, was worried about the performance on smart phones.
- bilekas 4y agoThis 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.
- poeti8 4y agoThank 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.
- greatNespresso 4y agoReally cool ! Is this just JS or using wasm?
- capableweb 4y agoWell, it's WebGL so neither, it runs on the GPU :)
- flohofwoe 4y agoIt appears to be three.js, so there's a lot of Javascript involved too.
- capableweb 4y agoTrue, and HTML too :)
- fsto 4y agothree.js mostly. Here’s the repo: https://github.com/poeti8/unknown-pleasures https://github.com/poeti8/unknown-pleasures
- poeti8 4y agoJavaScript, and a few lines of shaders. You can view the code on GitHub.
- mdhayes 4y agoLove it. Reminds me of the Wilderness Downtown 'music experience' from Arcade Fire in 2010 - http://www.thewildernessdowntown.com http://www.thewildernessdowntown.com
- albertgoeswoof 4y agoAs 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.
- joenot443 4y agoYou 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!
- satao 4y agoHey, 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?
- pfarrell 4y agoIQ= Inigo Quilez. His work is a good entry point. https://iquilezles.org/ https://iquilezles.org/
- CSSer 4y agoI'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/ https://thebookofshaders.com/ (mentioned above, I think) 2. https://threejs.org/docs/ https://threejs.org/docs/ (of course) 3. https://docs.pmnd.rs/react-three-fiber/getting-started/introduction 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/ https://threejs-journey.com/ (a paid course with some good intro lessons as freebies) Hope this helps!
- kurishutofu 4y agoGreat job, I tried something similar (although much less polished) a while back. https://unknown-mp3.netlify.app/#debug https://unknown-mp3.netlify.app/#debug
- tarruda 4y agoA Monday morning unknown pleasure. Thank you.
- kevbin 4y ago𝄆♡䷖𝄇
- nathell 4y ago„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.
- yreg 4y agoThe Again button is so clever!
- darepublic 4y agoThis song isn't a part of the unknown pleasures album. Otherwise this was great but for me a fly in the ointment
- poeti8 4y agoThank you. They have so many great songs, Atmosphere is one my favorites.
- ArtWomb 4y agoCeremony deserves a WebGL treatment as well ;) https://www.youtube.com/watch?v=2zPIod2wjYE https://www.youtube.com/watch?v=2zPIod2wjYE
- throwaway743 4y agoInteresting, never heard this version. Heard only another Joy Division recording of it and New Order's. Digging the lower tempo
- chimeracoder 4y ago> 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.
- jo-m 4y agoSimilar, but different: https://github.com/jo-m/waterfall-plot-webgl/ https://github.com/jo-m/waterfall-plot-webgl/ (I am the author)
- flir 4y agoThat was just lovely. Thank you.
- poeti8 4y agoThanks!
- vorticalbox 4y agoopening 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
- HeckFeck 4y agoExtremely impressive. Meanwhile, I'm struggling to get the text aligned inside this blasted <div> tag...
- christophilus 4y agoI've found what helps with aligning text is to set your laptop on fire and chuck it from a 5th story window.
- HeckFeck 4y agoThanks 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.
- snorkel 4y agoI 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.
- h2odragon 4y agoStart 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.
- guhidalg 4y agoLet's take this offline, we need to get alignment from a few AIs on this one.
- ssss11 4y agoThank Christ someone said it…
- dagw 4y ago
- adzm 4y agoFor those who might have missed the connection, related to https://news.ycombinator.com/item?id=35401185 https://news.ycombinator.com/item?id=35401185 the joy division cover art for their album unknown pleasures
- dang 4y agoThanks! Macroexpanded: The origin of Joy Division’s Unknown Pleasures album cover art (2015) - https://news.ycombinator.com/item?id=35401185 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 https://news.ycombinator.com/item?id=35422570 List of past threads at https://news.ycombinator.com/item?id=35426173 https://news.ycombinator.com/item?id=35426173
- ronyfadel 4y agoThis is the most beautiful thing I’ve seen in a long while
- poeti8 4y agoI appreciate it.
- stuaxo 4y agoFantastic :)
- talkingtab 4y agoOutstanding. 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.
- hahamrfunnyguy 4y agoAfter 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.
- joncrane 4y agoThis 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.
- poeti8 4y agoThank 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.
- BaraBatman 4y agoI once did something like this! Forked from someone who did most of the heavy lifting https://fede.dm/unknown-pleasures/ https://fede.dm/unknown-pleasures/ https://github.com/FdelMazo/unknown-pleasures/ https://github.com/FdelMazo/unknown-pleasures/
- agentwiggles 4y agoThis 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.
- zspitzer 4y agoI 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/1642889834174791687 https://twitter.com/newsycombinator/status/16428898341747916...
- noobcoder 4y agoHow does one go about creating something like this? Is there any tutorials out there? I'm eager to include interactive graphics in my work
- eternalban 4y agoGreat!
- brunovcosta 4y agoGreat work! I love it!
- traviswt 4y agoThis gave me some nostalgic vibes from http://ro.me http://ro.me
- rglover 4y agoThis gave me chills. Whoever made this has a serious capacity for vision. Really well done.
- celaleddin 4y agoBeautiful. Somehow it gave me the vibe of watching a transitional scene from Regular Show.
- avestura 4y agoThis is great! Well done.
- wohfab 4y agoSo fun, didn't even know, they also made the Kutt.it URL shortener, that I am using for quite a while already. Small world...