Post-It art in Processing

I’ve had a great three days at the Lift’13 conference here in Geneva. The guys from postitartcreators.com have been here making a giant portrait of Aaron Swartz, so I’ve been watching them work – designing by hand and matching the colours of post-it’s to a hard copy of their printed art work that has been pre-processed by hand.

As an engineer I couldn’t help thinking it would be so easy (fun and rewarding) to make a programme to take the grunt work out of this – and hopefully dramatically speed up the process without compromising the results. So I wrote this processing script with some help from my awesome fellow lift-volunteer Anna Postma – Thanks!

/**
*Post-it Art creation tool
*James Devine with help from Anna Postma
*<a rel=”license” href=”http://creativecommons.org/licenses/by-sa/3.0/deed.en_US”><img alt=”Creative Commons License” style=”border-width:0″ src=”http://i.creativecommons.org/l/by-sa/3.0/88×31.png&#8221; /></a><br />This work is licensed under a <a rel=”license” href=”http://creativecommons.org/licenses/by-sa/3.0/deed.en_US”>Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.
*/

PImage img;

void setup() {
size(800, 400);
//img = createImage(100, 100, ARGB);
img = loadImage(“postme2.jpg”);
//for(int i = 0; i < img.pixels.length; i++) {
// float a = map(i, 0, img.pixels.length, 255, 0);
// img.pixels[i] = color(0, 153, 204, a);
//}
int channels = 2;
int Pixcol = color(204, 153, 0);
background(0);
image(img, 0, 0, 64, 64);
int[] postspace = new int[4096];
int[] sortedpostspace = new int[4096];
//index of 7 for colorspace = 2 posterize channels)
int[] colorspace = new int[7];
int[] colormap = new int[7];
String[] colornamespace = new String[7];
filter(POSTERIZE, channels);

colornamespace[0] = “colour 0”;
colornamespace[1] = “colour 1”;
colornamespace[2] = “colour 2”;
colornamespace[3] = “colour 3”;
colornamespace[4] = “colour 4”;
colornamespace[5] = “colour 5”;
colornamespace[6] = “colour 6”;
// colournamespace[7] = “colour 0″;

colormap[0] = color(255,0,0);
colormap[1] = color(0,255,0);
colormap[2] = color(0,0,255);
colormap[3] = color(255,255,0);
colormap[4] = color(255,0,255);
colormap[5] = color(0,255,255);
colormap[6] = color(255,255,255);

for (int i = 0; i < 64; i++) {
for (int j = 0; j < 64; j++) {
int Actcol = get(i, j);
postspace[(i*64)+j] = Actcol;
fill(Actcol);
rect(100+(i*4), j*4, 3, 3);
}
}

sortedpostspace = sort(postspace);
int colorspacepoint = 0;
colorspace[colorspacepoint] = sortedpostspace[0];
for (int i = 0; i < 4096; i++) {
//print(sortedpostspace[i]);
if (sortedpostspace[i] > colorspace[colorspacepoint]) {
colorspacepoint++;
colorspace[colorspacepoint] = sortedpostspace[i];
//println(sortedpostspace[i]+ ” ” + colorspacepoint);
}
}

for (int i = 0; i < 64; i++) {
for (int j = 0; j < 64; j++) {
//int Actcol = get(i,j);
for (int k = 0; k < 7; k++) {
if (postspace[(i*64)+j] == colorspace[k]) {
print(colornamespace[k]);
print(“, “);
fill(colormap[k]);
rect(400+(i*4), j*4, 3, 3);

}
}
}
println();
}
}

void draw() {
}

You should put it into a directory together with the jpeg you want to post-it-ize. It’s set to a 64×64 resolution, so you’ll need 4096 post-its to complete your creation. The colours can be mapped manually by modifying the colourmap array. You can also name them as per the colours you are using in the colournamespace array. The console will give you a list of all the pixels and their colours in a column format (x = 0, y = 0-max, x=1, y = 0-max etc.).