xkcd challenge: "Percentage of the screen that is [x] color" So I think we've all probably seen this xkcd comic:

:

This might either be too general or too difficult, I'm not sure. But the challenge is to create a program in any language that creates a window that has at least 2 colors and displays in English words what percentage of the screen is each color.

ex. The simplest solution would be a white background with black letters that read "Percentage of this image that is black: [x]%. Percentage of this image that is white: [y]%"

You can go as crazy or as simple as you want; plain text is a valid solution but if you make interesting images like in the xkcd comic that's even better! The winner will be the most fun and creative solution that gets the most votes. So go forth and make something fun and worthy of xkcd! :)

So, what do you think? Sound like a fun challenge? :) 

Please include a screenshot of your program running in your answer :)
JavaScript with HTML

I tried to reproduce the original comic more precisely. A screenshot is taken using the html2canvas library. The numbers are calculated repeatedly, so you can resize the window or even add something to page in real time.

Try it online: http://copy.sh/xkcd-688.html

Here's a screenshot:



&lt;html contenteditable&gt;
&lt;script src=http://html2canvas.hertzen.com/build/html2canvas.js&gt;&lt;/script&gt;
&lt;script&gt;
onload = function() {
    setInterval(k, 750);
    k();
}
function k() {
    html2canvas(document.body, { onrendered: t });
}
function t(c) {
    z.getContext("2d").drawImage(c, 0, 0, 300, 150);
    c = c.getContext("2d").getImageData(0, 0, c.width, c.height).data;

    for(i = y = 0; i &lt; c.length;) 
        y += c[i++];

    y /= c.length * 255;

    x.textContent = (y * 100).toFixed(6) + "% of this website is white";

    q = g.getContext("2d");

    q.fillStyle = "#eee";
    q.beginPath();
    q.moveTo(75, 75);
    q.arc(75,75,75,0,7,false);
    q.lineTo(75,75);
    q.fill();

    q.fillStyle = "#000";
    q.beginPath();
    q.moveTo(75, 75);
    q.arc(75,75,75,0,6.28319*(1-y),false);
    q.lineTo(75,75);
    q.fill();
}
&lt;/script&gt;
&lt;center&gt;
&lt;h2 id=x&gt;&lt;/h2&gt;
&lt;hr&gt;
&lt;table&gt;&lt;tr&gt;
&lt;td&gt;Fraction of&lt;br&gt;this website&lt;br&gt;which is white _/
&lt;td&gt;&lt;canvas width=150 id=g&gt;&lt;/canvas&gt;
&lt;td&gt;&amp;nbsp; Fraction of&lt;br&gt;- this website&lt;br&gt;&amp;nbsp; which is black
&lt;/table&gt;
&lt;hr&gt;
0
&lt;canvas style="border-width: 0 0 1px 1px; border-style: solid" id=z&gt;&lt;/canvas&gt;
&lt;h4&gt;Location of coloured pixels in this website&lt;/h4&gt;