2

EDIT:

Is there a way to jumble arround the pixelated elements? If I have a grid of lets say 100x100 - then the pixels get very small and you can see the image sort of. So I'd like to jumble the pixelated parts. Any idea?

I'm trying to use PHP to divide an image into an equal grid, so that I could pixelate it into even parts.

It has to do with a sort of game. There is an image uploaded by some user, and I want it to be divided into x blocks (the user selects how many blocks there should be), each of the blocks would then be pixelated. When other users complete some task - one part of the pixelated block is revealed, until all pixelated parts are gone and you're left with the original image. I really don't care if the grid elements are squares, or rectangles - I just want them to be even.

As my starting points, I'm using the answer on this question PHP image pixelate?

To determine the x and y pixel size, I'm using this formula:

$gridElements = 9;
$pixelate_x = $width/sqrt($gridElements);
$pixelate_y = $height/sqrt($gridElements);

I've noticed that when using a number, whose square root is an integer - I get a more even grid.. But it's not perfect.

When trying out with a 9 block grid, and using a 1160x680 image, I get the following:

Image 1

It may appear to look even, but the last row is bigger than the top 2 rows.

When I scale it to 16, the difference is quite obvious

enter image description here

And when trying out a 400 element grid (20x20) the 21th row appears.

enter image description here

So .. It's not working very well, I do want the grid to be even. Does anyone have any idea of how this could be done?

Community
  • 1
  • 1
Matt
  • 1,139
  • 1
  • 11
  • 28
  • Looks like that's actually row 20, not 21? – FoolishSeth Mar 03 '13 at 14:55
  • You'd have to check whether `image_height / number_of_vertical_blocks` is `integer` which shouldn't be a problem with 4x4 or 20x20... are you sure your `image_height` = 680? – michi Mar 03 '13 at 14:56
  • Yes sorry I was counting another attempt.. Yes the 20th row is cut :/ Yes the image height is 680, you can copy the image URL and open it in a new tab. – Matt Mar 03 '13 at 15:14

1 Answers1

1

This is because 1160 doesn't really divides itself very well, even by 3 (yes, it is not equal when using 3x3 grid either). Your greatest enemy here are integers

Machavity
  • 30,841
  • 27
  • 92
  • 100
Jan Myszkier
  • 2,714
  • 1
  • 16
  • 23
  • Well I've tried using widths & heights that have a square root equal to an integer, so my new image size is 1156 x 676, yet I still have the same cut off issues – Matt Mar 03 '13 at 15:24
  • try this: http://pastie.org/6371547 it resizes the image first, then iterates over it using integer-ized pixelates. commented out some lines, and in my opinion you can even cut out a ot of code from there ;) – Jan Myszkier Mar 03 '13 at 16:00