[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"project-45811093":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":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":45,"post_text":47,"what":48,"said":72,"maker_in_thread":205,"shape":214,"grid":218,"attempts":440,"same_week":441,"maker_shows":352,"maker_hidden":469,"reader_version":470,"card":471},"45811093","Terra (layoutit)","A CSS-Only Terrain Generator","title","Show HN: A CSS-Only Terrain Generator","https:\u002F\u002Fterra.layoutit.com","terra.layoutit.com","rofko",1762264715,2025,371,82,130,3837,4,"legend","creative","terrain generator","web_app",[24,25,26,27],"css terrain generator","isometric terrain","css-only rendering","terrain editor","mixed",0.333,{"positive":31,"neutral":32,"mixed":33,"critical":34},22,18,2,5,47,{"execution":37,"design":39,"idea":42,"docs":43,"performance":44},{"positive":38,"critical":33},1,{"positive":40,"critical":41},14,0,{"positive":33,"critical":33},{"positive":41,"critical":41},{"positive":41,"critical":38},[46,46,46,46,34,46,41,34,34,34,34,46,38,41,41,41,46,34,34,34,34,34,41,41,34,34,38,34,46,41,41,46,38,34,46,34,34,46,34,34],3,null,{"problem":47,"audience":47,"pricing":47,"motivation":47,"time_to_build":47,"stack":49,"openness":70,"stage":71,"team_size":70},[50,62],{"value":51,"source":52,"evidence":53},"CSS","commenter",[54,58],{"id":55,"by":56,"text":57},"45812248","cmiller1","Lots of javascript for a \"css-only\" tool. Looks like just the rendering is css-only.",{"id":59,"by":60,"text":61},"45815477","embedding-shape","The top right button has a \"Download code\" which gives you a .zip file. That .zip file doesn't have any JS in it, and renders the terrain just like in the online editor, except…",{"value":63,"source":52,"evidence":64},"JavaScript",[65,66],{"id":55,"by":56,"text":57},{"id":67,"by":68,"text":69},"45812983","jonahx","You can open up your terrain in codepen with nothing but CSS\u002FHTML, and it renders fine. It's just not interactive \u002F draggable anymore. So the JS is only being used, essentially,…","unknown","launched",{"praise":73,"objections":105,"requests":148,"questions":166,"alternatives":179},[74,90],{"value":75,"source":52,"evidence":76},"Impressive CSS-only rendering achievement that looks like classic sim games",[77,81,85,86],{"id":78,"by":79,"text":80},"45812204","forthwall","Wow this really feels like roller coaster tycoon!!! (I can see lots of people refer to this to their favorite sim game though) Great work!",{"id":82,"by":83,"text":84},"45812134","julius-fx","This is incredible - looks like SimCity 2000.",{"id":67,"by":68,"text":69},{"id":87,"by":88,"text":89},"45812723","paulbjensen","Really cool, especially when I realised you could rotate the terrain and do some zooming as well.",{"value":91,"source":52,"evidence":92},"Evokes Populous, Transport Tycoon and SimCity 2000",[93,97,101],{"id":94,"by":95,"text":96},"45811688","mpeg","Reminds me of Populous! Very cool",{"id":98,"by":99,"text":100},"45812591","andruc","Funny, my mind went to OpenTTD",{"id":102,"by":103,"text":104},"45815286","petepete","While close to SC2000, it's much closer to Transport Tycoon (OpenTTD). https:\u002F\u002Fwww.openttd.org\u002Fscreenshots",[106,118,133],{"value":107,"source":52,"evidence":108},"Not CSS-only: the editor requires JavaScript; only the rendered output works without it",[109,110,114],{"id":55,"by":56,"text":57},{"id":111,"by":112,"text":113},"45812282","MarsIronPI","Yep. Can confirm this does not work with JS disabled. I'm disappointed by the misleading title.",{"id":115,"by":116,"text":117},"45815545","senfiaj","Yeah, it worked, it seems to be a static rendered html with no interactivity though.",{"value":119,"source":52,"evidence":120},"Lag and high CPU use when modifying terrain or rotating",[121,125,129],{"id":122,"by":123,"text":124},"45812659","ModernMech","This thing is killing my CPU, what's the actual bottleneck here for CSS? Is it the number of elements visible and rendered at once? Is it the calculation engine backing CSS is…",{"id":126,"by":127,"text":128},"45813066","em3rgent0rdr","Impressive, but there is a noticeable lag after modifying the terrain or moving the camera. Is there a way to know if the browser is using the GPU or CPU for rendering, and is…",{"id":130,"by":131,"text":132},"45813482","bob1029","It looks like a layout\u002Fstyle\u002Fcomposition issue with the browser engine. In Safari I'm seeing 91% CPU time on paint, 6% on layout, 2% on styles. It looks like it's taking…",{"value":134,"source":52,"evidence":135},"Rendering glitches, including with Dark Reader",[136,140,144],{"id":137,"by":138,"text":139},"45811963","RugnirViking","Really reminds me of openttd, especially the sandy border around the water Looks really cool and runs great on my phone. Seems like there's some kind of rendering bug in the…",{"id":141,"by":142,"text":143},"45812237","w4yai","I got some rendering issues, but otherwise very cool ! https:\u002F\u002Fi.imgur.com\u002FqT6ozyh.png Firefox 144.0.2, Windows",{"id":145,"by":146,"text":147},"45812305","ryukoposting","Dark Reader mutilates the rendered output, but only certain tiles. No clear pattern as to what tiles get mangled. Peculiar.",[149,159],{"value":150,"source":52,"evidence":151},"Add lakes, rivers and waterfalls",[152,156],{"id":153,"by":154,"text":155},"45812997","nefarious_ends","Very cool! Do you think it’s possible to do lakes and waterfalls?",{"id":157,"by":11,"text":158},"45813100","Definitely! I'm planning for more landscape features for next versions. I think rivers will be a great addition, and waterfalls\u002Frapids sound really interesting too. In the end…",{"value":160,"source":52,"evidence":161},"Add a flatten tool",[162],{"id":163,"by":164,"text":165},"45812523","stefs","1. what's a layou tit? 2. does it sometimes raise \u002F lower by 2 units? 3. the \"flatten\" tool is missing.",[167,174],{"value":168,"source":52,"evidence":169},"Is it really CSS-only given the JavaScript?",[170,173],{"id":171,"by":116,"text":172},"45813436","When I turn off JS, it shows a loader instead of the terrain. Is this really CSS-Only? I mean it's still a high achievement even with JS, but was expecting it would also work…",{"id":55,"by":56,"text":57},{"value":175,"source":52,"evidence":176},"Is the bottleneck CPU or GPU rendering?",[177,178],{"id":122,"by":123,"text":124},{"id":126,"by":127,"text":128},[180,185,193,201],{"value":181,"source":52,"evidence":182},"OpenTTD \u002F Transport Tycoon Deluxe",[183,184],{"id":98,"by":99,"text":100},{"id":102,"by":103,"text":104},{"value":186,"source":52,"evidence":187},"Populous",[188,189],{"id":94,"by":95,"text":96},{"id":190,"by":191,"text":192},"45813104","devmor","Reminded me quite a bit of Populous[1] as well. 1. https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPopulous_(video_game)",{"value":194,"source":52,"evidence":195},"SimCity 2000",[196,197],{"id":82,"by":83,"text":84},{"id":198,"by":199,"text":200},"45815136","mikepurvis","The colouring is brown for SC2000, but the geometry is basically identical; I definitely got the same energy from it.",{"value":202,"source":52,"evidence":203},"Benjamin Aster's CSS Minecraft",[204],{"id":171,"by":116,"text":172},{"comments":46,"answered":38,"key":206},[207,210,211],{"id":208,"text":209},"45812227","Thank you! Populous and Transport Tycoon were two big inspirations for sure :)",{"id":157,"text":158},{"id":212,"text":213},"45812276","Thanks for the report! Are you using a dark mode extension by any chance? I’ve seen that happen with Dark Reader in Chrome.",{"commenters":215,"max_depth":34,"maker_replies":46,"first_comment_mins":216,"lifespan_hours":217},66,54,27,[219,221,225,228,232,235,236,238,241,242,244,246,250,253,256,259,262,263,266,269,272,275,278,280,282,283,286,289,291,293,295,297,300,304,307,310,312,313,317,320,321,322,324,325,328,331,333,336,338,340,343,347,350,355,358,362,364,367,368,372,375,377,380,382,384,386,390,393,394,397,399,403,405,408,412,416,420,423,425,429,432,436],[171,41,46,220,116,41],"project\u002Fneutral\u002Fexecution",[222,41,46,223,224,41],"45813495","project\u002Fneutral\u002Fnone","arbll",[226,41,46,220,227,41],"45814014","psygn89",[229,41,41,230,231,41],"45814016","commenter\u002Fneutral\u002Fnone","nightpool",[233,41,41,230,234,41],"45815351","thih9",[59,41,46,220,60,41],[237,41,41,230,234,41],"45815609",[239,41,46,220,240,41],"45814791","decimaldesign",[115,41,46,220,116,41],[78,38,34,243,79,41],"project\u002Fpositive\u002Fdesign",[98,38,46,245,99,41],"project\u002Fneutral\u002Fdesign",[247,38,41,248,249,41],"45812656","other\u002Fneutral\u002Fnone","mig39",[251,38,41,248,252,41],"45815664","lawlessone",[254,38,41,248,255,41],"45817589","brendoelfrendo",[257,38,46,245,258,41],"45814192","hulium",[260,38,34,243,261,41],"45812887","Igrom",[190,38,34,243,191,41],[264,38,41,230,265,41],"45818960","elyobo",[267,38,41,230,268,41],"45813271","worldai",[270,38,34,243,271,41],"45813599","yreg",[273,38,34,243,274,41],"45815482","accrual",[276,38,41,248,277,41],"45819463","qingcharles",[279,38,34,243,252,41],"45815292",[55,33,38,281,56,41],"project\u002Fcritical\u002Fidea",[111,33,38,281,112,41],[284,33,41,248,285,41],"45812747","shermantanktop",[287,33,41,248,288,41],"45812946","Elfener",[290,33,41,248,285,41],"45816063",[292,33,41,248,112,41],"45824866",[294,33,41,230,60,41],"45812298",[296,33,41,230,56,41],"45812325",[298,33,41,230,299,41],"45812362","DonaldPShimoda",[301,33,46,302,303,41],"45812423","project\u002Fneutral\u002Fdocs","bogwog",[305,33,46,302,306,41],"45813382","tantalor",[308,33,41,248,309,41],"45816509","91bananas",[67,33,34,311,68,41],"project\u002Fpositive\u002Fexecution",[82,46,34,243,83,41],[314,46,41,315,316,41],"45813251","commenter\u002Fneutral\u002Fdesign","lloydatkinson",[318,46,41,315,319,41],"45814576","neogodless",[198,46,34,243,199,41],[102,46,46,245,103,41],[137,18,46,323,138,41],"project\u002Fmixed\u002Fexecution",[94,34,34,243,95,41],[326,34,34,243,327,41],"45811867","johnh-hn",[329,34,41,248,330,41],"45812355","dylan604",[332,34,41,248,327,41],"45812549",[334,34,41,248,335,41],"45813133","linsomniac",[337,34,41,248,330,41],"45813504",[208,34,41,339,11,38],"maker\u002Fneutral\u002Fnone",[341,34,34,342,327,41],"45812541","maker\u002Fpositive\u002Fnone",[344,34,46,345,346,41],"45812563","project\u002Fneutral\u002Fidea","drcursor",[348,34,34,243,349,41],"45815871","chubs",[351,352,34,353,354,41],"45812908",6,"project\u002Fpositive\u002Fidea","bodge5000",[122,356,38,357,123,41],7,"project\u002Fcritical\u002Fperformance",[359,356,46,360,361,41],"45820394","project\u002Fneutral\u002Fperformance","kachapopopow",[87,363,34,243,88,41],8,[126,365,46,366,127,41],9,"project\u002Fmixed\u002Fperformance",[130,365,46,360,131,41],[369,370,41,248,371,41],"45812562",10,"EGreg",[373,370,41,248,374,41],"45812744","mock-possum",[376,370,41,248,371,41],"45813110",[378,370,41,248,379,41],"45815045","o11c",[381,370,41,248,371,41],"45825285",[153,383,46,345,154,41],11,[157,383,41,385,11,38],"maker\u002Fneutral\u002Fidea",[387,388,41,248,389,41],"45816303",12,"kataqatsi",[141,391,38,392,142,41],13,"project\u002Fcritical\u002Fexecution",[212,391,41,339,11,38],[395,40,34,243,396,41],"45813025","throwaway2037",[145,398,38,392,146,41],15,[400,401,34,353,402,41],"45819614",16,"docmars",[163,404,46,245,164,41],17,[406,32,34,243,407,41],"45819195","ForgetItJake",[409,410,46,345,411,41],"45812789",19,"hersko",[413,414,34,342,415,41],"45812593",20,"iagorodriguez",[417,418,46,345,419,41],"45811977",21,"cluckindan",[421,418,41,230,422,41],"45812663","all2",[424,418,41,230,419,41],"45814708",[426,31,34,427,428,41],"45812233","project\u002Fpositive\u002Fnone","robertheadley",[430,431,34,342,268,41],"45813273",23,[433,434,34,342,435,41],"45811673",24,"jimmydin7",[437,438,41,248,439,41],"45812437",25,"OldGreenYodaGPT",[],[442,446,451,455,460,465],{"id":443,"name":444,"points":445,"category":20},"45777810","Strange Attractors",804,{"id":447,"name":448,"points":449,"category":450},"45825733","book.sv",606,"ai",{"id":452,"name":453,"points":454,"category":450},"45783640","nokode",436,{"id":456,"name":457,"points":458,"category":459},"45760321","0github",265,"dev_tools",{"id":461,"name":462,"points":463,"category":464},"45758421","roberdam.com",247,"finance_crypto",{"id":466,"name":467,"points":468,"category":20},"45826472","See chords as flags",129,false,"v2",{"id":472,"name":5,"line":6,"ai":469,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":473,"top":18,"kw":474,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":475,"url":9,"mix":476,"praise":75,"objection":107,"sub":21},45811093,0.33,[24,25,26,27],"3333530555531000355555005515300315355355",[31,32,33,34],1794036685250]