4 ms·

The demo gods have done it again. Wow. I wish they would explain more about how they're managing to blend colors using shade blocks. Because doing that on this

by jart 4y ago

The demo gods have done it again. Wow. I wish they would explain more about how they're managing to blend colors using shade blocks. Because doing that on this scale either requires an extremely advanced knowledge of physics, or the fanatical dedication of a lonely artist.

gonesilent 4y ago
or mathlab
Retr0id 4y ago
Why does blending colours require advanced physics?
- viler 4y ago
  It doesn't really - for this particular technique an ANSI-art editor should do (and was in fact used for almost all graphics in this demo, to one degree or another). :) I suppose there's a wee bit of physics if you want to fine-tune the results for a particular CRT monitor... not that we've really done much of that for the party-version, but there's some research on the original IBM 5153 CGA monitor at https://int10h.org/blog/2022/06/ibm-5153-color-true-cga-palette/ https://int10h.org/blog/2022/06/ibm-5153-color-true-cga-pale....
  - jart 4y ago
    It is hard. Anyone can mix colors by hand in an ANSI art editor. However this demo is huge and certainly appears to be programmatically generated at times. It's very hard to program a computer to blend colors using CP-437 shade blocks, because you're not actually linearly interpolating two RGB values like you would normally in graphics programming. The blending happens in physical space, hence physics. Read the section about gradients in the link you provided. They say they tuned the gradients, but they didn't explain how they did it. For example, was it just spending countless hours eyeballing color combinations until it looked nice? Or did they use a formula like CIELAB ΔE* to predict how background / foreground / shade block combinations would be perceived? https://en.wikipedia.org/wiki/Color_difference#CIELAB_%CE%94E\\\\\\\\\\\\\ https://en.wikipedia.org/wiki/Color_difference#CIELAB_%CE%94...* Those formulas are much more complicated than the RGB((r2-r1)/2,(g2-g1)/2,(b2-b1)/2) blending that computers use in software (which just punts the problem to the chosen color space). Notice also how CIE needed to keep revising the formulas over the decades since color isn't something we entirely understand yet.
    - deleted 4y ago
      [deleted]
    - ajenner 4y ago
      The programmatic transitions between still images use linear RGB space, which is the correct way to interpolate between two colours. The maths behind it is pretty simple - essentially just reversing the gamma correction from normal (0-255) sRGB space before the interpolation and redoing it for the final colour (no need to get into the hairy areas of LAB or perceptual colour spaces for this). Once we know the colour we want, we choose the character (from a list of 6) and attribute which most closely matches that colour. Of course, it's all done using lots of lookup tables so that we can process several hundred character cells per frame.
      - jart 4y ago
        My point is that sRGB linear interpolation does not accurately model the blending of color that happens in nature, which is something that should happen with CP-437 shade blocks. Here's a web page I set up so you can see for yourself. https://justine.lol/color.html https://justine.lol/color.html Even within the context of sRGB itself, it's not "correct" at all. For example, yellow and blue should make pink. But sRGB predicts it as being grey. Depending on how good your monitor is, the shade blocks should make pink, but even that is usually thwarted somewhat by subpixel layout. For example, if you drag the window around on an LCD, the coloring of the shade blocks will change weirdly as subpixels move. Subpixel layout shouldn't be an issue with IBM-PC CRT monitors. I wish I had one to confirm what it does. But in general this is just one of the weaknesses of the sRGB colorspace. But if you use something like CIELAB then it does predict pink. But that space has weaknesses of its own. But those problems are nowhere near as challenging as shade blocks, because linear interpolation just chooses a new color and doesn't need to predict anything. To choose colors for shade blocks you're applying your model to predict a more natural phenomenon.
        ajenner 4y ago
        There's a difference between linear interpolation of sRGB values (what you're doing on your page) and linear interpolation of linear RGB values (which gives better results). This is the explanation that made it all fall into place for me: http://www.ericbrasseur.org/gamma.html?i=1 http://www.ericbrasseur.org/gamma.html?i=1 . The linear RGB colour space is also a linear transformation of the CIELAB space so doing the interpolation in this space is equivalent to transforming to CIELAB space, doing the interpolation there, and then transforming back. However, for the purposes of Area 5150 I think the differences between sRGB interpolation and linear RGB interpolation would have been too subtle to notice since there are only 6 * 16 * 16 = 1536 dithered colour/pattern combinations to choose from in the first place - the error introduced by that quantisation is likely larger than the sRGB vs. linear RGB difference. But I used linear RGB anyway, just to be correct about it.

by jart 4y ago

gonesilent 4y ago

or mathlab

Retr0id 4y ago

Why does blending colours require advanced physics?

viler 4y ago
It doesn't really - for this particular technique an ANSI-art editor should do (and was in fact used for almost all graphics in this demo, to one degree or another). :) I suppose there's a wee bit of physics if you want to fine-tune the results for a particular CRT monitor... not that we've really done much of that for the party-version, but there's some research on the original IBM 5153 CGA monitor at https://int10h.org/blog/2022/06/ibm-5153-color-true-cga-palette/ https://int10h.org/blog/2022/06/ibm-5153-color-true-cga-pale....
- jart 4y ago
  It is hard. Anyone can mix colors by hand in an ANSI art editor. However this demo is huge and certainly appears to be programmatically generated at times. It's very hard to program a computer to blend colors using CP-437 shade blocks, because you're not actually linearly interpolating two RGB values like you would normally in graphics programming. The blending happens in physical space, hence physics. Read the section about gradients in the link you provided. They say they tuned the gradients, but they didn't explain how they did it. For example, was it just spending countless hours eyeballing color combinations until it looked nice? Or did they use a formula like CIELAB ΔE* to predict how background / foreground / shade block combinations would be perceived? https://en.wikipedia.org/wiki/Color_difference#CIELAB_%CE%94E\\\\\\\\\\\\\ https://en.wikipedia.org/wiki/Color_difference#CIELAB_%CE%94...* Those formulas are much more complicated than the RGB((r2-r1)/2,(g2-g1)/2,(b2-b1)/2) blending that computers use in software (which just punts the problem to the chosen color space). Notice also how CIE needed to keep revising the formulas over the decades since color isn't something we entirely understand yet.
  - deleted 4y ago
    [deleted]
  - ajenner 4y ago
    The programmatic transitions between still images use linear RGB space, which is the correct way to interpolate between two colours. The maths behind it is pretty simple - essentially just reversing the gamma correction from normal (0-255) sRGB space before the interpolation and redoing it for the final colour (no need to get into the hairy areas of LAB or perceptual colour spaces for this). Once we know the colour we want, we choose the character (from a list of 6) and attribute which most closely matches that colour. Of course, it's all done using lots of lookup tables so that we can process several hundred character cells per frame.
    - jart 4y ago
      My point is that sRGB linear interpolation does not accurately model the blending of color that happens in nature, which is something that should happen with CP-437 shade blocks. Here's a web page I set up so you can see for yourself. https://justine.lol/color.html https://justine.lol/color.html Even within the context of sRGB itself, it's not "correct" at all. For example, yellow and blue should make pink. But sRGB predicts it as being grey. Depending on how good your monitor is, the shade blocks should make pink, but even that is usually thwarted somewhat by subpixel layout. For example, if you drag the window around on an LCD, the coloring of the shade blocks will change weirdly as subpixels move. Subpixel layout shouldn't be an issue with IBM-PC CRT monitors. I wish I had one to confirm what it does. But in general this is just one of the weaknesses of the sRGB colorspace. But if you use something like CIELAB then it does predict pink. But that space has weaknesses of its own. But those problems are nowhere near as challenging as shade blocks, because linear interpolation just chooses a new color and doesn't need to predict anything. To choose colors for shade blocks you're applying your model to predict a more natural phenomenon.
      - ajenner 4y ago
        There's a difference between linear interpolation of sRGB values (what you're doing on your page) and linear interpolation of linear RGB values (which gives better results). This is the explanation that made it all fall into place for me: http://www.ericbrasseur.org/gamma.html?i=1 http://www.ericbrasseur.org/gamma.html?i=1 . The linear RGB colour space is also a linear transformation of the CIELAB space so doing the interpolation in this space is equivalent to transforming to CIELAB space, doing the interpolation there, and then transforming back. However, for the purposes of Area 5150 I think the differences between sRGB interpolation and linear RGB interpolation would have been too subtle to notice since there are only 6 * 16 * 16 = 1536 dithered colour/pattern combinations to choose from in the first place - the error introduced by that quantisation is likely larger than the sRGB vs. linear RGB difference. But I used linear RGB anyway, just to be correct about it.