_______ __ _______
| | |.---.-..----.| |--..-----..----. | | |.-----..--.--.--..-----.
| || _ || __|| < | -__|| _| | || -__|| | | ||__ --|
|___|___||___._||____||__|__||_____||__| |__|____||_____||________||_____|
on Gopher (inofficial)
URI Visit Hacker News on the Web
COMMENT PAGE FOR:
URI Dithering â Part 1
chaidhat wrote 1 hour 39 min ago:
This is really cool! I always thought dithering was just blending two
colors by alternating adjacent pixels, I didn't know there was more
ways to do it than one.
rezmason wrote 3 hours 17 min ago:
I can appreciate the passion and consideration that went into this
presentation of the subject!
agys wrote 4 hours 30 min ago:
I used different types of dithering (ordered, error diffusion) in many
of my design projects as a visual language, static or animated, mostly
for projects related to tech/computers/blockchain, sometimes combined
with ASCII art.
There is a certain warmth (or maybe itâs just nostalgia) of these
older techniques that can be harvested and combined with new ideas or
new takes.
(Apologies for the Instagram links).
D.Y.O.R.: [1] D.Y.O.R. (printed): [2] Titles: [3] Experiment on
controlling the amount of dithering:
URI [1]: https://www.instagram.com/p/DH1AjFzi3c6
URI [2]: https://www.instagram.com/p/Cjfzy23sCOg
URI [3]: https://www.instagram.com/p/DHITpNYiWtF
URI [4]: https://www.instagram.com/p/CYO_h9Yh18e/
MarcelOlsz wrote 4 hours 5 min ago:
Great links. I just did my portfolio in a retro-ish style and started
getting into making retro shaders. Check it out: [1] .
URI [1]: https://olsz.me
IgorPartola wrote 6 hours 37 min ago:
Very cool way to visualize it but I will be honest the threshold map
doesnât make sense. This didnât seem to explain how to form the
map, how to choose the threshold values, and so on. It showed grey
pixels passing through white, black, and grey pixels and moved onto
generalizing this pattern.
Is this just me being dumb or the curse of knowledge where something is
so obvious to the author that they donât even bother explaining it?
egypturnash wrote 6 hours 36 min ago:
They say that part 2 will discuss how thatâs formed, and 3 will
discuss error diffusion dithering.
snvzz wrote 7 hours 26 min ago:
To the webpage author, I'd suggest adding WASD navigation as an
alternative to cursor keys.
marstall wrote 8 hours 14 min ago:
unbelievable. gifted explainer!
janderson215 wrote 8 hours 32 min ago:
This was an amazing presentation! In one of the earliest screens, it is
demonstrated that there are more or less 8 different shades of gray
from just different patterns of black/white pixel arrangement. Is it
possible to use the âblow upâ view to classify the different shades
of gray in an image to determine what the pattern should be for a given
pixel grouping should be? Maybe this would be accomplishing the same
thing the threshold filter accomplishes and have the same end result or
possibly a different dithering method. Just trying to integrate this
into my brain.
jzacharia wrote 9 hours 5 min ago:
I've been working on an implementation of this in Rust actually, weird
timing. Cool article.
shrinks99 wrote 9 hours 2 min ago:
A friend of mine wrote one for Go with the goal of creating the best
and most complete dithering library out there and I think he did a
decent job. Worth a look if you're looking for reference
implementations!
Here's his:
URI [1]: https://github.com/makew0rld/dither
hunter2_ wrote 9 hours 22 min ago:
This is halftone (i.e., an apparent palette with more colors than the
actual palette, by ensuring that you aren't just rounding the same way
everywhere) but it isn't dithering in my opinion. To me, dithering
means fading away the banding that occurs when the palette (or the
apparent palette achieved via halftone) isn't large enough to avoid
banding on its own.
The halftone technique demonstrated here takes a palette of 2 colors
and increases it to something on the order of 20 apparent colors, but
even with 20 there are extremely obvious bands.
That banding can be virtually eliminated by having way more colors
(say, 256 if grayscale, 256^3 if RGB) or it can be virtually eliminated
via dithering. I suspect the "error diffusion" technique (which is
teased at the end of this demo) does what I'm talking about.
Noise is the key to dithering, and I don't see any noise in this demo.
Everything is deterministic.
But the presentation is spectacular!
kragen wrote 3 hours 12 min ago:
Error-diffusion dithering or dithering with a precomputed blue-noise
or white-noise pattern are also deterministic.
One standard point of view is that what introduces noise is
quantization, in the sense that the quantized image has an unwanted
difference from the desired image, and dithering consists of
techniques to shape that noise. The Bayer-matrix ordered dithering
algorithm presented here concentrates the noise at high frequencies
where the eye is less sensitive to it, but it still retains some
noise at lower frequencies, which is the banding you're commenting
on.
Dave Long had the sharp observation earlier today that
Bresenham-style line drawing is a form of dithering, where the signal
being represented is the position of the pen rather than the
brightness of the visual field. (I see that dreamcompiler made the
same observation two days ago: [1] but I don't know if Dave saw it
there)
We had a good discussion of dithering here a couple of days ago,
connected with a significantly more comprehensive article with a less
fancy presentation:
URI [1]: https://news.ycombinator.com/item?id=45728962
URI [2]: https://news.ycombinator.com/item?id=45728231
pacaro wrote 3 hours 14 min ago:
Dithering as a mechanism to reduce/remove banding can be very
impressive.
The color Next machines only had 12 bit displays, 4 bits per channel,
but with careful use of dithering it was often indistinguishable from
a 24-bit display (so called "true color")
__loam wrote 4 hours 47 min ago:
I'm a pixel artist and everyone I know who uses this kind of
technique calls it dithering.
monitron wrote 9 hours 14 min ago:
You made me curious. It looks like dithering is still an accepted
name for this kind of technique:
URI [1]: https://en.wikipedia.org/wiki/Ordered_dithering
hunter2_ wrote 8 hours 53 min ago:
Glad I snuck in that it's just my opinion! But the article you
linked to sort of admits what I'm saying:
> The above thresholding matrix approach describes the Bayer family
of ordered dithering algorithms. A number of other algorithms are
also known; they generally involve changes in the threshold matrix,
equivalent to the "noise" in general descriptions of dithering.
Basically, I'm leaning into "general descriptions of dithering"
with my noise requirement, and the lack of noise in "ordered
dithering" leads me to consider it not-quite-dithering.
The very first sentence of the general Dithering article [0]
connects with my perspective as well:
> preventing large-scale patterns such as color banding
Aside: I probably misspoke with the word "halftone" earlier;
apparently that's a specific thing as opposed to an umbrella term.
I'm not sure there's a great word (other than "dither"...) for
techniques to trade resolution for color.
[0]
URI [1]: https://en.wikipedia.org/wiki/Dither
kragen wrote 2 hours 21 min ago:
I think that text is somewhat misleading because it leads people
to believe that ordered dithering is not a kind of dithering, and
also because the noise in general descriptions of dithering is
not equivalent to changes in the threshold matrix. Rather, it is
equivalent to differences between the input image and the output
image. So I've fixed it.
mpyne wrote 5 hours 42 min ago:
Dithering is the right term. It was called this even as far back
as the Win 3.1 era where program installers typically showed you
a full screen window with a background gradient that went from
dark blue to black and used ordered dithering to make it look
semi-respectable.
The threshold map of ordered dithering is still a source of
noise, it just happens to be carefully pre-baked so that
(original image + noise)==output makes the output more legible
than what you'd get from just mapping the original image pixels
to the nearest available color.
The error diffusion is static and baked into the thresholds
chosen, but it's still there and choosing the error diffusion
properly still matters to getting a reasonable output.
joefourier wrote 10 hours 48 min ago:
Beautiful demo, but Iâm not sure itâs accurate to call dithering an
âillusionâ of more shades than is available?
If you apply a low pass filter to a dithered image, and compare it to a
low passed filtered thresholded, youâll see that the âillusoryâ
shades are really there in the dithered version, theyâre just
represented differently in the full resolution image.
Similarly, a class D amplifier emits purely off/on pulses before a low
pass filter is applied, but no one would call the output an auditory
âillusionâ. In the case of image dithering, isnât the low pass
filter your own vision + the distance to the screen?
hatthew wrote 10 hours 40 min ago:
I would call it an illusion because if you pay attention you can
clearly see that the color you perceive isn't actually present. You
can see white on an RBG computer screen since your eyes simply don't
have the resolution to discern the subpixel colors. However, in a
dithered image with only black and white, you perceive gray, but you
can also tell what the reality is without much effort. Personally, I
think that fits the definition of an illusion.
crq-yml wrote 6 hours 48 min ago:
That's verisimilitude. We were doing that with representational art
way before computers, and even doing stipple and line drawing to
get "tonal indications without tonal work". Halftone, from
elsewhere in the thread, is a process that does similar. When you
go deeper into art theory verisimilitude comes up frequently as
something that is both of practical use(measure carefully, use
corrective devices and appropriate drafting and markmaking tools to
make things resemble their observed appearance) and also something
that usually isn't the sole communicative goal.
All the computer did was add digitally-equivalent formats that
decouple the information from its representation: the image can be
little dots or hex values. Sampling theory lets us perform further
tricks by defining correspondences between time, frequency and
amplitude. When we resample pixel art using conventional methods of
image resizing, it breaks down into a smeary mess because it's
relying on certain artifacts of the representational scheme that
differ from a photo picture that assumes a continuous light signal.
Something I like doing when drawing digitally is to work at a high
resolution using a non-antialiased pixel brush to make black and
white linework, then shrink it down for coloring. This lets me
control the resulting shape after it's resampled(which, of course,
low-pass filters it and makes it a little more blurry) more
precisely than if I work at target resolution and use an
antialiased brush; with those, lines start to smudge up with
repeated strokes.
joefourier wrote 8 hours 59 min ago:
In the case of dithering, thatâs only because the monitor has
insufficient resolution. Put a 1:1 Floyd steinberg dithered image
on your phone, hold it at armâs length, and unless you have
superhuman vision youâll already start having a hard time seeing
the structure.
If you look at analogue B&W film for instance (at least the ones
Iâm familiar with), each individual crystal is either black or
white. But the resolution is so high you donât perceive it unless
you look under a microscope, and if you scan it, you need very high
res (or high speed film) to see the grain structure.
Dithering is not an illusion because the shades are actually still
there. With the correct algorithms, you could upscale an image,
dither it, down res it, and get back the exact same tones. The data
isnât âfakedâ, itâs just represented in a different way.
If youâre calling it an illusion, youâd have to call pretty
much every way we have of representing an image, from digital to
analog, an illusion. Fair, but Iâd rather reserve the term for
when an image is actually misinterpreted.
hatthew wrote 8 hours 40 min ago:
I would define an illusion as something where your perception of
a thing differs from the reality of the thing in a way that
matters in the current context. If we were discussing how LCD
screens work, I would call the color white an illusion, but if we
were discussing whether to make a webpage background white or
red, I would not call the color white an illusion.
dsamarin wrote 10 hours 34 min ago:
Do you consider the color yellow on your RGB monitor an illusion?
(I do)
hatthew wrote 8 hours 44 min ago:
I personally wouldn't, but it's close enough that I'm not going
to disagree.
zamadatix wrote 10 hours 23 min ago:
Same. A fun fact about this is as you increase the bit depth, the
percentage of faked outputs actually increases as well. With just
8 bits, you have more 9's than AWS this year!
TuxSH wrote 9 hours 54 min ago:
You can also add a temporal dimension (-> temporal dithering,
also known as FRC).
For example if you alternate blue and red every frame at 60~120
FPS, the only thing you'll see is purple.
egypturnash wrote 6 hours 33 min ago:
With red/blue artifacts visible when the viewerâs gaze
passes rapidly across it.
K0IN wrote 10 hours 56 min ago:
Hei, if someone wants to implement this, feel free to contribute this
to my Phomemo M02 (a cheap < 15$) black and white thermal printer, web
app.
URI [1]: https://github.com/K0IN/Phomemo-M02-Web
agarv wrote 10 hours 34 min ago:
Since I see you're using Vue, I created an MIT licensed dithering web
app with Vue. I've never tried to embed it in anything, but you're
welcome to give it a shot.
URI [1]: https://github.com/allen-garvey/dithermark
glimshe wrote 11 hours 2 min ago:
We had another dithering post a few days ago and nobody answered my
question... I'm reposting in case someone who comes here knows the
answer:
"Does anyone know of any application/tool that can perform palette
dithering? The idea is "here is a n-color palette specified in their
RGB values, here is the full-color RGB image, give me the best possible
dithered image using the provided palette". The tools that I've used
were underwhelming and produced results full of banding and artifacts.
Basically, great dithering in color instead of B/W."
EDIT: Thank you for the answers! I'll check all links.
kragen wrote 3 hours 7 min ago:
This is common functionality in graphics software, but there isn't
such a thing as "the best possible dithered image using the provided
palette"; there are unavoidable tradeoffs between sharpness and color
precision, so different ways of dithering may be better for different
purposes.
agarv wrote 4 hours 49 min ago:
I don't know if it's exactly what you're looking for but I made a
free tool [1] . It only allows 18 colors max, but it has a lot of
options, including the ability to determine what color palette to
use.
URI [1]: https://app.dithermark.com
mpyne wrote 5 hours 40 min ago:
Use Google's Squoosh.app: [1] When editing an image you can choose
the 'Reduce palette' option to bring up a way to reduce the number of
images used, and the palette reduction panel will let you optionally
apply dithering or not.
The dithering algorithm is not selectable but it's worth trying to
see if you like it.
URI [1]: https://squoosh.app
snvzz wrote 7 hours 25 min ago:
The gimp can do this.
Define your palette, then via the dialog spawned through
image->format menu, pick your palette from the list.
glimshe wrote 5 hours 28 min ago:
Yes, but the algorithm isn't that great... That's what I'm using
now
snvzz wrote 3 hours 22 min ago:
"Positional" is a single, relatively boring hardcoded pattern,
and the other options are FloydâSteinberg error diffusion.
I do agree it would be nice to extend gimp to do all sorts of
fancy dithering, and imagine it's just that nobody has put on the
work yet.
kragen wrote 3 hours 6 min ago:
FloydâSteinberg is pretty great when your palette has
reasonably-close colors.
rikroots wrote 10 hours 1 min ago:
I responded in that post (though not to you, and probably not what
you're after) with a link to my JS canvas library's "reduce palette"
filter. It includes both supplying an array of colors to act as the
palette, and setting the required number of colors for which the
filter can calculate a "commonest colors" palette, calculating color
distances in the OKLAB color space - [1] If anyone wants to see the
filter code, it in the GitHub repo here:
URI [1]: https://scrawl-v8.rikweb.org.uk/demo/filters-027.html
URI [2]: https://github.com/KaliedaRik/Scrawl-canvas/blob/064469928a3...
kevinsync wrote 10 hours 26 min ago:
I left a comment [0] on the other thread, and this is irrelevant if
you aren't using Photoshop, but there's a plugin called DITHERTONE
Pro that gives you a lot of control over the dither algorithm used +
color grade. For actual design, I tend to use this since I'm already
in PS cobbling together an image, and you can tweak the results in
realtime to dial it in how you want.
I also have used didder [1] a couple times for dithering via CLI /
script. Its results can be pretty good too, just more for repeatable
batch operations and you need to make sure your palettes and chosen
algorithms will produce what you're actually looking for.
[0] [1]
URI [1]: https://news.ycombinator.com/item?id=45726845
URI [2]: https://github.com/makew0rld/didder
shrinks99 wrote 9 hours 0 min ago:
Cole (the author of didder) also has a GUI version called
Dithertime:
URI [1]: https://makew0rld.itch.io/dithertime
tfinch wrote 10 hours 34 min ago:
Iâm using this for making some quake inspired textures - itâs a
bit clunky but works for me
URI [1]: https://captain4lk.itch.io/slk-img2pixel
gyomu wrote 10 hours 57 min ago:
Thatâs going to be a tricky problem full of compromises, and
entirely up to how you formalize your definition for âthe best
possible dithered imageâ.
Do you care about preserving relative brightness, contrast, edges,â¦
etc.
Human color perception is tricky, and in the outline you give itâs
entirely possible that the provided n-color palette (also, what order
of magnitude n are we talking about here?) would be inadequate for a
satisfactory rendering of the provided full color image.
glimshe wrote 9 hours 23 min ago:
I'd just like a subjectively "good" result that beats the manual
approaches using image manipulation programs.
n would be less than 4096, but usually much smaller values (256,
16)
estebank wrote 11 hours 8 min ago:
Obligatory link to the in-progress forum post about the development of
The Return of the Obra Dinn's dithering effect: [1] The difficulty for
dithering on an interactive 3d scene is in making the dithering stable
on camera rotation, otherwise you get a twinkling stars effect, not
dissimilar to the "fireflies" in reflections in ray-traced games.
URI [1]: https://forums.tigsource.com/index.php?topic=40832.msg1363742#...
m12k wrote 11 hours 3 min ago:
And here's a couple videos about a technique that was inspired by the
Obra Dinn's dither, but making it surface stable: [1] (explanation)
[2] (demo)
URI [1]: https://www.youtube.com/watch?v=HPqGaIMVuLs
URI [2]: https://www.youtube.com/watch?v=EzjWBmhO_1E
kragen wrote 2 hours 31 min ago:
These are absolutely amazing, thank you! I had wondered whether
something like this was possible because I have this 1-bit-deep
screen here, and now I'm delighted to see that it is. I'm just not
sure if my machine has enough CPU to manage it.
anteloper wrote 11 hours 9 min ago:
Good lord this is a beautiful web experience
jarjar2 wrote 11 hours 47 min ago:
Two videos from Daniel Shiffman's Coding Train:
Turning Images into Dots: The Magic of Dithering [1] Coding Challenge
181: Weighted Voronoi Stippling
URI [1]: https://www.youtube.com/watch?v=0L2n8Tg2FwI
URI [2]: https://www.youtube.com/watch?v=Bxdt6T_1qgc
lampiaio wrote 11 hours 58 min ago:
Few things brighten my browsing day as much as a virtual ode to
dithering.
ChrisArchitect wrote 12 hours 18 min ago:
There's a weird subset of graphic design grifters on social media
obsessed with dithering right now.
Submission from the dev earlier
URI [1]: https://news.ycombinator.com/item?id=45694750
hatthew wrote 12 hours 0 min ago:
I don't think it's a negative thing, but I find it kinda funny that
there's a new dithering article on HN at least once a month
Modified3019 wrote 12 hours 3 min ago:
Why do you think the term âgrifterâ applies here?
ChrisArchitect wrote 11 hours 55 min ago:
not here as in HN, out on social posts.... some unhinged claims
about inventing dithering trends and a lot of startup/techbro types
putting the 'aesthetic' forward as the goto way to success. shrug.
hunter2_ wrote 10 hours 8 min ago:
I don't think GP meant "here" the way you are interpreting "here"
(i.e., this site / that site). Rather, I think they meant "here"
to mean "in the sentence you wrote."
Put another way, I think GP was asking why you think the term
"grifter" has anything to do with graphic designers who are
obsessed with dithering right now. Basically, you aren't
asserting that they're obtaining value illicitly (i.e.,
swindling, conning), as would need to be the situation for a
grift to occur. If they're convincing customers that their
dithering product is a must-buy because dithering is the best
thing ever, and the customer hands over their money upon being
convinced, that really isn't a grift unless the product somehow
ends up not doing the thing.
If I lie on a website, and the subsequent wave of additional
readers leads me to collect tons of ad revenue, the readers have
not been grifted (they still have their money) and the ad network
was not grifted (I gave them legitimate traffic). If I lie to a
reader in order to take the reader's money, then at that point
yes, the reader was grifted.
Fraterkes wrote 11 hours 51 min ago:
(For those who are confused, a few days ago on twitter some
random graphic designer / webdev claimed that they started the
trend of using dithering in modern graphic design. People made of
fun of that person. All of that is unrelated to this post)
dbushell wrote 12 hours 7 min ago:
those dithering perverts how dare they try to educate us with their
fancy graphics!
seemaze wrote 12 hours 19 min ago:
While I enjoyed the whole presentation, my favorite part after
progressing through the entire deck was pressing my back button once
and landing right back here on HN :)
kridsdale1 wrote 10 hours 52 min ago:
Same! I dreaded my history being filled.
hackncheese wrote 12 hours 39 min ago:
Somehow my first time seeing Visual Rambling, absolutely beautiful site
DIR <- back to front page