with(a){for($ in a)a[$[0]+($[6]||$[2])]=a[$];A='FRACTION OF9AMOUNT OF9LOCATION OF9THIS IMAGE9BLACK INK99WHICH IS WHITE9BY PANEL'.split(9);A[P=5]=A[4]+' IN';A[8]=A[3];for(t in A)for(c.width=4*(F=c.height=8*(Q=~~(innerWidth/32-1)));me(A[t]).width<(K=11*Q);A[t]+=' ')E=2*Q;for(C=[0,B=F*Q,0];P--;sa(1/4,1/4)){for(ac(G=6.5*Q,N=4*Q,L=3*Q,lineWidth=2,9,ba(k=i=3));i--;sR(K*i+1,1,10*Q-2,F-2))for(mv(5*Q,L*i-Q),n=2;i&&n--;ln(n*Q+L,6*Q*i-5*Q))fc(Q+K*i,E+5*Q*n,F*n+2-2*n,(1-n)*5*Q+2*n);fl(ln(D=23*Q,E-10,ln(D+5,E,mv(D-5,E,ln(J=31*Q,(U=7*Q)+5,ln(J+10,U,mv(J,U-5,ba(sr(fx(0,D+9,5+(O=7.5*Q)))))))))));for(fc(D-6,U-10,13,2,fc(D+10,U-5,2,13,fx(i=0,D-20,U-5)));i<9;)fx(A[i++]+A[i++]+A[i++],Q/2,(i/3)*Q/2);for(i=4;--i;fx(A[3*i-3].replace('WHITE','BLACK'),Q/2,6*Q+i*Q/2))fx(i,E*(6+i),O);if(P>3){for(;k--;)for(I=gg(F*k,j=0,10*Q,F).data;j<10*B;)C[k]+=I[3+4*j++]>0;C[0]=(C[0]+(C[1]+C[2])*0.11781)/0.88219;T=C[0]+C[1]+(C[2]=C[2]+(C[0]+C[1]+C[2])/15)}for(fl(ac(G,N,L,2,2+T/B/5,mv(G,N,ba(i=3))));i--;)fc(13.5*Q+i*E,U,Q,-F*C[i]/T);ta(D+11,5*Q-10)}}
/*
Idea from http://xkcd.com/688/
q : unit length = Math.floor(screen.width/32-1)
H : canvas height = 8*q
W : canvas width = 4*H = 32*q
R : circle radius = 3*q
bw: bar width = q
bh: bar height = 8*q : represents 100%
sf: scaleFactor = 1/4
A : imageArea = W*H = 128*q^2
T : totalBlack
b1, c1 : total black ink in panel 1, constant black ink in panel 1
b2, c2
b3, c3
fi: angle = (totalBlack / imageArea) * Math.PI * 2
bar1 height : bh * b1/T
bar2 height : bh * b2/T
bar3 height : bh * b3/T
X : b1 + b2 + c3
S=sf^2
(1) T = b1+b2+b3
(2) b1 = c1 + R^2 * fi/2
(3) b2 = c2 + bw*bh
(4) b3 = c3 + Sum[ S^n * X, {n, 1, Infinity}]
(1) T = b1+b2+b3
(2b) b1 = c1 + R^2 * Math.PI * T / A
(3) b2 = c2 + bw * bh
(4b) b3 = c3 + (b1 + b2 + c3) * S/(1-S)
(1) T = b1+b2+b3
(2c) b1 = c1 + 3*q*3*q*PI*T/(8*32*q*q)
(3a) b2 = c2 + q*8*q
(4c) b3 = c3 + (b1 + b2 + c3) * (1/16)/(1-(1/16))
(1) T = b1+b2+b3
(2d) b1 = c1 + (b1+b2+b3)*9*PI/256
(3a) b2 = c2 + 8*q*q
(4d) b3 = c3 + (b1+b2+c3)/15
(2f) b1 = c1+(b1+b2+c3 + (b1+b2+c3)/15)*9*PI/256
(2f) b1 = c1+(b1 + b2 + c3)*16*9*PI/(15*256)
(1) T = b1+b2+b3
(2f) b1 = c1+(b1 + b2 + c3) * PI * 0.0375
(3a) b2 = c2 + 8*q*q
(4d) b3 = c3 + (b1+b2+c3)/15
(3a) b2 = c2 + 8*q*q
(2f) b1 = [ c1+(b2 + c3) * PI * 0.0375 ] / (1- PI * 0.0375)
(4d) b3 = c3 + (b1+b2+c3)/15
(1) T = b1+b2+b3
*/
function LOG(msg){
if(window.console){
window.console.log(msg);
}
}
with(c)with(a){
for(func in a){
a[func[0]+(func[6]||func[2])]=a[func];
}
Q=Math.floor(innerWidth/32-1);
c.height=Q*8;
c.width=Q*32;
LOG({window_width:innerWidth,q:Q});
lineWidth=2;
D=[
'FRACTION OF', 'AMOUNT OF', 'LOCATION OF',
'THIS IMAGE', 'BLACK INK', 'BLACK INK IN',
'WHICH IS WHITE', 'BY PANEL', 'THIS IMAGE',
'FRACTION OF', '', '',
'THIS IMAGE', '', '',
'WHICH IS BLACK', '', ''
];
for(t in D){
while(measureText(D[t]).width<Q*11){
D[t]+=' ';
}
}
for(P=5;P--;){
beginPath();
arc(13*Q/2,4*Q,3*Q,0,2*Math.PI,1);
for(i=0;i<3;i++){
strokeRect(Q*i*11+1,1,10*Q-2,8*Q-2);
if(i>0){
fillRect((1+i*11)*Q,7*Q,8*Q,2);
fillRect((1+i*11)*Q,2*Q,2,5*Q);
moveTo(6*Q,(2+3*(i-1))*Q);
lineTo(5*Q,(1+6*(i-1))*Q);
lineTo(3*Q,(1+6*(i-1))*Q);
}
}
stroke();
beginPath();
moveTo(31*Q ,7*Q-5 );
lineTo(31*Q ,7*Q+5 );
lineTo(31*Q+10,7*Q );
moveTo(23*Q-5 ,2*Q );
lineTo(23*Q+5 ,2*Q );
lineTo(23*Q ,2*Q-10);
fill();
fillRect(23*Q-6 ,7*Q-10,13,2);
fillRect(23*Q+10,7*Q-5 , 2,13);
for(i=0;i<16;i+=3) fillText(D[i]+D[i+1]+D[i+2] ,Q/2, (1+9*Math.floor(i/9)+i/3)*Q/2 );
for(i=4;--i ;) fillText(i ,2*Q*(6+i), 7.5*Q );
for(i=2;i-- ;) fillText(0 ,23*Q-20+30*i, 7.5*Q-20+20*i );
if(P==4){
C=[0,0,0];
for(k=0;k<3;k++){
I=getImageData(k*8*Q,0,10*Q,8*Q).data;
for(j=0;j<10*Q*8*Q;){
if(I[3+4*j++]>0){
C[k]++;
}
}
}
K0=C[0];
K1=C[1];
K2=C[2];
C[1]+=8*Q*Q;
C[0]=(C[0]+(C[1] + C[2]) * Math.PI * 0.0375)/(1- Math.PI * 0.0375);
C[2]=C[2] + (C[0] +C[1]+C[2])/15
T=C[0]+C[1]+C[2];
LOG({t:T,c1:K0,c2:K1,c3:K2,b1:C[0],b2:C[1],b3:C[2]});
}
beginPath();
moveTo(6.5*Q,4*Q);
arc(6.5*Q,4*Q,3*Q,2,2+2*Math.PI*T/(256*Q*Q),0);
fill();
for(i=3;i--;){
fillRect(13.5*Q+i*2*Q,7*Q,Q,-10*Q*C[i]/T);
}
translate(23*Q+11,5*Q-10);
scale(1/4,1/4);
}
}
