[{"data":1,"prerenderedAt":591},["ShallowReactive",2],{"project-35419771":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":48,"post_text":50,"what":51,"said":87,"maker_in_thread":233,"shape":245,"grid":249,"attempts":553,"same_week":554,"maker_shows":18,"maker_hidden":583,"reader_version":584,"card":585},"35419771","Unknown Pleasures","A tiny web experiment with WebGL","title","Show HN: Unknown Pleasures, a tiny web experiment with WebGL","https:\u002F\u002Fpouria.dev\u002Funknown-pleasures","pouria.dev","poeti8",1680506881,2023,661,115,29,3109,1,"legend","creative","music visualisation","web_app",[24,25,26,27,28],"webgl","music visualizer","three.js","spectrograph","joy division","mixed",0.543,{"positive":32,"neutral":33,"mixed":34,"critical":35},35,12,2,7,56,{"execution":38,"design":40,"idea":42,"privacy":45,"docs":46,"performance":47},{"positive":34,"critical":39},4,{"positive":41,"critical":34},11,{"positive":43,"critical":44},3,0,{"positive":44,"critical":18},{"positive":44,"critical":44},{"positive":18,"critical":44},[49,43,44,44,44,49,18,44,18,43,49,43,44,44,49,49,43,43,49,18,18,43,18,49,44,49,49,49,49,18,49,49,49,43,44,49,49,49,49,49],5,null,{"problem":50,"audience":50,"pricing":50,"motivation":50,"time_to_build":50,"stack":52,"openness":84,"stage":85,"team_size":86},[53,64,71,77],{"value":26,"source":54,"evidence":55},"commenter",[56,60],{"id":57,"by":58,"text":59},"35420564","flohofwoe","Looking in the browser devtools it seems to be a three.js application.",{"id":61,"by":62,"text":63},"35420667","fsto","three.js mostly. Here’s the repo: https:\u002F\u002Fgithub.com\u002Fpoeti8\u002Funknown-pleasures",{"value":65,"source":54,"evidence":66},"WebGL",[67],{"id":68,"by":69,"text":70},"35420561","capableweb","Well, it's WebGL so neither, it runs on the GPU :)",{"value":72,"source":54,"evidence":73},"JavaScript",[74],{"id":75,"by":58,"text":76},"35420569","It appears to be three.js, so there's a lot of Javascript involved too.",{"value":78,"source":79,"evidence":80},"React Three Fiber","maker",[81],{"id":82,"by":11,"text":83},"35422315","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…","open_source","launched","unknown",{"praise":88,"objections":138,"requests":168,"questions":191,"alternatives":210},[89,108,116,131],{"value":90,"source":54,"evidence":91},"Beautiful, polished visual design and execution",[92,96,100,104],{"id":93,"by":94,"text":95},"35420807","nathell","„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…",{"id":97,"by":98,"text":99},"35421569","ronyfadel","This is the most beautiful thing I’ve seen in a long while",{"id":101,"by":102,"text":103},"35420246","tmikaeld","Superb! Love the vibe \u003C3",{"id":105,"by":106,"text":107},"35430367","celaleddin","Beautiful. Somehow it gave me the vibe of watching a transitional scene from Regular Show.",{"value":109,"source":54,"evidence":110},"Clever 'Again' button and overall vibe",[111,115],{"id":112,"by":113,"text":114},"35420873","yreg","The Again button is so clever!",{"id":93,"by":94,"text":95},{"value":117,"source":54,"evidence":118},"Nostalgic demoscene feel",[119,123,127],{"id":120,"by":121,"text":122},"35419838","MrGilbert","That gives me demo scene vibes. Nice!",{"id":124,"by":125,"text":126},"35428647","neuro","Beautiful. Conjures up memories of the glorious days of the mid 90s.",{"id":128,"by":129,"text":130},"35428565","traviswt","This gave me some nostalgic vibes from http:\u002F\u002Fro.me",{"value":132,"source":54,"evidence":133},"Performs well on old phones",[134],{"id":135,"by":136,"text":137},"35420390","uvesten","Congratulations! Soo good (even on an old iPhone)",[139,146,161],{"value":140,"source":54,"evidence":141},"Google Analytics loaded without consent",[142],{"id":143,"by":144,"text":145},"35421332","Kovah","Looking into the dev tools also reveals that the page tries to load Google Analytics without consent. Not cool.",{"value":147,"source":54,"evidence":148},"Bugs in some browsers (Edge, Brave, sync after Again)",[149,153,157],{"id":150,"by":151,"text":152},"35422396","hahamrfunnyguy","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…",{"id":154,"by":155,"text":156},"35420890","vorticalbox","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",{"id":158,"by":159,"text":160},"35421164","mugr","When playing it \"again\" the animations and sound are not sync anymore. Otherwise great work.",{"value":162,"source":54,"evidence":163},"Text alignment in the page is hard",[164],{"id":165,"by":166,"text":167},"35421019","HeckFeck","Extremely impressive. Meanwhile, I'm struggling to get the text aligned inside this blasted \u003Cdiv> tag...",[169,184],{"value":170,"source":54,"evidence":171},"Video or tutorial on how it was made",[172,176,180],{"id":173,"by":174,"text":175},"35420560","albertgoeswoof","As someone who creates apis and web apps for a living, I’d love to know what the creative \u002F development process for building something like this is? I would love to watch a video…",{"id":177,"by":178,"text":179},"35424744","noobcoder","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",{"id":181,"by":182,"text":183},"35420457","bilekas","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.",{"value":185,"source":54,"evidence":186},"Ceremony treatment in WebGL",[187],{"id":188,"by":189,"text":190},"35422424","ArtWomb","Ceremony deserves a WebGL treatment as well ;) https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=2zPIod2wjYE",[192,199],{"value":193,"source":54,"evidence":194},"Is it JavaScript or WASM?",[195],{"id":196,"by":197,"text":198},"35420522","greatNespresso","Really cool ! Is this just JS or using wasm?",{"value":200,"source":54,"evidence":201},"Where to learn shader and WebGL basics",[202,206],{"id":203,"by":204,"text":205},"35421245","joenot443","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…",{"id":207,"by":208,"text":209},"35421636","satao","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?",[211,218],{"value":212,"source":54,"evidence":213},"Arcade Fire Wilderness Downtown",[214],{"id":215,"by":216,"text":217},"35420557","mdhayes","Love it. Reminds me of the Wilderness Downtown 'music experience' from Arcade Fire in 2010 - http:\u002F\u002Fwww.thewildernessdowntown.com",{"value":219,"source":54,"evidence":220},"Other unknown-pleasures visualisers by commenters",[221,225,229],{"id":222,"by":223,"text":224},"35420699","kurishutofu","Great job, I tried something similar (although much less polished) a while back. https:\u002F\u002Funknown-mp3.netlify.app\u002F#debug",{"id":226,"by":227,"text":228},"35423401","BaraBatman","I once did something like this! Forked from someone who did most of the heavy lifting https:\u002F\u002Ffede.dm\u002Funknown-pleasures\u002F https:\u002F\u002Fgithub.com\u002FFdelMazo\u002Funknown-pleasures\u002F",{"id":230,"by":231,"text":232},"35420808","jo-m","Similar, but different: https:\u002F\u002Fgithub.com\u002Fjo-m\u002Fwaterfall-plot-webgl\u002F (I am the author)",{"comments":234,"answered":34,"key":235},17,[236,239,242],{"id":237,"text":238},"35421991","Thank you. They have so many great songs, Atmosphere is one my favorites.",{"id":240,"text":241},"35426752","Galaxie 500's cover is better than both https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=92Nkrav2-Aw",{"id":243,"text":244},"35421534","I'm sorry, I forgot about that. I removed Google Analytics from my personal website just now.",{"commenters":246,"max_depth":35,"maker_replies":234,"first_comment_mins":247,"lifespan_hours":248},84,9,136,[250,252,254,258,260,262,266,269,271,272,275,278,281,284,287,290,292,294,296,299,303,306,309,312,316,319,322,325,327,330,333,336,337,338,339,342,345,348,350,352,354,356,359,362,366,367,371,374,377,380,383,386,388,389,392,395,397,400,403,406,410,413,416,418,419,421,423,425,426,428,431,432,433,435,437,442,444,446,450,452,455,457,461,463,466,469,473,476,479,481,485,489,491,493,495,498,501,502,503,505,506,510,513,517,519,522,526,530,534,538,542,546,549],[93,44,49,251,94,44],"project\u002Fpositive\u002Fexecution",[112,44,49,253,113,44],"project\u002Fpositive\u002Fdesign",[255,44,43,256,257,44],"35420900","project\u002Fmixed\u002Fidea","darepublic",[237,44,44,259,11,18],"maker\u002Fpositive\u002Fnone",[188,44,43,261,189,44],"project\u002Fneutral\u002Fidea",[263,44,44,264,265,44],"35426654","other\u002Fneutral\u002Fnone","throwaway743",[267,44,44,264,268,44],"35426713","chimeracoder",[270,44,44,264,268,44],"35426655",[240,44,44,264,11,18],[273,44,44,264,274,44],"35498794","kevbin",[276,44,44,264,277,44],"35434922","evanelias",[279,44,44,264,280,44],"35432960","chiefalchemist",[282,18,44,264,283,44],"35421115","adzm",[285,18,44,264,286,44],"35426490","dang",[288,34,49,251,289,44],"35420209","jack_riminton",[57,34,43,291,58,44],"project\u002Fneutral\u002Fnone",[143,34,18,293,144,44],"project\u002Fcritical\u002Fprivacy",[243,34,44,295,11,18],"maker\u002Fneutral\u002Fprivacy",[297,34,43,298,58,44],"35422165","project\u002Fneutral\u002Fprivacy",[300,34,44,301,302,44],"35423356","commenter\u002Fneutral\u002Fprivacy","KyeRussell",[304,34,44,301,305,44],"35423366","thiht",[307,34,44,301,308,44],"35423546","antonvs",[310,34,44,301,311,44],"35423665","readertime",[313,34,18,314,315,44],"35422417","project\u002Fcritical\u002Fexecution","keb_",[317,34,44,318,11,18],"35422496","maker\u002Fneutral\u002Fnone",[320,34,43,321,315,44],"35422915","maker\u002Fneutral\u002Fexecution",[323,34,44,324,289,44],"35424871","commenter\u002Fneutral\u002Fnone",[326,34,44,324,315,44],"35425371",[328,34,44,324,329,44],"35425749","BuildTheRobots",[331,34,44,324,332,44],"35426838","billfruit",[334,34,49,259,335,44],"35448679","Abishek_Muthian",[173,43,43,318,174,44],[203,43,44,264,204,44],[207,43,44,264,208,44],[340,43,44,264,341,44],"35421855","pfarrell",[343,43,44,264,344,44],"35423244","CSSer",[346,43,44,264,347,44],"35424255","andnand",[349,43,44,264,204,44],"35426780",[351,43,44,318,11,18],"35422046",[353,43,43,318,174,44],"35422356",[355,43,44,318,11,18],"35422407",[357,43,49,259,358,44],"35424953","alanbernstein",[360,43,44,264,361,44],"35422209","Diti",[363,39,49,364,365,44],"35423641","project\u002Fpositive\u002Fidea","agentwiggles",[120,49,49,364,121,44],[368,369,43,291,370,44],"35420363",6,"newswasboring",[372,369,44,264,373,44],"35420423","noncoml",[375,369,44,264,376,44],"35420425","gpvos",[378,369,44,264,379,44],"35420877","muzani",[381,369,43,291,382,44],"35429821","joemi",[384,35,49,253,385,44],"35422198","talkingtab",[387,35,44,259,11,18],"35422435",[124,35,49,253,125,44],[165,390,18,391,166,44],8,"project\u002Fcritical\u002Fdesign",[393,390,44,264,394,44],"35421032","christophilus",[396,390,44,264,166,44],"35421074",[398,390,44,264,399,44],"35422847","h2odragon",[401,390,44,264,402,44],"35424008","guhidalg",[404,390,18,391,405,44],"35421091","ssss11",[407,390,43,408,409,44],"35421182","project\u002Fneutral\u002Fdesign","dagw",[411,390,44,324,412,44],"35421397","marginalia_nu",[414,390,44,324,415,44],"35421853","quickthrower2",[417,390,44,324,11,18],"35422220",[150,247,18,314,151,44],[222,420,49,259,223,44],10,[422,420,44,324,379,44],"35420887",[424,420,44,259,11,18],"35422511",[230,41,44,324,231,44],[427,41,44,259,11,18],"35422274",[429,41,44,324,430,44],"35430497","rikroots",[181,33,49,259,182,44],[82,33,44,318,11,18],[97,434,49,253,98,44],13,[436,434,44,259,11,18],"35422328",[438,439,49,440,441,44],"35419992",14,"project\u002Fpositive\u002Fnone","gjadi",[443,439,44,259,11,18],"35422357",[215,445,49,253,216,44],15,[447,448,49,440,449,44],"35422802",16,"joncrane",[451,448,44,318,11,18],"35424916",[453,234,49,253,454,44],"35420003","mach1ne",[456,234,44,259,11,18],"35422358",[458,459,18,314,460,44],"35423954",18,"zspitzer",[226,462,44,324,227,44],19,[158,464,43,465,159,44],20,"project\u002Fmixed\u002Fexecution",[177,467,43,468,178,44],21,"maker\u002Fneutral\u002Fdocs",[470,471,44,264,472,44],"35436150",22,"wohfab",[135,474,49,475,136,44],23,"project\u002Fpositive\u002Fperformance",[477,474,44,478,11,18],"35422371","maker\u002Fneutral\u002Fperformance",[128,480,49,253,129,44],24,[482,483,49,364,484,44],"35429563",25,"rglover",[486,487,49,440,488,44],"35420818",26,"flir",[490,487,44,259,11,18],"35422386",[105,492,49,253,106,44],27,[154,494,18,314,155,44],28,[496,16,49,440,497,44],"35420752","tarruda",[196,499,43,500,197,44],30,"project\u002Fneutral\u002Fexecution",[68,499,44,324,69,44],[75,499,44,324,58,44],[504,499,44,324,69,44],"35420609",[61,499,43,291,62,44],[507,508,49,440,509,44],"35420034",31,"shever73",[511,512,49,253,274,44],"35420765",32,[514,515,49,440,516,44],"35420312",33,"chunqiuyiyu",[101,518,49,253,102,44],34,[520,32,49,440,521,44],"35420047","dmje",[523,524,49,259,525,44],"35430815",36,"avestura",[527,528,49,259,529,44],"35425111",37,"brunovcosta",[531,532,49,259,533,44],"35420216",38,"quintussss",[535,536,49,440,537,44],"35421888",39,"stuaxo",[539,540,49,253,541,44],"35421186",40,"Tepix",[543,544,49,440,545,44],"35424982",41,"eternalban",[547,548,49,440,62,44],"35420054",42,[550,551,49,440,552,44],"35419990",43,"rado",[],[555,560,565,570,574,579],{"id":556,"name":557,"points":558,"category":559},"35370284","StratusGFX",483,"games",{"id":561,"name":562,"points":563,"category":564},"35440552","e2b",369,"dev_tools",{"id":566,"name":567,"points":568,"category":569},"35387160","CoScreen",350,"productivity",{"id":571,"name":572,"points":573,"category":564},"35371469","Gut",314,{"id":575,"name":576,"points":577,"category":578},"35447288","Cheetah",301,"ai",{"id":580,"name":581,"points":582,"category":564},"35427343","Hocus",291,false,"v2",{"id":586,"name":5,"line":6,"ai":583,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":587,"top":18,"kw":588,"maker":11,"domain":10,"tier":19,"attempts":44,"strip":589,"url":9,"mix":590,"praise":90,"objection":140,"sub":21},35419771,0.54,[24,25,26,27,28],"5300051013530055335113150555515553055555",[32,33,34,35],1793991063136]