Reverse-Engineering Xkcd's 'Frequency' | Hacker News Reader

Reverse-Engineering Xkcd's 'Frequency'

notebooks.jsvine.com

251 pointsams150 comments

I am trying to apply the Chinese remainder theorem to solve the time required for all of the events to occur simultaneously. I am ignoring the GIF timing bug.

  1. Normalize times to integers.
  2. Assume congruence at x = t mod (t+1).
  3. Solve congruence system.
  4. Denormalize result.

Python solution: http://ideone.com/Wh2SR6 Solution perspective: http://www.wolframalpha.com/input/?i=35417600268377072234556...

I sometimes wish a HN comment could be 'favourited'.

Not super related to the content, but I love the "Show Code" button at the bottom of the article. So often sites either show code inline and break up my reading, or just dump the whole thing into a github repo, which loses context. That button is awesome, because I can read the whole thing to understand the problem, then review the code the next time through with better context.

Awesome!

It would be nice to have Show Code at the top, along with a note that some of the code has been hidden. I like seeing code examples as I'm reading through.

I'm the guy who built that, and I agree. I tinkered with having another "Show Code" button at the top, but my attempts looked bulky and distracting. Still trying to figure out a better way.

In the meantime, pull requests quite welcome: https://github.com/jsvine/reporter

As a note of feedback, I didn't notice the button at all. (Only knowing about its existence after looking at HN comments.) You do need to take a little bit a the viewer's attention for them to know about the feature.

Maybe something more discreet than a large button at the beginning, like:

  <p>(Code samples are hidden. <label><input type="checkbox" id="showCodeSamples"/> Show code samples</label>)</p>

I agree that having a "Show code" button only at the end prevents disrupting the reading flow.

In terms of "code with explanation" layout, I really like todos.js' approach: http://backbonejs.org/docs/todos.html

It also works with images: http://www.ifixit.com/Teardown/Mac+Pro+Late+2013+Teardown/20...

Most layouts nowadays fail to take advantage of the horizontal space available. It's just 2 colums in the end, but it goes a long way.

ifixit's layouts are actually a product of: http://www.dozuki.com/

I just tested out a new tutorial layout on my blog that utilized two columns.. It still has the code in the main column, but the examples get pushed to the side..

http://wegnerdesign.com/blog/learning-svg-with-logos/

Jasmine did this too! http://pivotal.github.io/jasmine/

... todos.js' did it better though.

The todos.js one was generated by a tool called Docco, created by Jeremy Ashkenas (creator of Backbone, Underscore, and CoffeeScript). I agree that it looks really good and more people should use it for their projects!

http://jashkenas.github.io/docco/

>created by Jeremy Ashkenas (creator of Backbone, Underscore, and CoffeeScript)

Just out of curiosity, why did you include that? Do people make judgements about tools based on the person who wrote it?

I'd say yes. If you took the time to independently evaluate every tool that was ever produced, you wouldn't have time for anything else. So instead, people rely on crude, biased, but effective heuristics, the author's past achievements being one of them.

It's the same thing with novel authors - I'm much more likely to purchase a book by Stephen King than an unknown author's debut album if that's all I know about the books.

In my experience, unknown authors do tend to make terrible debut albums :)

Actually I was originally going to add "so that is why you will see it frequently on projects related to those technologies," just to give some background and link it all together (e.g. the cited example is hosted on the backbone site).

But yeah, it also gives it some star power and instant credibility, and I wanted to highlight jashkenas for his significant contributions. (As a side note I don't currently use any of them, I prefer Angular and vanilla JS syntax.)

Ooh that's really pretty.

I was going to bring up the IPython notebook functionality, in part because it was used as a follow-up to another xkcd strip ("Regex Golf", http://nbviewer.ipython.org/url/norvig.com/ipython/xkcd1313.... ), but I gotta say that one looks nicer :) The use-cases are slightly different, though.

I like it a lot, too. It's a concept I've toyed with, with JavaScript and tutorials. The particular example I used was a tutorial on Genetic Algorithms, and the form was a playground for being able to quickly edit fitness functions on the fly. Having tutorials that can execute their own code is awesome.

For anyone wondering how to dump gif loop time.

    curl -s http://imgs.xkcd.com/comics/frequency/turnsignal1.gif | 
        giftext | grep DelayTime | cut -d':' -f 2 | awk '{s+=$1} END {print s/100}'

The results seem to correspond with authors table.

Click the show code button at the bottom. They did dump the values (but they wrote their own gif parser...).

Ah thanks, I completely missed that button. I just typed 'gif' in to my terminal and hit tab to see what I had installed, then read the manpage for the most favourable looking binary

There are some really clever people in this world.

One to make it.

One to take it apart.

I can't imagine a better followup to an xkcd strip. Bravo.

I was really hoping Munroe himself would publish the data. I'm glad someone else did, with the helpful explanations.

Awesome, this is one of my favorite XKCDs. I've been mulling over a plan in my mind to make a physical version of it, looking similar to a deep picture frame or display case. It would use white acrylic with the text somehow printed or transferred on, backlit by white LEDs (maybe incandescent lamps would look nicer?). Each cell would be separated by thin black wood or plastic strips. It should be pretty easy to control the whole thing with an arduino, and I think it would make an awesome wall display.

I like this. Reminds me a (tiny) bit of Bruce Nauman's "One Hundred Live and Die": http://www.art21.org/images/bruce-nauman/one-hundred-live-an...

How does it work?

He's got some... interesting... pieces: http://www.youtube.com/watch?v=LDuvLc_FAXE

I've been thinking about something similar but it's more one of those "it'd be cool if I built this..." with no such plan to actually do it.

Ping me if you do end up making one!

What I found interesting was the format of the gifs themselves. They were mostly or completely uncompressed, totaling 8MB. I can only think of one possible reason to do this, which would be to take advantage of HTTP compression to go inter-frame instead of using the builtin intra-frame that gifs have (.5MB vs 4MB). But HTTP compression was turned off too.

There's more analysis here than reverse engineering. Nice work still.

I'm still trying to understand where the frequency is stored? Is it a value that can be embedded into the gif?

Gifs don't have a constant FPS. You can specify with some precision how long they should display each frame.

That's right. The Graphic Control Extension blocks preceding each frame let you specify a "delay" in hundreths of a second.

More info here: http://www.matthewflickinger.com/lab/whatsinagif/animation_a...

And more info on the zero-delay problem here: http://nullsleep.tumblr.com/post/16524517190/animated-gif-mi...

oh I see - thanks for that, interesting stuff

Didn't get the "A european resident has their first kiss" though. Wouldn't it make more sense to divide the frequency by two and state "Two european residents have their first kiss"?

It very well may only be one of the participants' first kiss.

Or one participant may not be European.

roma1n said "Two european residents have their first kiss", not "Two european residents each have their first kiss". It would definitely be their first kiss. Do I win pedant fight? :)

To me the most interesting thing in this article were the urls of the inlined images, <img src="data:image/png;base64,...> I had no idea you could do that.

That technique is really useful when serving a site via web sockets.

You can actually use it for all sorts of things. (eg embedded fonts)

https://en.wikipedia.org/wiki/Data_URI_scheme

IE 7 doesn't support it, and IE 8 limits you to 32 KB data uri's. IE also only supports images, stylesheets and javascript, while other browsers let you be a bit more creative with things like generating pdf's and excel files client-side.

Does anyone know the answer to the "turn signal problem" he poses? Why does the beat frequency he observes match what he calculated?

Assuming you meant "doesn't", it's explained in the next section, the Zero-Delay Problem.

edit: The frequency equation solved for time, using the adjusted values from the table: https://www.google.com/search?q=1%2F%281%2F1-1%2F1.04%29

Thanks

I'm completely distracted by the fact that this was #1331.

Surely he must have something truly epic saved up for 1337.

Right? Anyone?

This page is hard crashing Safari latest on my MBP 2013. Anyone else experiencing this?

yeah, same problem here. safari on a 2013 air starts to load the top of the page then stops responding... :( seems fine in firefox though

Get this story in your mailbox with daily newsletter for top 5 HN Post, signup at http://top5hn.launchrock.co Stats after creating the landing page in last 24hours: 944 Page Views 101 Signups Newsletter Stats 41% Open Rate 40% CTR

Reply on news.ycombinator.com