Two Images At Once?

Programming Questions

prs09210

in Programming Questions • 1 year ago

Hello,

I would like to take two images (well.. one plus a copy of itself) and copy rows from one onto the other. The reason I am doing this is to rearrange the rows in the original image. I keep a copy to get the row data from so I am not overwriting the data I need as I go along.

I suppose I don't need to be overwriting the original. I could create a new image, but how would I do that row by row like this? And there is no particular order in which the rows will be combined.

What I don't understand, is how do I have two images in memory at once and how do I access there data individually? I was using the pixels[] array and get() to gather my data. Then I wondered how get() knows which image I want to GET pixels from. Is this a silly question?

I have a formal education with C, but this sort of confusion I always run into with Processing makes me very frustrated with it. Maybe it's just OOP that I don't get. I have been using Processing since 2007.

Here is a function I use to average the green value in all rows and return an array of those averages. This is tested and works.

float[] rowAvgs(PImage img)
{
float totalGreen = 0;
float[] average = new float[img.height]; //Array to hold results
for(int j = 0; j < img.height; j++) //Rows
{
for(int i = 0; i < img.width; i++) //Columns
{
totalGreen += green(get(i, j)); //Running total
}
average[j] = totalGreen / img.width; //average of j-eth row
totalGreen = 0; //Reset total to 0
}
return average;
}

I originally wanted to take the average of the color (RGB) of a row, but quickly got confused on how to do that also. So I am just picking a color instead

Replies(6)

tfguy44

Re: Two Images At Once?

1 year ago

// An image is best defined as a PImage. You can have as many PImages as you like.
PImage img1;
PImage img2;
PImage img3;
void setup(){
// Now let's give them some data!
img1 = loadImage("http://cdn.unicornbooty.com/wp-content/uploads/2011/08/How-To-Grow-Rainbow-Roses.jpeg" );
img2 = loadImage("http://cdn.unicornbooty.com/wp-content/uploads/2011/08/How-To-Grow-Rainbow-Roses.jpeg" ); // same data, different image.
img3 = loadImage("http://www.wholeblossoms.com/images/wholesale-red-roses.jpg"); // Different data.
size( img1.width, img1.height);
image( img1, 0, 0); // initial background.
}
void draw(){
// You can get a single row from an image using get().
// This is returned as an image which can then be drawn over the existing display.
image( img2.get(0,int(random(height)), width, 1 ), 0, int(random(height)));
}
// There should be no need to mess around with pixels arrays.

prs09210

Re: Re: Two Images At Once?

1 year ago

Thanks. I appreciate you taking the time to help.

My code is trying to unscramble an image that appears to have a gradient in it. My theory is that I could calculate the average color of each row and then sort() them by their averages. Here is an example of the images I am dealing with:

It appears that there is only a horizontal gradient, but I imagine that with the rows organized properly, there is a diagonal component to the gradient. You can see in the middle that there is a "word" that is RED and one that is PURPLE/PINK. I have also considered extracting only the rows with either the RED pixels or the PURPLE/PINK and maybe I could tell what the words are with my brain.

Any ideas would be greatly appreciated.

Again, thanks for the help.

tfguy44

Re: Two Images At Once?

1 year ago

So " img2.get(0,int(random(height)), width, 1 ), 0, int(random(height))" returns a PImage that you are just overlapping with the original? Thus you end up having displayed a whole bunch of tiny (width x 1) PImages?

Basically, yes. The " img2.get(0,int(random(height))" part gets a random (width x 1) PImage from the unchanged image, and the "image( ... 0, int(random(height))" part draws it at a random position.

---

What an interesting problem! Is that the actual image you're trying to work with? Why are there random green spots on the left and red ones on the right? Do you know what the solved image is? Are you trying to solve this for a general case, or just this specific image?

tfguy44

Re: Two Images At Once?

1 year ago

DON'T LOOK IF YOU DON'T WANT THE SOLUTION RUINED!!!

So the first thing I noticed was that your image has SOLID COLORS for the pink and red letters.
Thus, a program to separate the lines with pink and the lines with red from everything else:

color PINK = color( 223, 67, 224 );
color RRED = color( 207, 51, 36 );
int at = 0;
PImage img = loadImage("http://img818.imageshack.us/img818/666/downloadhpc.png");
size( img.width, img.height );
boolean in;
for( int y = 0; y < img.height; y ++ ){
in = false;
for( int x =0; x < width; x++ ){
if( img.get(x,y) == RRED ){
in = true;
}
}
if( in){
image( img.get(0,y,width,1),0,at++);
}
}

This cut the problem down to one that's best solved the old fashioned way - by manual trial and error.

Humans are better at pattern recognition anyway.

Some things I uttered while solving the red:

That's got to be an L.

It's a J!

It's an X!

Some things I uttered while solving the pink:
That's also got to be an L.

Is that a Q?

Those two are the same... What are they?

Oh! They're an 8! They have to be 8's!
Is this an R? Where's the top half?
Oh! It's a K!

And thus:

... Solution coming soon.

tfguy44

Re: Two Images At Once?

1 year ago

Good luck trying to solve this for a general case!

PS: If this solution has helped you win a bet, I get half your winnings.

prs09210

Re: Re: Two Images At Once?

1 year ago

Good job on beating me to the solution! I am thoroughly impressed.

Ok, so in the time after my last response I had written code to identify the two colors of the text (pink first then red) simply by identifying the only two colors that can be found two pixels consecutively. I also made a method to tell me if a row has text in it of the specified color (in this case pink or red) and made a loop to create an array containing the row numbers holding text info. Beyond that, I couldn't think of a nice way to move the image around. I would like to know how you constructed that image. I assume you manually moved the rows to solve a sort of one way jigsaw puzzle. You must have created some kind of program to allow you to manipulate the image, right?

This will be used for a general case, so my results may vary. This is just for a programming challenge on a website. The page loads and you have something like 180 seconds to type in the two lines of text. It's worth noting that top row of text could be switched with the bottom which would lead to a 50/50 chance of getting the right answer. ("KQI8L87WJXLW" or "7WJXLWKQI8L8"). Once I solve this I can move on to the next level in the programming challenges, but no prize money sadly

Top Reply