Processing 1.0 - Processing Discourse - Limiting pixel area in a larger PImage

Biscuiting

Limiting pixel area in a larger PImage
Dec 7^th, 2009, 7:39am

Hi,

I've a small PImage that I want to break apart the pixels and scatter them in all directions randomly. I haven't gotten to the latter stages yet but I'm having difficulty with the immediate stages.

As the original pixels go to the PImage edge, I created a second PImage that's twice the size. I'm trying to copy the original pixels into the centre of this, leaving blank edges around it for random scattering when I put in the appropriate code.

I can get the pixels to start in the correct location of the second PImage but I can't limit where each X line ends. Instead, the pixels go to the edge of the larger PImage. Any ideas?

Code:


int index;
float xpos;
float ypos;
float dartSpeed;
PImage dart;
PImage fuzzyDart;
color pink = color(255, 102, 204);



void setup() 
{
  size(500, 500);
  background(200);
  frameRate(25);
  dart= loadImage("dart.png");
  fuzzyDart = createImage(dart.width*2, dart.height*2, ARGB); 
  xpos = 0;
  ypos = 0;
  dartSpeed = 3;
}

void draw() 
{
  background(200);
  // draw bg graphics
  stroke(90);
  for (int sleeperNumber = 0; sleeperNumber < height/2; sleeperNumber++) {
    line(-11 + (sleeperNumber * 4), sleeperNumber * 4, -2 + (sleeperNumber * 4) + 3, sleeperNumber * 4);
  }
  stroke(120);
  line(-2, 0, width - 2, height);
  line(-8, 0, width - 8, height);

  
  // draw darts
  dart.loadPixels();
  index=0;
  for(int x = 1; x < dart.width -1; x++) {
    for(int y = 1; y < dart.height -1; y++) {
      if (y <= x) {
        //bottom left side of dart picture
        fuzzyDart.pixels[((fuzzyDart.width/2) * (fuzzyDart.height/2)) - ((dart.width/2) * (dart.height/2)) +index] = dart.pixels[((x-1)*dart.width) + (y-1)]; 
      } else {
        //top right side of dart picture
        fuzzyDart.pixels[((fuzzyDart.width/2) * (fuzzyDart.height/2)) - ((dart.width/2) * (dart.height/2)) +index] = dart.pixels[((x-1)*dart.width) + (y-1)];
      }  
      index++;
    }
  }
  fuzzyDart.updatePixels();
  dartSpeed = mouseX / 30;
  image(fuzzyDart, xpos, ypos);
  xpos = (xpos + dartSpeed);
  ypos = ypos + dartSpeed;
  if (xpos > width) {
    xpos = -120;
    ypos = -120;
  }
}

Biscuiting

Re: Limiting pixel area in a larger PImage
Reply #1 - Dec 7^th, 2009, 7:40am

In particular, this is the area of code I need to change:

Code:


dart.loadPixels();
  index=0;
  for(int x = 1; x < dart.width -1; x++) {
    for(int y = 1; y < dart.height -1; y++) {
	if (y <= x) {
	  //bottom left side of dart picture
	  fuzzyDart.pixels[((fuzzyDart.width/2) * (fuzzyDart.height/2)) - ((dart.width/2) * (dart.height/2)) +index] = dart.pixels[((x-1)*dart.width) + (y-1)]; 
	} else {
	  //top right side of dart picture
	  fuzzyDart.pixels[((fuzzyDart.width/2) * (fuzzyDart.height/2)) - ((dart.width/2) * (dart.height/2)) +index] = dart.pixels[((x-1)*dart.width) + (y-1)];
	}  
	index++;
    }
  }
  fuzzyDart.updatePixels();
  image(fuzzyDart, xpos, ypos);

liudr Full Member Offline Posts: 175	Re: Limiting pixel area in a larger PImage Reply #2 - Dec 7^th, 2009, 9:02am A suggestion 90 degrees from your original idea. You can create a series of small images and display them together (10 by 10), then let them move as if they explode from the center. PS: I'll read your code later and see if I can spot errors.

Biscuiting

Re: Limiting pixel area in a larger PImage
Reply #3 - Dec 7^th, 2009, 9:18am

Thanks liudr!

I'll probably stick with dividing the original image in 2 for the time being (I hadn't mentioned this in the original message as I didn't want to add more material to read through that wasn't necessary). The pixels are to explode randomly, except there'll be a slight bias to 2 different directions, so I split down the middle of the image, 45 degrees. I've managed to divide the image fine this way in the original code you see above, but that isn't part of the problem I'm having - the same problem would be there if I wasn't dividing the image up before exploding the pixels.

Biscuiting

Re: Limiting pixel area in a larger PImage
Reply #4 - Dec 9^th, 2009, 3:31am

No thoughts on this? To simplify my problem:

I'm basically trying to turn a PImage into another PImage with wider, but blank, boundaries (and therefore, dimensions) that are ready to take a random scattering of all the pixels in directions beyond the original PImages size (hence the need for a bigger second PImage).

It may or may not make it more challenging, but I'm selecting the original in 2 halves to give 2 separate, but similar, behaviours to. The selections are opposing triangle corners of the original image and is done with the if (y <= x) code I have above.

PhiLho

Re: Limiting pixel area in a larger PImage
Reply #5 - Dec 9^th, 2009, 4:19am

You have exactly (if I look correctly) the same code in both parts of the conditional, and I fail to see what the complex formula attempts to do, and how it related with your description...
Beside, if you need to halves, you need two PImages, no?

This is probably not what you want, but I tried this:
Code:

void setup()
{
// [...]
  fuzzyDart1 = createImage(dart.width, dart.height, ARGB); 
  fuzzyDart2 = createImage(dart.width, dart.height, ARGB); 
// [...]
}

void draw() 
{
// [...]
  // draw darts
//  dart.loadPixels();
  index=0;
  for(int x = 0; x < dart.width - 1; x++) {
    for(int y = 0; y < dart.height - 1; y++) {
	if (y <= x) {
	  //bottom left side of dart picture
	  fuzzyDart1.pixels[x + y * fuzzyDart1.width] = dart.pixels[x + y * dart.width]; 
	} else {
	  //top right side of dart picture
	  fuzzyDart2.pixels[x + y * fuzzyDart2.width] = dart.pixels[x + y * dart.width];
	}  
	index++;
    }
  }
//  fuzzyDart1.updatePixels();
  dartSpeed = mouseX / 30;
  image(fuzzyDart1, xpos, ypos);
  image(fuzzyDart2, width - xpos, height - ypos);
// [...]
}

A simple variant:
Code:

	if (index % 2 == 0) {
	  fuzzyDart1.pixels[x + y * fuzzyDart1.width] = dart.pixels[x + y * dart.width]; 
	} else {
	  fuzzyDart2.pixels[x + y * fuzzyDart2.width] = dart.pixels[x + y * dart.width];
	}

Yet another variant:
Code:

	if (random(2) > 1.0) {
	  fuzzyDart1.pixels[x + y * fuzzyDart1.width] = dart.pixels[x + y * dart.width]; 
	} else {
	  fuzzyDart2.pixels[x + y * fuzzyDart2.width] = dart.pixels[x + y * dart.width];
	}

Biscuiting

Re: Limiting pixel area in a larger PImage
Reply #6 - Dec 9^th, 2009, 5:22am

Quote:

You have exactly (if I look correctly) the same code in both parts of the conditional,

True. Apologies for my attempts at describing my situation. I think I'm thinking too much about what it will be, while trying to describe what it currently is and that's not working. An obvious mistake I just made is what you describe there.

The pixels are going to be scattered randomly. Going to be, being the important phrase there. The 2 codes are identical until I adjust them in different ways when I get to the stage of scattering the pixels.

Quote:

and I fail to see what the complex formula attempts to do, and how it related with your description...
Beside, if you need to halves, you need two PImages, no?

Would it help if I ran through it with comments for each bit? Or would that be brain-killing stuff?

I see your point on having 2 PImages. However, the one image I'm currently using is divided up dynamically during the later stages of this project (not in the code yet) so I'd like to use one PImage and tell processing what areas to work on on-the-fly. For now, it's being told to work on one corner, and then the opposite corner (with, as you pointed out, the same code for both until I add the scattering code later).

Thanks PhiLho.

Biscuiting

Re: Limiting pixel area in a larger PImage
Reply #7 - Dec 9^th, 2009, 5:28am

Though I must point out, I'm starting to describe parts of the code that I don't think will change my problem, so perhaps I shouldn't go into depth on them. My main concern as I described above is:

Quote:

I'm basically trying to turn a PImage into another PImage with wider, but blank, boundaries (and therefore, dimensions) that are ready to take a random scattering of all the pixels in directions beyond the original PImages size (hence the need for a bigger second PImage).

Forget the image being divided - I'd still have the problem here if the image wasn't being divided. Please ask me to clarify what I've just quoted if that doesn't make sense.

blindfish

Re: Limiting pixel area in a larger PImage
Reply #8 - Dec 9^th, 2009, 6:15am

I'm not sure I fully understand the problem - why do you need to create a second image? I think I would take a different approach:

1. Create a particle Class with appropriate movement characteristics
2. Break the original image down into a grid
3. At each point of the grid get the colour (if grid point > than one pixel take an average)
4. At each point create a particle with the relevant colour and assign it appropriate movement

Where is the what if the what is in why?

Biscuiting YaBB Newbies Offline Posts: 20	Re: Limiting pixel area in a larger PImage Reply #9 - Dec 9^th, 2009, 6:32am Oh dear, I've become one of those really inarticulate problems that's baffling everybody trying to help. I think better visually so I'll post up a picture of what I'm trying to do. I need to run out now so I'll get to it later. Thanks!

koogy

Re: Limiting pixel area in a larger PImage
Reply #10 - Dec 9^th, 2009, 6:49am

no, i think you're alright. this is pretty clear:

"I created a second PImage that's twice the size. I'm trying to copy the original pixels into the centre of this"

and the problem is the index that you are using. you are incrementing it on every step but you need to bump it to the start of the next row when it reaches the end of the row of the smaller image. if that makes sense.

koogy

Re: Limiting pixel area in a larger PImage
Reply #11 - Dec 9^th, 2009, 7:04am

actually you can ditch index entirely and just use multiple statements in your for-next loop

Code:


  for(int x = 0, xd = dart.width / 2; x < dart.width; x++, xd++) {
    for(int y = 0, yd = dart.height / 2; y < dart.height; y++, yd++) {
	if (y <= x) {
	  //bottom left side of dart picture
	  fuzzyDart.pixels[xd * fuzzyDart.height + yd] = dart.pixels[x * dart.width + y]; 
	} else {
	  //top right side of dart picture
	  fuzzyDart.pixels[xd * fuzzyDart.height + yd] = dart.pixels[x * dart.width + y];
	}  
    }
  }

see how the xd (x destination) starts at dart.width (which is a simplification of your ((fuzzyDart.width / 2) - (dart.width / 2)) given that we know fuzzydart.width = 2 x dart.width and continues as far as the end of the dart width before being reset.

(edit, missed a bit in the description)

koogy God Member Offline Posts: 788	Re: Limiting pixel area in a larger PImage Reply #12 - Dec 9^th, 2009, 7:08am oh, both me and PhiLho fixed your indexing to start from 0, which is more normal and makes the maths easier. but only i remembered to change the condition to match 8)

Biscuiting

Re: Limiting pixel area in a larger PImage
Reply #13 - Dec 9^th, 2009, 9:14am

Koogy, thanks for all the help. I briefly pasted your example into my code. It ran fine but didn't centre the pixels. I haven't studied it through and this was just a quick test, so I'll do so now.

For anyone who was confused. Here's a sketched diagram of what I'm trying to achieve:
http://img207.imageshack.us/img207/7858/pixelpimage.png

koogy God Member Offline Posts: 788	Re: Limiting pixel area in a larger PImage Reply #14 - Dec 9^th, 2009, 9:35am if you initially fill the big image with pixels that aren't transparent and aren't the same colour as the background and make it move slower then it might be easier to see what's going on 8)