Swapping Position and Brightness in Grayscale Images
One of the reasons I founded Product Chart is my interest to put things on
charts that usually do not belong there. And it turned out to be super useful
to use charts instead of lists to organize products and compare them.
Recently I was thinking about the pixels of images as objects on a chart. After all, that is not too strange compared to the things that we usually put on charts here.
In a grayscale image, every pixel has 3 parameters: Horizontal position, vertical position and brightness. I was wondering what the image would look like if I exchanged the brightness and the horizontal position for each pixel. So what was dark becomes left. What was bright becomes right. What was left becomes dark and what was right becomes bright.
Recently I was thinking about the pixels of images as objects on a chart. After all, that is not too strange compared to the things that we usually put on charts here.
In a grayscale image, every pixel has 3 parameters: Horizontal position, vertical position and brightness. I was wondering what the image would look like if I exchanged the brightness and the horizontal position for each pixel. So what was dark becomes left. What was bright becomes right. What was left becomes dark and what was right becomes bright.
Putting it into code is straight forward:
for (x=0;x<width;x++) {
for (y=0;y<height;y++) {
b=oldImage[x,y];
newImage[b,y]=x;
}
}
Let's see what happens:
Uhm.. ok.. so what do we see here? Ah! The vertical beam
is the grey background. It moves slightly from the left to the
right. Because the background gets lighter from top to bottom.
And lighter now means further to the right. There is not
much contrast in the input image. So in the output image not
much is on the left or on the right. And it's easy to spot that
the eye is the darkest part of the input image, as it sticks out
to the left in the output image.
This image has a lighter background, so the light beam starts
further on the right. And the background is not as uniform,
so the beam is wider. Slightly below the middle, the background
gets darker so the beam takes a turn to the left. Also nicely
visible that there are about 5 shades of grey in the image. Represented
by the vertical stripes in the transformed image.
Furry input, fuzzy output :) This kitten has a lot of
contrast. So there are pixels on the left and right of the
transformation. It even has too much contrast as can be seen
by the lack of pixels in the middle. There is a relevant
xkcd for this one.
In the input image, the gaps between the stones reflect light and
cast shadows. Which wiggles the background beam sideways. The boy
is a distinguishable silhouette on the left of the transformed
image.
Or check out the other things we have put on charts!