7 ms·
JS1k demo: “Highway at Night”
- lelandbatey 12y agoFor best musical accompaniment to this, I recommend Stage7's "8-bit Mentality"[0]. [0] - https://soundcloud.com/stage7/8-bit-mentality https://soundcloud.com/stage7/8-bit-mentality
- ANTSANTS 12y agoSurely you meant this: https://www.youtube.com/watch?v=MV_3Dpw-BRY https://www.youtube.com/watch?v=MV_3Dpw-BRY
- sEEKz 12y agoThe making of "Highway at Night": http://jsriffs.blogspot.fi/2014/05/making-of-highway-at-night.html http://jsriffs.blogspot.fi/2014/05/making-of-highway-at-nigh...
- TazeTSchnitzel 12y agoThe visual trickery is fun. I hadn't noticed that only the centre lines on the road glow until reading that, nor had I noticed that the street lights don't actually have a thin line linking the pole and the light.
- michaelmior 12y agoI don't think the street lights are supposed to be on poles. It appears to be a tunnel with lights mounted overhead.
- TazeTSchnitzel 12y agoBut they're called street lights and they aren't in the tunnel!
- michaelmior 12y agoHa! Sorry, clearly I didn't let it run long enough. I closed it because it lags pretty hard for me.
- TylerE 12y agoLet it run longer. There are at least 4 distinct sections, including a city.
- adamcanady 12y agoWow. I can make sense of a little bit of the original source, but I wonder more how RegPack [0] works to compress it into that final submission! As a side note: I'm in college now and looking to propose an independent study on compression. Any suggested readings or algorithms I should look into? [0] https://github.com/Siorki/RegPack https://github.com/Siorki/RegPack
- tormeh 12y agoPrincipal component analysis and then ignoring the least important components is the only compression technique I know. Hope it helps.
- sampo 12y agoWell that is a lossy compression, can work nicely to some data (e.g. images), but totally irrelevant in the context of source code compression.
- tormeh 12y agoWell, he didn't say he only wanted non-lossy compression or that he was working on source code compression.
- vardump 12y agoLossy compression might be just fine for source code, as long as the lossy part is still functionally equivalent. Think 1000.0 vs 1E3, printf("foo") vs puts("foo"), etc.
- mistercow 12y agoAnd in fact, RegPack is lossy compression (as are all minifiers). The transformation is totally irreversible.
- mistercow 12y agoFor lossless compression, start out by reading up on run length encoding, which is about as simple as it gets. Then there's DEFLATE, which is what's behind gzip. You'll also want to read up on Huffman coding and arithmetic coding. One of the newer ideas in lossless compression is "context mixing", which is definitely worth reading up on. The Burrows–Wheeler transform is pretty fascinating, albeit slow, so you might want to read about that as well. Lossy compression (which RegPack is actually an example of), typically involves lossless compression plus a preprocessing step to discard information so that the lossless compressor can do a better job. The techniques for discarding information vary based on application. For images and audio, the most successful techniques tend to involve working in frequency space, so you'll want to read up on the FFT and related transforms. For code compression, you have different constraints when discarding information because you have to produce a program with identical output to the original. Simple techniques involve removing comments and renaming variables to have shorter names. More advanced techniques involve more complex transformations of the AST, including language-specific tricks like wrapping javascript in a "with(Math){}" block. Hope some of that helps.
- dsl 12y agoYou can see all the submissions at http://js1k.com/2014-dragons/demos http://js1k.com/2014-dragons/demos My favorite: http://js1k.com/2014-dragons/demo/1868 http://js1k.com/2014-dragons/demo/1868
- thomasfl 12y agoSome of the other demo's quickly makes my Macbook Pro's fan make noise. This cute 3d demo can go on forever without any noise. And it even has reflection and (fake) shadows.
- padenot 12y agoThat's because it uses WebGL and not Canvas2D.
- andrey-p 12y agoI really enjoyed playing around with the winner (http://js1k.com/2014-dragons/demo/1903 http://js1k.com/2014-dragons/demo/1903), but I'm somehow surprised Highway At Night didn't win. Is there something about the winner's implementation that's particularly amazing?
- eli 12y agoThey're all pretty cool. Maybe bonus points for interactivity?
- neals 12y agoHow does this loop work ?Does this create an array where B,F,Z,D and i are 0? for(T=[B=F=Z=D=i=0];i<600;i++)
- delan 12y agoThe loop first sets B, F, Z, D and i all to zero. Then it sets T to a new array containing one element, zero. The key here is that = is a right-associative expression operator which yields the right operand.
- dorgo 12y agoI would say: T is an array containing one element which is zero.
- zaroth 12y agoImage the '0' walking left, because it as to follow the =, everything it touches on that path, turns to zero and disappears. What are you left with? Just '0'. The block quotes provide containment.
- derekp7 12y agoTo expand on the other explanations, this can be: T=[0],B=0,F=0,Z=0,D=0,i=0
- thomasfl 12y agoThis demo gives some ideas about how the human brain manages to remember events. With just a few lines of code, containing very little information, it generates something we perceive as a very detailed record of a highway trip at night. Even if we don't know exactly what tricks the human brain uses to compress information about places and events, this demo let's us imagine how some of it might be done. The human brain is a master at recognising and codifying geometric 3d shapes. The developer who created this is a master at coding geometric shapes and transitions in javascript as well.
- dorgo 12y agojava script remembers events this way. Dont see how one can apply this to human brain..
- thomasfl 12y agoHow can the human brain remember hours of highway trips in basically 3 pounds of fat without using some tricks to convert the information in to geometric 3d shapes? The developer who created this demo also know how to do it the other way round, he can write javascript that generate simple geometric shapes and animated transitions in javascript that generates a pretty good rendition of a highway trip at night.
- dorgo 12y agoI doubt that (all) humans think in javascript :P Im sure the brain has its tricks, but they dont need to have something in common with the ones used here. I wonder what Kolmogorov Complexity this program has. Obviously <= 1023.
- jacquesm 12y agoHow does Kolmogorov Complexity deal with the fact that you're specifying that number within a certain execution context (in this case JavaScript)? Otherwise you could simply reduce the program to a single bit and have an interpreter that includes the original program as a primitive. This program without the libraries that it accesses would be a lot larger than it is. Also, shouldn't the number be expressed in bits rather than bytes?
- anonfunction 12y agoThis is so very impressive. I like how it uses canvas to make the moon: // Moon c.fillText("(",99,-99);
- robmcm 12y agoYou can imagine some designer asking to make the moon look a little different... This makes you realise how old games must have been driven by the technology.
- notastartup 12y agothis was really beautiful. I almost blurted out it was art but then I was forced to remember we can't call computer generated things art by some hidden rule.
- Kequc 12y agoA great deal of people don't see what can be distilled down to pure logic and math as being a valid form of art. They believe there is something beyond the physical world which art can reach out and touch. They are incorrect and most would back down immediately if they were talking about it in person. Programming is a form of art, to me.
- at_ 12y agoA big part of it is framing. If you frame something as a tech demo, that's how it's going to be recieved. 'The Art World' does seem reasonably open to stuff like this, but you really have to go out of your way to make sure people know "hey this is art, please interpret it as an Artwork, here's a chunk of text explaining the conceptual backdrop for this piece, here's how it fits into my wider practice, thank you". But with that perhaps you would risk alienating a big chunk of the HN crowd.
- orbifold 12y agoI've seen art exhibits that essentially were three LCD screens which displayed a video/computer simulation of paint dripping and mixing. I believe the entry to the art world is just gated enough that who gets to display their "artwork" is much more a question of connections and politics than raw talent.
- bane 12y agoActually, this competition is part of the Demoscene, which has long been a computer art movement.
- GhostCursor 12y agoHuh? Of course it is art. Look at all the random graphics and movement coming together to form a 3D street animation. 1.) people can take away a lot from the code and animation which makes it a great example of a new art form. The street scene in oarticular conjures up emotions. 2.) just because a group of the Internet does not understand or appreciate art in all its forms, doesn't mean anything at all except they are ignorant when it comes to identifying artwork.
- nailer 12y agoDirect demo link http://js1k.com/2014-dragons/demo/1951 http://js1k.com/2014-dragons/demo/1951
- MrBra 12y agoNow, I remember that in a recent discussion there was some arguing on Firefox new JS engine whose results were benchmarked at a higher position than Chroome's. So please try this on Firefox and then on Chroome and see the difference. Firefox is not yet there, sadly.
- josteink 12y agoAs a Firefox-user (on Linux!) who don't feel like installing Google's closed-source spyware-browser, would you be shocked to hear me chip in and say: I don't care. I don't need my browser to drive full-screen 3D games & demos on my current-laptop hardware. That's not what I (or anyone else) is currently using their browser for. Maybe 5 years from now things will have changed. Maybe then truly everything will be in the browser. That's fine, but by then I will have bothered buying a newer, more powerful laptop, and the browser-engines will be even more improved and everything will probably be fine. But right now? Performance gap between browsers being put to use they're not being used for? Watch me care less. Honestly I'd much rather have people stop writing Chrome-only websites and going back to web-standards than having a faster JS-engine in my open-source browser, because that's not where things hurt these days. Edit: the hatred for web standards in this thread is staggering. How about a reply saying why you don't think a fragmented web is a problem instead of silently downvoting a legitimate concern?
- mschuster91 12y ago> As a Firefox-user (on Linux!) who don't feel like installing Google's closed-source spyware-browser Chrome is open-source Chromium plus an auto-updater and Flash.
- josteink 12y agoPlus DRM and possibly other things Google is not telling us. It is a propriety browser distributed as a binary, effectively closed-source, so there is no way for us to know. Chromium! = Chrome and more people who realize that (and vocalize it) the better.
- voltagex_ 12y agoVery consistent jittering/jankiness (about every 5 seconds) on FF 33.1 - is it worth a bug report? Edit: much better in 35.0a2. I wonder what they did?
- billybofh 12y agoYikes - this took me right back to writing M68000 bootsector demo/loaders on my AtariST in the 80's. Happy times. I sometimes wish there was still more of that creative free-for-all spirit in todays UI's. To think of the computing power we have now compared to then - it's slightly saddening to see how conservative and often ugly the interfaces we use are.
- AlyssaRowan 12y agoAt least the desktop isn't lime green! ;) Curious: Does any of your work survive?
- _jomo 12y agoI am impressed how smooth many oft the demos run in Firefox for Android
- userbinator 12y agoReminds me of this 4k JS demo which has a somewhat similar concept but is big enough to contain sound: http://www.pouet.net/prod.php?which=61668 http://www.pouet.net/prod.php?which=61668 Making of: http://www.ylilammi.com/webgl/highway4k/Making%20of%20Highway%204k.pdf http://www.ylilammi.com/webgl/highway4k/Making%20of%20Highwa...
- tlrobinson 12y agoImpressive, that totally hung my machine for a couple minutes (Chrome/OS X) I'd recommend watching the video instead.
- 5414h 12y agoHows is this possible? how many years does it take to master it to such level ?
- ape4 12y agoI saw the double tilde (~~) in the code and wondered what it was. Of course, single tilde is the bitwise not operator. Googling finds that double tilde is a faster Math.floor(). http://stackoverflow.com/questions/5971645/what-is-the-double-tilde-operator-in-javascript http://stackoverflow.com/questions/5971645/what-is-the-doubl...
- nmjohn 12y agoLearning about bitwise operators (and everything they entail - so binary in general, endianness, etc) was without a doubt the most beneficial thing I've ever done for my programming abilities. It was a complete eye opener to how computers work on a far more fundamental level than any other aspect of programming had previously revealed to me. For anyone without a traditional CS educational background, if you don't know much about bitwise operations or binary, I highly recommend sitting down and spending a few hours exploring them - it will make you think about certain aspects of programming in a very different manner, which - at least for me - resulted in writing much better code. Aside: While the double tilde is handy, I use the single tilde operator far more often in javascript. If you precede an indexOf statement with a tilde, it essentially turns `indexOf` into `contains`. if(~someStringOrArray.indexOf(searchTerm)) It works because indexOf returns the index the term is found at, or -1 if it isn't found. This means 0 is actually a successful result, but Boolean(0) = false. But bitwise NOT will clear all of that up: ~(-1) = 0 (evaluates as false) ~(0) = -1 (evaluates as true) Edit: I'm not suggesting everyone go off and use ~indexOf all the time - I was simply sharing a related javascript bitwise "trick".
- zoul 12y agoI would probably hate you for not writing plain “!=-1” instead.
- serve_yay 12y agoNo kidding, "clever" stuff like that drives me nuts.
- tlrobinson 12y ago
- bgar 12y agoWow this is pretty awesome!
- jacobsimon 12y agoWait did anyone see this procedural Minecraft entry? http://js1k.com/2014-dragons/demo/1854 http://js1k.com/2014-dragons/demo/1854 It's really impressive and he posted the explanation: http://birdgames.nl/2014/04/js1k-post-mortem-minecraft/ http://birdgames.nl/2014/04/js1k-post-mortem-minecraft/
- elwell 12y agoThe impressive facet here is RegPack getting that source under 1024 B.