Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Visualizing how BitTorrent works. (mg8.org)
149 points by hiteshiitk on Nov 15, 2010 | hide | past | favorite | 32 comments


I get tired of making this same comment on every Canvas-based thing anybody builds, but if they'd taken the 30 seconds it took to write that paragraph about how it doesn't work in IE, and instead used it to paste in the following snippet of HTML, it would actually work in Internet Explorer:

<!--[if IE]><script type="text/javascript" src="/excanvas.js"></script><![endif]-->

Like, IE5 even. Internet Explorer has had vector graphics since 1999, and it overlaps 90% with Canvas (which came out several years later).

http://excanvas.sourceforge.net/


I'm the guy who ported this to processing.js, and no, it isn't that simple. I tried just adding that one line and it didn't actually work at the time. It turns out it's slightly more involved, and as I was just trying to make this a quick proof-of-concept hack, I didn't spend the time to rewrite the loading mechanism to make it IE-compatible.

You can read more about the interactions between processing.js and excanvas at http://bocoup.com/processing-js/docs/index.php?page=Using%20... if you're so inclined, but please don't think that it's just because I was too lazy to add a single line of HTML.


I'm glad you did comment, because I'm not an expert on browser vector graphics and didn't know this. Bookmarked with tags "canvas, vector, graphics, IE, js".


From the author's tone, it seemed clear to me that this was a case of him having an axe to grind rather than being actually stymied by a serious deficiency. Not particularly constructive.


“Works in pretty much any modern browser except IE (because IE doesn't have support for the <canvas> tag).”

Please explain to me where “tone“ is hiding in that sentence. I don’t see it. There is nothing at all judgmental about it. It’s matter of fact, I don’t even see so much as a word or phrase that could in any way be construed as a snide remark directed at IE. I can’t find any possible interpretation that would hint at any kind of axe the author might have to grind. Context doesn’t help, either.

The actual tone might help but the author sadly doesn’t provide an audiobook version of the webpage.

(Snap judgments. This is why we can’t have nice things.)


First: yikes.

Second: It's context. There's no need to talk about deficiencies of browser on a page trying to illustrate bittorent. He could have just said "does not work with IE".


This was just a quick one-off hack that I did for fun. I had no idea how many people would find it interesting.

If anybody does want to fix the code so that it loads properly in IE (and doesn't break any other browsers) I'm more than willing to integrate the changes!


Sorry if it seemed like I was vilifying you. I have no problem with people expressing opinions; that's what personal webpages are for!

I was just trying to explain to the parent.


You'd be annoyed too if you were the only one in the world who seemed to know about the tag that makes IE6 behave like Chrome.


If you only knew a tag that would magically fix all the security issues in IE6 :)


Well, there is the "PLAINTEXT" tag[1], but I don't know if that will actually get all of IE6's security issues, even if you put it at the very start of the document.

The attributes for it are pretty weird, too. Why would you put language="javascript" inside such a tag?

[1] http://www.htmlref.com/reference/appa/tag_plaintext.htm


Hmmm....

Did you test it to confirm? Are you sure that one line of code is all that's necessary to get that specific demo correctly working with Internet Explorer? What about keyboard input? (Canvas is only one piece of the demo.)


Keyboard events work the same on IE as they do in every other browser, so that wouldn't be an issue.

The demo does not appear to be doing anything subtractive, which is the only piece of 2D vector stuff that VML doesn't do (and therefore that excanvas doesn't handle automatically). So long as they're just drawing shapes on a canvas, it should simply start working once they include the excanvas script.


While beautiful, I don't think it illustrates BitTorrent very well. Data doesn't just magically flow to clients, it needs to be coordinated and/or negotiated somehow. Data integrity is also somewhat important aspect of BitTorrent, every piece that client receives is verified against the .torrent file.


Does this mean that the tracker isn't included at all? I think you're right.

How would you visualise verifying integrity? Is that really necessary to visualise?


I think you could only cover that by visualizing the path of a single chunk. Showing that the client asks the tracker who has it, then asks the other peer if they are willing to provide it, then receiving the separate blocks and checking the integrity and blacklisting the peer if necessary. Then advertising that you have that chunk to other peers.

To me, that is the more interesting side of BitTorrent, compared to what the linked visualization is showing, which is just that "peers get stuff from peers that already have it, then once they have it, provide it to other peers."


The tracker doesn't know which peers have what data; "have" messages are used for that.


Also, it appears that in the visualization all clients have the same amount of bandwidth. In the real world this is usually not the case.


This could use some concurrent data plots showing, say, the number of new bits being received (by anyone). Would be especially useful when comparing the same visualization for traditional file transfers, to show what's special about BitTorrent.


So pleased to see this restored! It's one of the best process visualizations I've ever seen. It's not "this is what the data means", it's "this is how an algorithm works in practice". It looks organic and there are subtleties (like the fact that the rainbow-coloured segments correspond to the data line flowing to each peer, and that the sizes of blobs on the line represent transfer speeds) that you can grasp later without distracting from the initial "aha!" moment.


I've updated the page so that it works properly in IE9, at least (all I had to do was add the <!doctype html> header at the beginning, and that seems to be good practice anyway, so I have no issue with it).

I have no way to test IE7 or IE8 at this point, and I don't like the idea of adding code that I can't test. If someone wants to volunteer their time to help me test those browsers with excanvas, I'm willing to give it a shot.


I think it's buggy. Some peers don't get data at all.


Sounds like 50% of my experience with BT. Of course, that's probably Comcast's fault.


Beautiful!


Upvoted from 0 because I agree - beautiful as a mini demonstration, not as in "look at the lovely image!"


It's the sort of thing that would make a cool screen saver.


From the visualization, it doesn't appear that BitTorrent uses a spanning tree to reduce the bandwidth load on ISPs. When will we see true application level multicast for P2P?


IETF ALTO is working (slowly) on P2P localization. It's tricky because what it good for the ISPs is not necessarily good for users; I would rather download from a FTTH peer in Sweden than from a cable modem next door. Ultimately, ISPs can save much more from P2P caching than from localization.


This actually runs pretty smoothly on my Milestone's default browser. Colour me impressed. It did not run well on Opera Mini though.


That uses a full core on my laptop.


It's definitely a CPU hog. I'm not really an expert at debugging javascript performance issues, but if anybody has some suggestions on how to make it more efficient, I'm all ears.


Canvas drawing is still horribly slow, especially vector draws.

http://www.craftymind.com/guimark2/




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: