[HN Gopher] Show HN: Unknown Pleasures, a tiny web experiment wi...
___________________________________________________________________
Show HN: Unknown Pleasures, a tiny web experiment with WebGL
Author : poeti8
Score : 610 points
Date : 2023-04-03 07:28 UTC (15 hours ago)
(HTM) web link (pouria.dev)
(TXT) w3m dump (pouria.dev)
| Tepix wrote:
| Very slick!
| kurishutofu wrote:
| Great job, I tried something similar (although much less
| polished) a while back. https://unknown-mp3.netlify.app/#debug
| poeti8 wrote:
| Nice, thanks for sharing!
| muzani wrote:
| This made me realize I have no MP3s anymore :(
| bilekas wrote:
| 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.
| poeti8 wrote:
| 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.
| jack_riminton wrote:
| 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/
| flohofwoe wrote:
| Looking in the browser devtools it seems to be a three.js
| application.
| Kovah wrote:
| Looking into the dev tools also reveals that the page tries
| to load Google Analytics without consent. Not cool.
| poeti8 wrote:
| I'm sorry, I forgot about that. I removed Google Analytics
| from my personal website just now.
| KyeRussell wrote:
| What an absurdly high bar that 99% of the sites on HN
| certainly don't reach.
| thiht wrote:
| The law?
| antonvs wrote:
| 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.
| [deleted]
| readertime wrote:
| [flagged]
| flohofwoe wrote:
| I didn't think it worth mentioning because it's blocked by
| uBlock Origin anyway ;)
| keb_ wrote:
| 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/
| poeti8 wrote:
| That's why I wrote the blog post.
| billfruit wrote:
| 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.
| keb_ wrote:
| 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).
| jack_riminton wrote:
| 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.
| keb_ wrote:
| 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.
| BuildTheRobots wrote:
| 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.
| keb_ wrote:
| Yeah, I believe that is what happened here. See the
| author's comment:
| https://news.ycombinator.com/item?id=35422496
| quintussss wrote:
| Very cool, great work.
| tarruda wrote:
| A Monday morning unknown pleasure. Thank you.
| joncrane wrote:
| 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.
| poeti8 wrote:
| 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.
| rado wrote:
| Awesome
| tmikaeld wrote:
| Superb! Love the vibe <3
| brunovcosta wrote:
| Great work! I love it!
| gjadi wrote:
| You know it's good when at the end you're thinking: already?
|
| Thank you. That was really nice.
| poeti8 wrote:
| Glad you liked it!
| HeckFeck wrote:
| Extremely impressive. Meanwhile, I'm struggling to get the text
| aligned inside this blasted <div> tag...
| poeti8 wrote:
| 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.
| christophilus wrote:
| I've found what helps with aligning text is to set your laptop
| on fire and chuck it from a 5th story window.
| HeckFeck wrote:
| 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.
| guhidalg wrote:
| Let's take this offline, we need to get alignment from a
| few AIs on this one.
| h2odragon wrote:
| 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.
| snorkel wrote:
| 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.
| quickthrower2 wrote:
| display:flex
|
| then just justify align items self thingy
| ssss11 wrote:
| Thank Christ someone said it...
| marginalia_nu wrote:
| Or, how I learned to stop worrying and love position:absolute.
| dagw wrote:
| 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.
| kevbin wrote:
| [?]
| mach1ne wrote:
| The length of that demo was mathematically perfect.
| poeti8 wrote:
| Thanks!
| greatNespresso wrote:
| Really cool ! Is this just JS or using wasm?
| capableweb wrote:
| Well, it's WebGL so neither, it runs on the GPU :)
| flohofwoe wrote:
| It appears to be three.js, so there's a lot of Javascript
| involved too.
| capableweb wrote:
| True, and HTML too :)
| poeti8 wrote:
| JavaScript, and a few lines of shaders. You can view the code
| on GitHub.
| fsto wrote:
| three.js mostly. Here's the repo:
| https://github.com/poeti8/unknown-pleasures
| ronyfadel wrote:
| This is the most beautiful thing I've seen in a long while
| poeti8 wrote:
| I appreciate it.
| shever73 wrote:
| Fantastic! Thanks for sharing.
| nathell wrote:
| ,,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.
| poeti8 wrote:
| Thank you. They have so many great songs, Atmosphere is one my
| favorites.
| yreg wrote:
| The Again button is so clever!
| ArtWomb wrote:
| Ceremony deserves a WebGL treatment as well ;)
|
| https://www.youtube.com/watch?v=2zPIod2wjYE
| throwaway743 wrote:
| Interesting, never heard this version. Heard only another Joy
| Division recording of it and New Order's. Digging the lower
| tempo
| chimeracoder wrote:
| > 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.
| chimeracoder wrote:
| <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.
| poeti8 wrote:
| Galaxie 500's cover is better than both
|
| https://www.youtube.com/watch?v=92Nkrav2-Aw
| darepublic wrote:
| This song isn't a part of the unknown pleasures album.
| Otherwise this was great but for me a fly in the ointment
| jo-m wrote:
| Similar, but different: https://github.com/jo-m/waterfall-plot-
| webgl/
|
| (I am the author)
| poeti8 wrote:
| Nice! I looked for similar projects and inspiration before
| creating mine and I remember seeing yours and bookmarking it.
| rikroots wrote:
| If we're sharing similar but different ...
| https://codepen.io/kaliedarik/pen/BaLZYwJ
|
| (Sadly without music)
| mdhayes wrote:
| Love it. Reminds me of the Wilderness Downtown 'music experience'
| from Arcade Fire in 2010 - http://www.thewildernessdowntown.com
| dmje wrote:
| Love it
| albertgoeswoof wrote:
| 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.
| Diti wrote:
| 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
| joenot443 wrote:
| 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!
| satao wrote:
| 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?
| pfarrell wrote:
| IQ= Inigo Quilez. His work is a good entry point.
|
| https://iquilezles.org/
| CSSer wrote:
| 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!
| andnand wrote:
| 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.
| joenot443 wrote:
| 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!
| poeti8 wrote:
| 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!
| albertgoeswoof wrote:
| Actually a video from someone who has just learnt can be more
| valuable, as you have the closest perspective to the viewer
| poeti8 wrote:
| Exactly, I might do it fast then, before learning more. :P
| alanbernstein wrote:
| I would definitely watch it!
| flir wrote:
| That was just lovely. Thank you.
| poeti8 wrote:
| Thanks!
| fsto wrote:
| Love it!
| chunqiuyiyu wrote:
| It's awesome, Love it!
| agentwiggles wrote:
| 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.
| avestura wrote:
| This is great! Well done.
| BaraBatman wrote:
| 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/
| adzm wrote:
| 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
| dang wrote:
| 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
| rglover wrote:
| This gave me chills. Whoever made this has a serious capacity for
| vision. Really well done.
| hahamrfunnyguy wrote:
| 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.
| MrGilbert wrote:
| That gives me demo scene vibes. Nice!
| stuaxo wrote:
| Fantastic :)
| newswasboring wrote:
| Am I the only one uncomfortable clicking on a link called
| "Unknown Pleasures" on their work laptop? Or is my brain truly
| rotten?
| noncoml wrote:
| https://en.m.wikipedia.org/wiki/Unknown_Pleasures
| gpvos wrote:
| 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.
| joemi wrote:
| Without knowing the context, being hesitant definitely makes
| sense. I know the album its referencing and I was still a
| little apprehensive.
| muzani wrote:
| The last thing I read on HN was something about boobs
| overtaking the Stable Diffusion community, so yeah, I'm a
| little uncomfortable too.
| [deleted]
| zspitzer wrote:
| 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...
| traviswt wrote:
| This gave me some nostalgic vibes from http://ro.me
| eternalban wrote:
| Great!
| vorticalbox wrote:
| 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
| celaleddin wrote:
| Beautiful.
|
| Somehow it gave me the vibe of watching a transitional scene from
| Regular Show.
| uvesten wrote:
| Congratulations! Soo good (even on an old iPhone)
| poeti8 wrote:
| Great, was worried about the performance on smart phones.
| noobcoder wrote:
| 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
| mugr wrote:
| When playing it "again" the animations and sound are not sync
| anymore. Otherwise great work.
| talkingtab wrote:
| 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.
| poeti8 wrote:
| Thanks for your kind words! I'm happy it had an impact, even if
| a small one.
| neuro wrote:
| Beautiful. Conjures up memories of the glorious days of the
| mid 90s.
___________________________________________________________________
(page generated 2023-04-03 23:02 UTC)