2011 – Glitcture

Glitcture is a mix of glitch and picture. It feels funny trying to create a glitch, as glitches are often defined as unintentional. That is the idea of this software though. To accomplish this I have used Processing to load an image and copy and paste parts of it back onto the image. At this point it lacks a user interface, and you must alter the code directly to change the number of glitches and their attributes. Also there seems to be a bug with the save dialog, in that pressing the esc-key or cancel button doesn’t cause the dialog box to close properly. It saves when you press save though (press shift-s to open the save dialogue box or the mouse button to re-glitch it). I have so far had difficulty getting the exported applet to properly load and display pictures, either with a hard-coded picture path or a selectInput() dialog box, but if you copy the code into your processing window it should work fine.

This is a night photo of the quiet pool at Serenis La Salina resort in Veradero, Cuba. The first glitches two are set to 200 glitches with 10 copies a each. The last was 20 glitches with 5 copies.

This is Devo…

This picture was focused wrong, but with Glitcture, it’s like Magic! I also learned that if you don’t type .jpg in when saving from Glitcture it automatically saves to .tif. These ones were saved as .jpgs instead of converted from .tifs and their file sizes are smaller. I presume that to mean less detailed, so I will continue to save as .tifs and convert to .jpg (just for wordpress) after. I really like some of these ones though, and I can never re do them just the same. Maybe I should make seeded randoms so I can.

The original here is a cc-by licensed photo from flickr, by markbyzewski. Link to original.
I found this one didn’t work well with high numbers of glitches. I kept it down to 50 for all three of these. I also found I was more picky, because this is someone else’s art I am glitching. I don’t want to make their work look bad. Oh, and they are ridiculously large compared to the previous ones which all originated from my camera.

The original here has been jacked from Jeremy Levine Design on flickr, and is of course cc-by licensed, so I am free to use this picture as I please, and it pleases me to glitch it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
This photo is by Neil from flickr.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Below is the Processing code that I used to create this.


PImage picture = null;
PImage backUp = null;
float ratio;

void setup()
{
size(800,600);
colorMode(HSB);
//String loadPath = selectInput();
//picture = loadImage(loadPath);
//backUp = loadImage(loadPath);
picture = loadImage("TEST.jpg");
backUp = loadImage("TEST.jpg");
}

void draw()
{
if(picture.width>800 || picture.height>600)
{
ratio = (800/(float(picture.width))<(600/float(picture.height)))
? 800/float(picture.width) : 600/float(picture.height);
} else {
ratio = 1;
}
image(picture,0,0,picture.width*ratio,picture.height*ratio);

if((keyPressed == true) && (key == 'S'))
{
String savePath = selectOutput();
if(savePath == null) {
println("savePath == null");
} else {
picture.save(savePath);
}
}
}

void glitch()
{
int numGlitches = 200;
int numCopies = 10;
picture.copy(backUp, 0, 0, backUp.width, backUp.height, 0, 0, backUp.width, backUp.height);
for(int j=0; j<numGlitches; j++)
{
int glitchDistance = int(random(40)+10);
int direction = int(random(4));
int glitchX = int(random(picture.width));
int glitchY = int(random(picture.height));
int glitchWidth = int(random(picture.width - glitchX));
int glitchHeight = int(random(picture.height - glitchY));

PImage glitch = picture.get(glitchX, glitchY, glitchWidth, glitchHeight);
for(int i=0; i<numCopies; i++)
{
// paste to screen iteratively
if(direction == 0) {
// left to right
picture.set(glitchX+((j+1)*glitchDistance), glitchY, glitch);
} else if(direction == 1) {
// right to left
picture.set(glitchX-((j+1)*glitchDistance), glitchY, glitch);
} else if(direction == 2) {
// top down
picture.set(glitchX, glitchY+((j+1)*glitchDistance), glitch);
} else if(direction == 3) {
// bottom up
picture.set(glitchX, glitchY-((j+1)*glitchDistance), glitch);
}
}
}
}
void mousePressed()
{
glitch();
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s