7 ms·

Show HN: Swapping Position and Brightness in Grayscale Images

36 points by no_gravity 9y ago

ryandamm 9y ago
This is traditionally called a histogram in video. It allows you to see brightness by region, though it's typically stacked vertically.
- no_gravity 9y ago
  Interesting. Do you have a link to such a histogram?
  - deleted 9y ago
    [deleted]
  - fyrstenberg 9y ago
    This type is actually known as a luma waveform histogram: https://i.imgur.com/Gn4KQTW.png https://i.imgur.com/Gn4KQTW.png Source: https://github.com/epistemex/scopes https://github.com/epistemex/scopes
- TeMPOraL 9y ago
  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 9y ago
  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 9y ago
    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=en_US https://support.apple.com/kb/PH12688?locale=en_US&viewlocale...
  - Karliss 9y ago
    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.
deleted 9y ago
[deleted]
swframe2 9y ago
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
pierrec 9y ago
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 9y ago
  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.
chrisparton1991 9y ago
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 9y ago
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 9y ago
  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-19-images/averages.jpg 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!
  - brian-armstrong 9y ago
    Awesome! The background gradient bar seems reasonable now, you can see that it's about hakf brightness which makes more sense to me :)
arnarbi 9y ago
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

36 points by no_gravity 9y ago

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

no_gravity 9y ago
Interesting. Do you have a link to such a histogram?
- deleted 9y ago
  [deleted]
- fyrstenberg 9y ago
  This type is actually known as a luma waveform histogram: https://i.imgur.com/Gn4KQTW.png https://i.imgur.com/Gn4KQTW.png Source: https://github.com/epistemex/scopes https://github.com/epistemex/scopes
TeMPOraL 9y ago
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 9y ago
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 9y ago
  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=en_US https://support.apple.com/kb/PH12688?locale=en_US&viewlocale...
- Karliss 9y ago
  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.

deleted 9y ago

[deleted]

swframe2 9y ago

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

pierrec 9y ago

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 9y ago
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.

chrisparton1991 9y ago

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 9y ago

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 9y ago
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-19-images/averages.jpg 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!
- brian-armstrong 9y ago
  Awesome! The background gradient bar seems reasonable now, you can see that it's about hakf brightness which makes more sense to me :)

arnarbi 9y ago

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