## Jupyter at Bryn Mawr College

Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2017-Spring / Notes

# 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:

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() {
//println("gray: " + red(imgs[current].pixels[int(mouseX + mouseY * imgs[current].width)]));
current++;
if (current == imgs.length) {
current = 0;
}
}

Sketch #2:

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:

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");
}
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);
}
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: