// code taken from here: 
// http://www.analogpixel.org/blog/2011/09/13/msced-148-boxy-lady-take-2/#more-764
// and formatted for readability.
// then ported to pjs, and optimized/tweaked a bit
// NEW: added gif.js
PImage pic;
PGraphics pg;
boolean grow = false;
int MINS = 1;
int MAXS = 40;
int box_size = MAXS;
PFont font = loadFont("Helvetica");
String percentage = null;
boolean running = true;

gif.on("progress", function (p){ 
    percentage = int(100.0 * p) + "%";
    redraw();
});


void setup()
{
    size(window.innerWidth, window.innerHeight);
    background(255);
    window.onresize = function() { redraw(); }

    pic = loadImage("pic.jpg");
    pic.loadPixels();
}

void draw()
{
    if (running)
    {
        make(box_size);
        fill(0);
        textFont(font, 24);
        textAlign(LEFT, TOP);
        
        text(frameCount + "/" + 2*MAXS, 0, 0);

        if (!grow)
        {
            box_size--;
            if (box_size < MINS) 
                grow = true;
        } 

        if (grow)
        { 
            box_size++; 
            if (MAXS < box_size)
            {
                grow = false;
                running = false;
                gif.render()
                noLoop();
                return;
            }
        }
        gif.addFrame(document.getElementById("full"), {delay:30, copy:true});
    }
    else
    {
        String t = "rendering gif..." + percentage;
        float w = textWidth(t);
        float h = textAscent() + textDescent();
        fill(255);
        rect(width / 2 - w, height/2 - h, 2*w, 2*h);

        fill(255, 0, 0);
        textFont(font, 44);
        textAlign(CENTER, CENTER);
        text(t, width / 2, height / 2);
    }
    //console.log(frameRate);
}

void make(int i) 
{
    background(255);

    noStroke();

    int top =  (height - pic.height) / 2;
    int left = (width -  pic.width ) / 2;
    image(pic, left, top);
    int n = pic.width * pic.height / box_size;
    for (int cc = 0; cc < n; cc++)
    {
        int x = int(random(0, pic.width));
        int y = int(random(0, pic.height));

        fill(pic.get(x, y));
        rect(left + x, top + y, int(random(MINS, i)), int(random(MINS, i)));
    }
}