5 ms·

Just before Christmas I got an urge to add a dither filter to my JS canvas library. The past few weeks have certainly been a very intense adventure through a ve

Just before Christmas I got an urge to add a dither filter to my JS canvas library. The past few weeks have certainly been a very intense adventure through a very deep rabbit hole involving color spaces, color distances and discovering how to generate a best-fit reduced palette of colors and then dither it (hello, blue noise!) I finally managed to complete the work last week and I'm quite happy with the results. Using the library people can set the colors of graphical objects or gradients using any CSS color space string (RGB, HSL, HWB, LAB, LCH) and the color should render as expected. The reduce-noise filter uses LAB internally to calculate color distances, but in the end I compromised and used euler distances for the algorithm rather than one of the more modern algorithms. Work is still on a branch in the library[1] but I'm hoping to merge it into the main code in the next week or so (after testing across devices/screens/etc). Aside: Safari has gone ahead and introduced support for HWB, LAB and LCH color strings in CSS. Sadly, they're not recognised by Safari's canvas engine (yet). Also, their HSL and HWB gradients seem to be the same as the RGB gradients; their LAB/LCH gradients seem to dodge the dreaded Gray Zone. [1] - https://github.com/KaliedaRik/Scrawl-canvas/tree/dec-21-dither-filter https://github.com/KaliedaRik/Scrawl-canvas/tree/dec-21-dith...

zamadatix 5y ago
Firefox just released version 96 today and it comes with HWB() as well.
rikroots 5y ago
Following up on my comment (for posterity). I've now released the new code to my library. Includes a demo of using the full range of CSS color strings to set color in the canvas[1], and also a demo of my reducePalette (with dithering) filter[2] - I've no idea if the filter's output is 'Good Enough' for Image Engineering work, but I'm happy with the results. [1] - https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html [2] - https://scrawl-v8.rikweb.org.uk/demo/filters-027.html https://scrawl-v8.rikweb.org.uk/demo/filters-027.html
pippy 5y ago
I highly recommend reading Human color vision / Peter K. Kaiser and Robert M. Boynton. It's a great read if you've gone down the color vision rabbit hole as it has nearly every single topic in regards to human color perception. The biggest surprise for me was that there's still a bit of debate about how exactly neurons in the eye are wired together to produce the color signals that go to the brain.
- SpectralName 5y ago
  I read an amazing article once that described the representations of color at different processing levels in the human brain. For example, the 3 types of rods in the retina sense R/B/Y intensity, but at some point it is transformed into a different 3d representation with a R-G axis, a B-Y axis, and a greyscale intensity axis. There was some implication that this is information-theoretically optimal in some sense for representing images sampled from the natural world. Anyone know what I'm talking about? The book you mention seems to cover similar ground: http://www.yorku.ca/eye/toc.htm http://www.yorku.ca/eye/toc.htm
  - pippy 5y ago
    It seems the article you're talking about is the opponent color process, which here's some great articles about it: https://www.handprint.com/HP/WCL/color2.html https://www.handprint.com/HP/WCL/color2.html https://blog.asmartbear.com/color-wheels.html https://blog.asmartbear.com/color-wheels.html I had some fun modeling the color space in 3d on codepen: https://codepen.io/torleifw/pen/jOwjPxp https://codepen.io/torleifw/pen/jOwjPxp (or a more boring slider option here: https://codepen.io/torleifw/pen/OJgdyPJ https://codepen.io/torleifw/pen/OJgdyPJ) One of latest papers I've read recommended using a matrix to transform color spaces, which i've also done a codepen for. Interestingly the opponent process mirrors the LAB color space, which is soon going to be available in Safari. This is pretty cool and can enable developers to color coordinate easier. I'm going to give the webpage you linked a good read, looks very interesting.
    - SpectralName 5y ago
      It was your first link, thank you! What a great site.
aloer 5y ago
How did you implement hit testing for events? Does it draw on a second canvas with color hashing like konva js?
- rikroots 5y ago
  I use a combination of Path2D and ctx.isPointInPath() - code here[1], line 1502 onwards [1] https://github.com/KaliedaRik/Scrawl-canvas/blob/master/source/mixin/position.js https://github.com/KaliedaRik/Scrawl-canvas/blob/master/sour...
tda 5y ago
I am very interested in the "best-fit reduced palette of colors" approach, but then to create mosaics. Say you have lots tiles/beads/bricks/marbles whatever in a handful of colors (and not covering the entire color space, but say three shades of blue, brown and bright pink) how can you represent a full color image as accurately as possible using only that very limited palette (and in a fairly limited resolution, as placing 10k tiles is not fun). I have had some success manually using Photoshop to generate a reduced color space image to only 5 distinct colors (probably optimally chosen by the algorithm) and then remapping those 5 colors to 5 the 5 colors I actually have. There must be better ways
- rikroots 5y ago
  The approach I finally settled on was: check each pixel in the image to build up a list of (RGB) most popular colors and to memoize new colors into LAB values; sort the color data into commonest first; then build up the required palette from commonest downwards, excluding colors that were too close to each other based on a distance measure. Then you can go back to the original image and measure its color against the palette colors, from which you can determine the 3 palette colors closest to it. From that you can give each pixel a propensity range of the likelihood of it taking on one of those 3 colors and run it against a randomly generated value, or a set of preset values for blue noise.
- capitainenemo 5y ago
  https://github.com/gvlsq/palettize https://github.com/gvlsq/palettize how about this approach?
  - capitainenemo 5y ago
    (er, for the initial palette generation, that is)

zamadatix 5y ago

Firefox just released version 96 today and it comes with HWB() as well.

rikroots 5y ago

Following up on my comment (for posterity). I've now released the new code to my library. Includes a demo of using the full range of CSS color strings to set color in the canvas[1], and also a demo of my reducePalette (with dithering) filter[2] - I've no idea if the filter's output is 'Good Enough' for Image Engineering work, but I'm happy with the results. [1] - https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html [2] - https://scrawl-v8.rikweb.org.uk/demo/filters-027.html https://scrawl-v8.rikweb.org.uk/demo/filters-027.html

pippy 5y ago

I highly recommend reading Human color vision / Peter K. Kaiser and Robert M. Boynton. It's a great read if you've gone down the color vision rabbit hole as it has nearly every single topic in regards to human color perception. The biggest surprise for me was that there's still a bit of debate about how exactly neurons in the eye are wired together to produce the color signals that go to the brain.

SpectralName 5y ago
I read an amazing article once that described the representations of color at different processing levels in the human brain. For example, the 3 types of rods in the retina sense R/B/Y intensity, but at some point it is transformed into a different 3d representation with a R-G axis, a B-Y axis, and a greyscale intensity axis. There was some implication that this is information-theoretically optimal in some sense for representing images sampled from the natural world. Anyone know what I'm talking about? The book you mention seems to cover similar ground: http://www.yorku.ca/eye/toc.htm http://www.yorku.ca/eye/toc.htm
- pippy 5y ago
  It seems the article you're talking about is the opponent color process, which here's some great articles about it: https://www.handprint.com/HP/WCL/color2.html https://www.handprint.com/HP/WCL/color2.html https://blog.asmartbear.com/color-wheels.html https://blog.asmartbear.com/color-wheels.html I had some fun modeling the color space in 3d on codepen: https://codepen.io/torleifw/pen/jOwjPxp https://codepen.io/torleifw/pen/jOwjPxp (or a more boring slider option here: https://codepen.io/torleifw/pen/OJgdyPJ https://codepen.io/torleifw/pen/OJgdyPJ) One of latest papers I've read recommended using a matrix to transform color spaces, which i've also done a codepen for. Interestingly the opponent process mirrors the LAB color space, which is soon going to be available in Safari. This is pretty cool and can enable developers to color coordinate easier. I'm going to give the webpage you linked a good read, looks very interesting.
  - SpectralName 5y ago
    It was your first link, thank you! What a great site.

aloer 5y ago

How did you implement hit testing for events? Does it draw on a second canvas with color hashing like konva js?

rikroots 5y ago
I use a combination of Path2D and ctx.isPointInPath() - code here[1], line 1502 onwards [1] https://github.com/KaliedaRik/Scrawl-canvas/blob/master/source/mixin/position.js https://github.com/KaliedaRik/Scrawl-canvas/blob/master/sour...

tda 5y ago

I am very interested in the "best-fit reduced palette of colors" approach, but then to create mosaics. Say you have lots tiles/beads/bricks/marbles whatever in a handful of colors (and not covering the entire color space, but say three shades of blue, brown and bright pink) how can you represent a full color image as accurately as possible using only that very limited palette (and in a fairly limited resolution, as placing 10k tiles is not fun). I have had some success manually using Photoshop to generate a reduced color space image to only 5 distinct colors (probably optimally chosen by the algorithm) and then remapping those 5 colors to 5 the 5 colors I actually have. There must be better ways

rikroots 5y ago
The approach I finally settled on was: check each pixel in the image to build up a list of (RGB) most popular colors and to memoize new colors into LAB values; sort the color data into commonest first; then build up the required palette from commonest downwards, excluding colors that were too close to each other based on a distance measure. Then you can go back to the original image and measure its color against the palette colors, from which you can determine the 3 palette colors closest to it. From that you can give each pixel a propensity range of the likelihood of it taking on one of those 3 colors and run it against a randomly generated value, or a set of preset values for blue noise.
capitainenemo 5y ago
https://github.com/gvlsq/palettize https://github.com/gvlsq/palettize how about this approach?
- capitainenemo 5y ago
  (er, for the initial palette generation, that is)