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

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.

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 ...

Yes it does. This is similar to what is shown on the video scopes of television engineers in the luma waveform view.

https://support.apple.com/kb/PH12688?locale=en_US&viewlocale...

You can keep one of the dimensions by making a histogram a 3d surface. 3d surface f(x,y)->z can be displayed as flat image with brightness representing z value. Brightness can be displayed using dithering. Putting all that together would result in more or less the same diagrams as described in article. With biggest difference being that information about left part of image is actually visible.

Swapping x with brightness is a bit misleading as dithering effect of white dots on black background give much stronger feeling of varied brightness than actual brightness.

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

This type is actually known as a luma waveform histogram:

https://i.imgur.com/Gn4KQTW.png

Source: https://github.com/epistemex/scopes

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.

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.

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

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!

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?

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!

Awesome! The background gradient bar seems reasonable now, you can see that it's about hakf brightness which makes more sense to me :)

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