Links

• Try it out
• Source

reflow is a small experiment that looks at resizing images by reflowing their pixels into the new image dimensions. This can produce some fun effects.

How it Works

We normally think of images as two dimensional, with each pixel identifiable by an x and y coordinate. Reflow explores what happens if we instead treat pixel data as one dimensional, and specifically how this applies to image resizing.

Take the image:

Let’s say that the indices of each pixel in a one dimensional array are:

0 1 2
3 4 5
6 7 8

Now, what happens if we want to decrease the width of the above image to make it just 2 pixels wide instead of 3? Traditional image resizing methods would crop or adjust the pixels to fit within the new size. Reflow on the other hand preserves the original pixel data but reflows the one dimensional array of pixels into the new image dimensions.

Because we started with 9 pixels in the 3x3 image, the new 2 pixel wide output image must be 5 pixels high in order to have room for the 9 pixels plus one unused pixel at the end. Here are the indices of each pixel in the output image:

0 1
2 3
4 5
6 7
8 X

We can resize the image horizontally using the same technique:

0 1 2 3
4 5 6 7
8 X X X

Example

Starting with this classic test image:

If we increase the width by a factor of four, we end up with four duplicate images, each showing alternating rows of the original:

For less regular sizes, the results can be trippy:

Or make pretty patterns:

It’s interesting to adjust the output image size and watch how the ouput changes. The reflow site allows you to upload any image and explore how it is reflowed.