Show HN: Swapping Position and Brightness in Grayscale Images

[ryandamm]

This is traditionally called a histogram in video. It allows you to see brightness by region, though it's typically stacked vertically.

[TeMPOraL]

Isn't histogram an entirely different thing? As far as I know, to make a histogram you'd iterate over all pixels and, for each of them, increment histogram[pixelBrightness]. Here the author is not counting pixels, but exchanging coordinates.

[emeraldd]

Doesn't a histogram throw away the positional element of the pixel entirely and bin by the number of pixels at a particular brightness? This doesn't seem to do that ...

[no_gravity]

Interesting. Do you have a link to such a histogram?

[pierrec]

Modern waveform monitors usually have a feature that does exactly this. They replaced the older analog waveform monitors, which achieved a visually similar result but through rather different means. Very useful for video QC and calibration (I worked a few years as tech at a company that did exactly this and also had some analog ones to play with).

Some digital cameras have this as an overlay on the LCD. If you have a Canon EOS you can always get this feature via the really cool Magic Lantern open-source firmware.

Also, re: some comments calling it a histogram here: maybe colloquially (though I've never heard it), but generally it's called a waveform monitor.

[amaterasu]

Specific feature is colloquially known as luma parade. Also done using RGB channels, (inventively) referred to as RGB parade. Also, on video monitors the parade is usually done over the X axis, so rotated vs what appears in the article.

[swframe2]

I wish the demo had the ability to select a region in the original image to focus on. See http://svgjs.com/svg.draw.js/demo/index.html

[chrisparton1991]

It would be neat to provide an "iterations" parameter that runs the algorithm N times over the source image. It could be implemented a slider so the results can be animated, after a fashion.

I did this manually with the seagull photo, and some pretty interesting results occur. The seagull becomes increasingly compressed towards the left, and looks more like a seagull on even iterations than on odd iterations.

Just goes to show how entertaining a simple algorithm can be, nice work!

[brian-armstrong]

This is a crazy transform to wrap your head around. Given the impl, I think I would restate it as B'(x,y) = ARGMAX(B(u,y)=x, u) -- that is, the brightness at x,y in the new image is the max value of u for which the brightness at u,y is x in the old image.

I wonder if rather than using max, if you averaged instead. Would you get more of an idea of right/left of how that brightness is distributed?

[no_gravity]

Correct! In fact, I already use a poor mans average. Initially newImage is all black and then:

    b=oldImage[x,y];
    xa=(newImage[b,y]+x)/2; // poor mans average
    newImage[b,y]=xa;

Would a proper average improve the image further?

Let's see...

...here we go: No average on the left, poor mans average in the middle, proper average on the right:

https://www.productchart.com/elements/objects/blog/2017-12-1...

Yup, it's better. I updated the page with the proper average algorithm now.

Thanks, Brian!

[arnarbi]

This is used a lot in grading video, where it is called a luma waveform. Here's a quick tutorial: https://youtu.be/qt1XpfFMyyw