JS1k demo: “Highway at Night” (opens in new tab)

Learning 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".

It's a bit more than that. It can also be used to convert strings (containing numeric values) to Numbers. More commonly seen than the prefix "~~" is "|0", because of it's low order precedence.

    > '15'
    '15'
    > ~~'15'
    15
    > '15'|0
    15
    > 15.99|0
    15
    > ~~15 * 1.3
    19.5
    > 15 * 1.3 | 0
    19

I did some testing a while ago in V8 engine and didn't see any performance benefits using bitwise operations. It seems the engine do these optimizations anyway!

I wouldn't recommend anyone doing optimizations in especially JavaScript unless it's really needed. Remember that optimizations are the root of all evil!

Almost more importantly in this case, it's less characters adding to the bytecount.

As 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?

Plenty fast for me in Nightly.

It's also disappointing to see that nobody in this big thread arguing about JS performance has pointed out that this demo is not JavaScript-bound at all. Profiling shows 80%-90% of the time is spent in texture upload and/or CoreGraphics. JS barely even shows up in the profile.

Yes, there are some cases where Chrome is faster than Firefox. There are also cases where Chrome is much, much slower than Firefox. In particular, Chrome runs asm.js games slower, and couldn't handle my WebGL Minecraft client.

I also remember that IE used to have far better canvas performance than Chrome or Firefox since IE9 was the first browser to hardware-accelerate 2D rendering.

From other comments in this thread, it sounds like things are improving in newer Firefox versions. There will always be worst-cases, but generally, I wouldn't say Chrome is really faster than Firefox.

Feels the same on both here (2008 Mac Pro).

A 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.

A 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.

Huh? 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.

Actually, this competition is part of the Demoscene, which has long been a computer art movement.

I really enjoyed playing around with the winner (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?

Some 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.

The 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.

To expand on the other explanations, this can be:

    T=[0],B=0,F=0,Z=0,D=0,i=0

Image 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.

I would say: T is an array containing one element which is zero.

For 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.

Principal component analysis and then ignoring the least important components is the only compression technique I know. Hope it helps.

I think you may have the memory issue the wrong way round.

Human memory is built precisely around remembering geographic locations, human faces and images[1]. The 'have I seen this before feeling' you get is your brain trying to match the demo location to memories ( my conjecture anyway )

[1] http://en.m.wikipedia.org/wiki/Method_of_loci

java script remembers events this way. Dont see how one can apply this to human brain..

The 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.

On my Android phone it ran really smooth, but after like 2 minutes Firefox crashed?!

You 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.

At least the desktop isn't lime green! ;)

Curious: Does any of your work survive?

Surely you meant this: https://www.youtube.com/watch?v=MV_3Dpw-BRY

Impressive, that totally hung my machine for a couple minutes (Chrome/OS X)

I'd recommend watching the video instead.