Randomly splicing together parts of two images

Programming Questions

rperlah

Randomly splicing together parts of two images

in Programming Questions • 7 months ago

Hi- This is my first time posting to this forum for help. I am working on this sketch as part of a larger interactive project; this is, I guess, phase one. I am trying to create a randomized grid that allows me to dynamically re-arrange photographs. Right now, I am loading one half of the sketch with pieces of one image, and one half with pieces from the other.

But, I want the integration of the two images to be more randomized, and I'm not sure how to do that. I would also like to be able to control what percentage of the mix comes from one image (right now it is essentially a 50/50 mix). Any suggestions?

Thanks.

PImage img1;
PImage img2;
int yunits = 50;
int xunits = 33;
int ypixelunits;
int xpixelunits;
void setup() {
size(500, 334);
ypixelunits = width/yunits;
xpixelunits = height/xunits;
img2 = loadImage("img_04.jpg");
img1 = loadImage("img_03.jpg");
//frameRate(5);
noLoop();
}
void draw() {
int rows = int(random(2, 15));
int[] rowPositions = new int[rows];
//calculate the heights, not the y-coordinates
int lastHeight = 0;
int ycount = 0;
int totalHeight = 0;
for (int y = 0; y < height; y += lastHeight) {
if (ycount == rows-1) {
rowPositions[ycount] = height - totalHeight;
lastHeight = rowPositions[ycount];
}
else {
int yelement = int(random(1, ((yunits-rows-ycount)/6)));
rowPositions[ycount] = yelement * ypixelunits;
lastHeight = rowPositions[ycount];
totalHeight += lastHeight;
}
ycount++;
}
int ypos = 0;
int xpos = 0;
for (int i = 0; i < rowPositions.length; i++) {
int columns = 2;
int[] columnPositions = new int[columns];
int lastWidth = 0;
int xcount = 0;
int totalWidth = 0;
for (int x = 0; x < width; x += lastWidth) {
if (xcount == columns-1) {
columnPositions[xcount] = width - totalWidth;
lastWidth = columnPositions[xcount];
}
else {
int xelement = int(random(1, (xunits-columns-xcount)));
columnPositions[xcount] = xelement * xpixelunits;
lastWidth = columnPositions[xcount];
totalWidth += lastWidth;
}
xcount++;
}
int xCrop = 0;
for (int j = 0; j < columnPositions.length; j++) {
PImage crop1;
PImage crop2;
int thisX = width-columnPositions[j];
if (j == columnPositions.length-1) {
thisX = 0;
}
if ((j%2) == 0) {
//even
crop1 = img1.get(xCrop, ypos, columnPositions[j], rowPositions[i]);
image(crop1, thisX, ypos, columnPositions[j], rowPositions[i]);
g.removeCache(crop1);
}
else {
//not even
crop2 = img2.get(xCrop, ypos, columnPositions[j], rowPositions[i]);
image(crop2, thisX, ypos, columnPositions[j], rowPositions[i]);
g.removeCache(crop2);
}
xCrop += columnPositions[j];
}
ypos += rowPositions[i];
}
}
void mousePressed() {
redraw();
}

Replies(6)

amnon.owed

Re: Randomly splicing together parts of two images

7 months ago

Lot of image slicing questions lately, so search the forum.

For example: https://forum.processing.org/topic/slicing-and-tiling-images#25080000002003355

rperlah

Re: Randomly splicing together parts of two images

7 months ago

Yes, I have looked at that thread already, as well as others that are related. I have not found an example that combines parts of two images. Also I am reconfiguring the images in a very particular way, as is evidenced in the program I have copied above. I am slicing the image into horizontal bands, then am "re-flowing" image back into the bands, but cutting it at different spots each time.

In my first attempts of combining parts of two images, I just ended up writing one image on top of the next.

Here I am using a for loop to create a condition which creates the opportunity to use both images (modulo). But, I want there to be more randomness, not just half the image on one side and half on the other.

In the thread mentioned above, you suggest using textured shapes, but I am using get(). Any particular advantages from one to the other.

Thank you for your time!

amnon.owed

Re: Randomly splicing together parts of two images

7 months ago

Just ran your code, indeed it seems you have a very specific way of slicing. I'm not quite sure what the best technique would be for your desired outcome. On the one hand you want more randomness AND control the percentage. Then I would nudge more towards the pixel array directly, something like this...

Code Example 1

PImage img1, img2;
void setup() {
size(500, 500);
img1 = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
img2 = loadImage("http://www.simonhrebicek.com/wp-content/uploads/2011/12/sea.jpg");
}
void draw() {
float percentage = (float) mouseX / width;
loadPixels();
for (int y=0; y<height; y++) {
for (int x=0; x<width; x++) {
int index = x + y * width;
float val = noise(x*0.01, y*0.01, frameCount*0.01)-0.2)*2;
pixels[index] = (val > percentage ? img1.pixels[index] : img2.pixels[index];
}
}
updatePixels();
}

But then the rectangular nature is gone as well. The examples in the other threads can be adapted to (randomly) select from an array of images, instead of from one image (this is also a tip for your sketch, using an array makes image selection easier and shorter to code). However they are very grid-like, which is rectangular but still a different visual style.

Your visual output is a bit like glitch art, which would be more like this...

Code Example 2

PImage img1, img2;
void setup() {
size(500, 500);
img1 = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
img2 = loadImage("http://www.simonhrebicek.com/wp-content/uploads/2011/12/sea.jpg");
}
void draw() {
image(img1, 0, 0);
randomSeed(mouseX);
for (int i=0; i<mouseX; i++) {
int x = r(width);
int y = r(height);
set(x+r(150)-75, y+r(50)-25, img2.get(x, y, r(200), r(50)));
}
}
int r(int a) {
return int(random(a));
}

However then it's a bit harder to control things like the exact percentage etc.

You could even go the route of recursive functions and/or treemaps.

A ready-made solution for this is hard to find. It really depends on what you want exactly (form, interactivity, speed). Since it's pretty specific, I'd suggest experimenting with different techniques to find the one that suits your purpose best.

Here's another example that comes pretty close to your aesthetic, uses the pixel array and is very dynamic yet still rectangular.

Code Example 3

PImage img1, img2;
void setup() {
size(500, 500);
img1 = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
img2 = loadImage("http://www.simonhrebicek.com/wp-content/uploads/2011/12/sea.jpg");
}
void draw() {
loadPixels();
for (int y=0; y<height; y++) {
float dif = noise(y/25)*width;
float shift1 = noise(frameCount*0.002+50+y/25)*width;
float shift2 = noise(frameCount*0.001+150+y/25)*width*3;
for (int x=0; x<width; x++) {
int target = int((x+shift1)%width) + y * width;
int source = int((x+shift2)%width) + (y+frameCount)%height * width;
pixels[target] = x>dif ? img1.pixels[source] : img2.pixels[source];
}
}
updatePixels();
}

With regard to your last question.

Get() is convenient for when you need to get a rectangular part of an image and want to create slices. However it's also very slow making it inflexible and unsuitable for continuous draw loops. Of course there are many circumstance when that's not a problem. For example when you only want to slice up once or when you don't have a continuous draw loop, like in your code example.

Texture coordinates are more flexible because they can take any shape (not just rectangle) and they can be changed during the draw() loop without loss of speed. Where get() is purely 2D, texture coordinates are suitable for texturing 3D shapes as well.

rperlah

Re: Randomly splicing together parts of two images

7 months ago

Thank you. These examples are very helpful. You are right to notice the connection to glitch art.... In the second example, the top image is being split up, but the bottom image remains still. How can I get both to "fracture" and overlap each other? This question is related to the comment you wrote...

The examples in the other threads can be adapted to (randomly) select from an array of images, instead of from one image (this is also a tip for your sketch, using an array makes image selection easier and shorter to code).

Can you show me an example of randomly selecting from an array of images? I think that might be the hurdle I am having trouble getting over.

Thank you so much.

PhiLho

Re: Randomly splicing together parts of two images

7 months ago

" Can you show me an example of randomly selecting from an array of images?"

String[] images = { "img1", "img2", "img3" };
int rndIdx = int(random(images.length));
println(images[rndIdx]);
exit();

For demo / test purpose, I just used an array of strings, but it works the same with an array of images.

amnon.owed

Re: Randomly splicing together parts of two images

7 months ago

All right, I've adapted the second code example to fracture both images and make use of an array of images from which it's easier to select randomly (also now it's easier to add as many images as you want).

Code Example 2-2

PImage[] images = new PImage[2];
void setup() {
size(500, 500);
images[0] = loadImage("http://25.media.tumblr.com/tumblr_m872wd37SR1rbzsl9o1_500.jpg");
images[1] = loadImage("http://www.simonhrebicek.com/wp-content/uploads/2011/12/sea.jpg");
}
void draw() {
background(0);
randomSeed(mouseX);
for (int i=0; i<mouseX; i++) {
int x = r(width);
int y = r(height);
set(x+r(150)-75, y+r(50)-25, images[int(random(images.length))].get(x, y, r(200), r(50)));
}
}
int r(int a) {
return int(random(a));
}

Top Reply