7 ms·
JS1024 Results – 1k JavaScript Demos
- tyingq 6y agoThe site is unusable in portrait orientation on a phone. You can't see the [X] to dismiss the pop up divs unless you rotate the phone to horizontal.
- vesinisa 6y agoI only get a secure connection error with Firefox 79 (on ArchLinux) when trying to connect to that domain. The certificate configuration seems to be missing some intermediate certs: https://www.sslshopper.com/ssl-checker.html#hostname=js1024.fun https://www.sslshopper.com/ssl-checker.html#hostname=js1024.... https://www.ssllabs.com/ssltest/analyze.html?d=js1024.fun https://www.ssllabs.com/ssltest/analyze.html?d=js1024.fun
- fasfsafsa 6y agoi fucking hate javascript
- speedgoose 6y agoI like poneys.
- nlh 6y agoThere’s something ironic about a site hosting intentionally tiny snippets of code that’s crashed / sluggish under the social media hug of death... BUT - the few that I’ve managed to see are super cool, so when it comes back to life it’s worth checking out!
- jakear 6y agoQuestion for people that run websites that have been “hug of death”ed: would your website be able to be statically hosted on something like github pages, if no why not — if yes why do you choose not to, given it is free and would make all scaling troubles go away (or so I’ve heard).
- dna_polymerase 6y agoSure most websites could easily served as static files on a server, but advocating for everything to be hosted on a single proprietary service is not a good idea. But hosting an Apache or nginx to serve static files is easy enough and a single $5 or $10 instance on any hosting service out there could easily survive a HN frontpage.
- jakear 6y agoNot advocating for any service in particular (though disclaimer I do work at msft), I’m honestly wondering why someone would choose to ship a website as a server running on a hardware time slot rental with all the setup, cost, inscalability, and management that requires, as opposed to a free cdn that gives you a website with only some markdown.
- lifthrasiir 6y agoMainly because it was not a mere markdown. You can't see right now, but it had submission forms with previews and rating forms. Yes, you can route dynamic parts to elsewhere, but it was not really static for a while.
- hombre_fatal 6y ago
- jjcm 6y agoI really appreciate how well documented a lot of the source files are. There are a lot of cool golf hacks/tricks in these! i.e.: https://js1024.fun/demos/2020/16/source https://js1024.fun/demos/2020/16/source
- lifthrasiir 6y agoBesides from being one of the winners (AquaPop1K), I also had a pleasure to read every single source code to rate submissions (as every submitter could rate other entries). I recommend to do the same if you have time.
- lifthrasiir 6y agoPost-mortem writeups by submitters: Frank Force: https://frankforce.com/?p=7617 https://frankforce.com/?p=7617 (1st place) Raimon Ràfols: http://blog.rafols.org/index.php/2020/07/21/javascript-balloon-1k-postmortem/ http://blog.rafols.org/index.php/2020/07/21/javascript-ballo... (10th place) Mattia Fortunati: https://www.mattiafortunati.com/detective-moji-postmortem-a-javascript-game-in-just-1024-bytes/ https://www.mattiafortunati.com/detective-moji-postmortem-a-... (16th place)
- vanderZwan 6y ago> Frank Force Hey, that's the guy who did Bounce Back[0] for JS13K! He's got some pretty cool stuff on his website EDIT: Wait a minute, that's KilledByAPixel, who submitted this link [0] http://frankforce.com/?p=6936 http://frankforce.com/?p=6936
- dietrichepp 6y agoI haven’t written a post-mortem but I’ll take a quick stab here, and post a more polished post-mortem on my website later. My demo is Star Traveler, which placed #1 in the 2D Canvas category. The GitHub repository is here: https://github.com/depp/demo-traveler https://github.com/depp/demo-traveler Source code: https://github.com/depp/demo-traveler/blob/trunk/src.js https://github.com/depp/demo-traveler/blob/trunk/src.js What I like about 1K demos is that you can make them in a relatively short amount of time—something like a week or so, without taking time off. After a week of work I was happy with what I had written, out of space, and had diminishing returns when I attempted to reduce the size. By comparison, JS13K can be a lot more work. The first thing I did was set up a development environment which would reload in the browser every time I saved changes. The development page showed the number of bytes left at the top of the screen and put the exact, submission-ready code in an iframe. Saving changes would trigger everything to be minified and packed again. Packing is done with Terser -> RegPack. No potentially incompatible techniques like method hashing were used, but that’s probably because I didn’t see a size improvement when I tried them. There are some custom transformations on the code during compilation, mostly so I could have ESLint watch my back. The demo itself has three parts to it. Most of the objects are rendered by callback functions, and there’s a big array of callback functions in back-to-front order. The function closures contain any generated data necessary for drawing the data. The parts are: 1. Mountains and clouds, which are just simple midpoint displacement fractals. The mountains were flipped upside down and stretched to make clouds. Various techniques for generating a fractal were tried, a recursive functional approach ended up being the smallest. 2. Stars, which are just randomly placed in 3D space and randomly resized each frame to make them twinkle. 3. The planet, which is drawn separately. The submitted version draws it over the clouds. This was fixed in the repo, but not re-submitted. Notes on technique: - Path2D turns out to be a very efficient way to specify a path for a Canvas. It uses an SVG path string to specify the path, which is more compact than using .moveTo() and .lineTo(). There is room for improvement. - The 'color' function is a beast, it lets you represent an RGB color as a 3-digit number from 111 to 999, and calculate things like gradients. There was a lot of tweaking to get colors that I liked. - Did a lot of inlining and un-inlining of functions at the end. For example, if a function f(x) is defined like f(x) = 4 * ..., then you can move the constant out of the function, or into the function from the call sites. - Checked the minified code to see how functions were being emitted. If they were emitted as (x) => { a; b; }, I would try to change the code so they could be emitted as (x) => (a,b). - RegPack gives you limited space savings for repetitive code, so use it. - If you need local variables, just add arguments to your function and use those.
- throwaway_pdp09 6y agoIt's slow AF because the smallish images are in fact much larger but shrunk and many animated on top of that. So far that page has pulled 15MB down and is still going. Edit: up to 24.5MB now. Edit: 34.5MB now and still going Edit: 44.4MB and still going. It's clearly slowing down badly. I'm killing it.
- chrismorgan 6y ago“Shedding snake” reminds me of a game I made on my Casio CFX-9850GB+ Color in high school. It started out as snake, but keeping track of the positions of the snake’s pixels in an array or matrix, even if treating it as a ring buffer so you weren’t constantly shuffling all the values in it, was really slow, so that by the time the snake was even six pixels long there was not the slightest bit of challenge to it because it was moving less than two pixels per second (and by ten, below one). So I turned it into what I called Snail Trail, with it just laying down pixels behind it and never keeping track of them, because you could query “is this pixel filled?” much more rapidly (and it was O(1) rather than O(n²) or worse). That was much faster, and I rapidly worked out the optimal strategy. A year or two later I transferred it to someone’s newer model of calculator which was generally about six times as fast, and… yeah, I had to insert busy loops to make it playable! I had good times with that calculator. 32KB taught me frugality not unlike that needed for competitions like JS1024, and how to find that there was a character/instruction akin to a semicolon in Python that took one byte, where the new line character/instruction took two bytes. (I only obtained a manual for the calculator after having it for two years. Figured out one or two new tricks after that, but I’d worked almost everything possible out by trial and error.) So power efficient, too: I changed the four AAA batteries only twice in more than three years of very heavy usage (looking back on it, I probably got more than 200h of life from each set), while all the rest of the class that had the newer, faster version (except one other who had the same model as me) would need to change them around once a term, and they didn’t use their calculators even a quarter as much as me. I’m going to guess figures of a CPU 6× as fast and power consumption 30× as high. And those newer ones were even only monochrome rather than three-colour LCD. Then after I left they shifted to CAS calculators and battery life was a zillion times worse again. And laptops, phones and such will be even worse still. Ah well.
- Extigy 6y agoMy lockdown project has been hacking up my CFX-9850G calculator. So far I have physically removed the ROM of the calculator and replaced it with a new ROM (I was able to get old-stock chips from aliexpress) flashed with a patched version of the original OS that includes a new BASIC command to jump to a fixed location in RAM and start executing whatever is there. This means I can write and run arbitrary machine code in the calculator’s RAM by abusing the built in backup feature. The Hitachi CPU in the calculator is quite strange but by working with the little information I can find online [1] I have written an assembler and linker for creating compatible machine code from a custom assembly language. The resulting code runs much faster than in BASIC because it doesn’t have to be interpreted. Here [2] is a video of the calculator jumping into RAM and running a Game of Life program that I wrote when Conway died. I’m currently writing code to run the 3-colour display for a replacement Forth-like shell/OS with the aim to eventually get to the point where I can replace the calculator ROM completely with my own. Writing my own mathematical functions for a calculator is fun when (AFAIK) the CPU itself lacks even multiplication opcodes. [1] http://martin.poupe.org/casio/ http://martin.poupe.org/casio/ [2] https://youtu.be/cTB5YM898g4 https://youtu.be/cTB5YM898g4
- LeonM 6y agoThat 'Wetlands' demo (winner in shader class) is completely borked in my browser (FF 79, Linux).
- jlokier 6y agoSame here, Firefox 80.0b2, MacOS 10.15. But it's not Firefox: I see exactly the same artifacts with Safari 13.1.2. (Safari is also much slower with this demo than Firefox.) Surprisingly, it depends which GPU it starts with, not the one it's running on. Some Macbooks have two GPUs, only one active at a time. If Wetlands is started with the Intel GPU active, it looks fine, and continues to look fine if the GPU is switched to nVidia. But if started with the nVidia GPU active, it looks a mess, lots of colour noise, and continues to look that way if the GPU is switched to Intel. I've checked all combinations and found the same on both Firefox and Safari. So I guess it's probably the underlying OpenGL driver. I'm relieved, this means it's not a faulty GPU :-)
- flywheel 6y agoIf you enjoy this kind of thing, check out the wizardry/madness over at https://www.dwitter.net/ https://www.dwitter.net/ - javascript animations in 140 bytes (the size of a tweet, hence the name, "dwitter").
- terrycody 6y agoyeah already bookmarked that website, pretty cool!
- Traubenfuchs 6y agoThanks. In 10 minutes I have seen more art than one can see in the average museum of modern art.
- smusamashah 6y agoI though this is same as https://js1k.com/ https://js1k.com/ it's not
- value0null 6y agoJs1k closed 1 year ago.
- jacquesm 6y agoBad time to have your cert go bad on you.
- ggregoire 6y agoI'm not into graphics/games development so that might be why, but I had never heard of Shaders (the third category), which doesn't look at all like JavaScript. Demo: https://js1024.fun/demos/2020/12 https://js1024.fun/demos/2020/12 Source code: https://js1024.fun/demos/2020/12/source https://js1024.fun/demos/2020/12/source Shaders: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders https://developer.mozilla.org/en-US/docs/Games/Techniques/3D...
- iainmerrick 6y agoIt’s WebGL. Check out https://www.shadertoy.com/ https://www.shadertoy.com/ for lots more of these demos. You can do some really amazing stuff.