
JS1k demo: “Highway at Night” - practicalswift
http://js1k.com/2014-dragons/details/1951
======
sEEKz
The making of "Highway at Night": [http://jsriffs.blogspot.fi/2014/05/making-
of-highway-at-nigh...](http://jsriffs.blogspot.fi/2014/05/making-of-highway-
at-night.html)

~~~
TazeTSchnitzel
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.

~~~
michaelmior
I don't think the street lights are supposed to be on poles. It appears to be
a tunnel with lights mounted overhead.

~~~
TazeTSchnitzel
But they're called street lights and they aren't in the tunnel!

~~~
michaelmior
Ha! Sorry, clearly I didn't let it run long enough. I closed it because it
lags pretty hard for me.

------
anonfunction
This is so very impressive. I like how it uses canvas to make the moon:

    
    
      // Moon
      c.fillText("(",99,-99);

~~~
robmcm
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.

------
ape4
I 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-doubl...](http://stackoverflow.com/questions/5971645/what-is-the-double-
tilde-operator-in-javascript)

~~~
nmjohn
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".

~~~
grecy
> _if(~someStringOrArray.indexOf(searchTerm))_

Do you think the person maintaining your code 2-5 years from now will
understand that easily and quickly?

For maintenance, it's important to be as clear as possible, not as tricky as
possible.

~~~
nmjohn
Which is why I only use it on solo projects.

That being said, ~indexOf is hardly tricky. if(string.indexOf(term)) is far
trickier, because if you didn't realize it returning 0 was a positive result,
you easily could write it without a -1 check and not notice it during testing
if no values had an index of 0. Then months later you would have a hell of a
time debugging it because it would look so innocuous.

On the other hand, by including the tilde, you ensure two things: 1.) Future
developer knows what it does and has no problems. 2.) Future developer hasn't
seen it before and goes straight to google to see what it does - at which
point they learn and now will recognize it in the future.

So at the end of the day, by using a ~, it is explicitly clear that indexOf()
should not be used directly as a coerced boolean, and it ensures that anyone
touching the code will either know or learn why.

~~~
vegedor
>On the other hand, by including the tilde, you ensure two things: 1.) Future
developer knows what it does and has no problems

The premises was that the future dev won't know. _It was hard to write, it
should be hard to read_ moderately applies, I guess.

------
dsl
You 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)

~~~
andrey-p
I 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
They're all pretty cool. Maybe bonus points for interactivity?

------
adamcanady
Wow. 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
Principal component analysis and then ignoring the least important components
is the only compression technique I know. Hope it helps.

~~~
sampo
Well that is a lossy compression, can work nicely to some data (e.g. images),
but totally irrelevant in the context of source code compression.

~~~
vardump
Lossy 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
And in fact, RegPack _is_ lossy compression (as are all minifiers). The
transformation is totally irreversible.

------
billybofh
Yikes - 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
At least the desktop isn't lime green! ;)

Curious: Does any of your work survive?

------
nailer
Direct demo link
[http://js1k.com/2014-dragons/demo/1951](http://js1k.com/2014-dragons/demo/1951)

------
neals
How 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
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.

------
MrBra
Now, 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
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?

~~~
Wintamute
I'm glad some people care about browser performance, care about creating art
and apps that push performance, because without them we won't get to that
future where there's a viable, open, free, standards based platform that
people can use to challenge the dominance of truly closed source native app
platforms.

So yes I am shocked to hear that you don't care. And I'm a bit shocked to see
you rant at a person that simply suggested Firefox's JS engine _may_ not be as
performant as Chrome's.

~~~
rimantas
You know, nobody stops anyone form making open source native apps.

~~~
Wintamute
I said native app _platforms_ not native apps.

------
lelandbatey
For 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
Surely you meant this: [https://www.youtube.com/watch?v=MV_3Dpw-
BRY](https://www.youtube.com/watch?v=MV_3Dpw-BRY)

------
thomasfl
This 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
java script remembers events this way. Dont see how one can apply this to
human brain..

~~~
thomasfl
How 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
I 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
How 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?

~~~
vegedor
I think it's fair to assume the brain has some interpretation frameworks as
good as javascript/html at least, even if it's a cheesy metaphor.

------
userbinator
Reminds 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%20Highwa...](http://www.ylilammi.com/webgl/highway4k/Making%20of%20Highway%204k.pdf)

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

I'd recommend watching the video instead.

------
jacobsimon
Wait 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/)

------
voltagex_
Very 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?

------
elwell
The impressive facet here is RegPack getting that source under 1024 B.

------
_jomo
I am impressed how smooth many oft the demos run in Firefox for Android

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

~~~
mbrubeck
Me too. Since it crashed without showing the Crash Reporter dialog, I think it
probably ran out of RAM or texture memory or something similar.

------
bgar
Wow this is pretty awesome!

------
notastartup
this 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.

~~~
at_
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.

~~~
orbifold
I'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.

