Processing Images

Laura's Foot

In the following examples, you can click on the canvas to advance the sequence.

Other ideas:

In [1]:
/* @pjs preload="images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg"; */

PImage[] imgs = new PImage[38];
int current = 0;

void setup() {
    for (int i=0; i < imgs.length; i++) {
        imgs[i] = loadImage("images/" + nf(i, 8) + ".jpg");
    }
    size(imgs[0].width, imgs[0].height);
}

void draw() {
}

void mouseClicked() {
    current++;
    if (current == imgs.length) {
        current = 0;
    }
    image(imgs[current], 0, 0);
}
Sketch #1:

Sketch #1 state: Loading...
In [2]:
/* @pjs preload="images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg"; */

PImage[] imgs = new PImage[38];
int current = 0;

void setup() {
    for (int i=0; i < imgs.length; i++) {
        imgs[i] = loadImage("images/" + nf(i, 8) + ".jpg");
    }
    size(imgs[0].width, imgs[0].height);
}

void draw() {
    image(imgs[current], 0, 0);
}

void mouseClicked() {
    imgs[current].loadPixels();
    //println("gray: " + red(imgs[current].pixels[int(mouseX + mouseY * imgs[current].width)]));
    current++;
    if (current == imgs.length) {
        current = 0;
    }    
}
Sketch #2:

Sketch #2 state: Loading...
In [3]:
/* @pjs preload="images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg"; */

PImage[] imgs = new PImage[38];
int current = 0;

void setup() {
    for (int i=0; i < imgs.length; i++) {
        imgs[i] = loadImage("images/" + nf(i, 8) + ".jpg");
    }
    size(imgs[0].width, imgs[0].height);
}

void draw() {
    image(imgs[current], 0, 0);
    current++;
    if (current == imgs.length) {
        current = 0;
    }
}
Sketch #3:

Sketch #3 state: Loading...
In [4]:
/* @pjs preload="images/00000000.jpg,images/00000001.jpg,images/00000002.jpg,images/00000003.jpg,images/00000004.jpg,images/00000005.jpg,images/00000006.jpg,images/00000007.jpg,images/00000008.jpg,images/00000009.jpg,images/00000010.jpg,images/00000011.jpg,images/00000012.jpg,images/00000013.jpg,images/00000014.jpg,images/00000015.jpg,images/00000016.jpg,images/00000017.jpg,images/00000018.jpg,images/00000019.jpg,images/00000020.jpg,images/00000021.jpg,images/00000022.jpg,images/00000023.jpg,images/00000024.jpg,images/00000025.jpg,images/00000026.jpg,images/00000027.jpg,images/00000028.jpg,images/00000029.jpg,images/00000030.jpg,images/00000031.jpg,images/00000032.jpg,images/00000033.jpg,images/00000034.jpg,images/00000035.jpg,images/00000036.jpg,images/00000037.jpg"; */

PImage[] imgs = new PImage[38];
PImage result;
int current = 0;

void setup() {
    for (int i=0; i < imgs.length; i++) {
        imgs[i] = loadImage("images/" + nf(i, 8) + ".jpg");
        imgs[i].loadPixels();
    }
    size(imgs[0].width, imgs[0].height);
    result = new PImage(imgs[0].width, imgs[0].height);
}

void draw() {
}

void mouseClicked() {
    current++;
    if (current == imgs.length) {
        current = 0;
        result = new PImage(imgs[0].width, imgs[0].height);
    }    
    result.loadPixels();
    for (int i=0; i < current; i++) {
        // First find average of white pixels:
        int sum = 0;
        int count = 0;
        for (int x=0; x < imgs[i].width; x++) {
            for (int y=0; y < imgs[i].height; y++) {
                float c = red(imgs[i].pixels[int(x + y * imgs[i].width)]);
                if (c > 10) {
                    sum += c;
                    count += 1;
                }
            }
        }
        float average = sum/float(count);
        //println("Average " + i + ": " + average);
        for (int x=0; x < imgs[i].width; x++) {
            for (int y=0; y < imgs[i].height; y++) {
                float c = red(imgs[i].pixels[int(x + y * imgs[i].width)]);
                if (c > average + 70) {
                    result.pixels[int(x + y * imgs[i].width)] = 
                        color(c, i * 256/37.0, 0); 
                }
            }
        }
    }
    result.updatePixels();
    image(result, 0, 0);
}
Sketch #4:

Sketch #4 state: Loading...