
Show HN: Swapping Position and Brightness in Grayscale Images - no_gravity
https://www.productchart.com/blog/2017-12-19-images
======
ryandamm
This is traditionally called a histogram in video. It allows you to see
brightness by region, though it's typically stacked vertically.

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

~~~
nhoiunh4nth
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...](https://support.apple.com/kb/PH12688?locale=en_US&viewlocale=en_US)

------
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](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...](https://www.productchart.com/elements/objects/blog/2017-12-19-images/averages.jpg)

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

Thanks, Brian!

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

------
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](https://youtu.be/qt1XpfFMyyw)

