dithSerp palette issue
See original GitHub issueIf dithSerp
is set to true
it seems to introduce colors that are not in the palette for small palettes, repro:
const createCanvas = require('canvas');
const canvas = createCanvas(204, 204);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '30px Impact';
ctx.rotate(0.1);
ctx.fillStyle = 'black';
ctx.fillText('Awesome!', 50, 100);
// quantitize
const RgbQuant = require('rgbquant');
const q = new RgbQuant({colors: 16, dithKern: 'FloydSteinberg', dithSerp: true});
q.sample(canvas);
const pal = q.palette(true);
const out = q.reduce(canvas);
The palette now contains:
[ [ 0, 0, 0 ],
[ 17, 17, 17 ],
[ 27, 27, 27 ],
[ 38, 38, 38 ],
[ 54, 54, 54 ],
[ 75, 75, 75 ],
[ 86, 86, 86 ],
[ 103, 103, 103 ],
[ 126, 126, 126 ],
[ 137, 137, 137 ],
[ 154, 154, 154 ],
[ 169, 169, 169 ],
[ 194, 194, 194 ],
[ 218, 218, 218 ],
[ 231, 231, 231 ],
[ 255, 255, 255 ] ]
the colors of out
are (unordered):
[ [ 255, 255, 255, 255 ],
[ 231, 231, 231, 255 ],
[ 0, 0, 0, 255 ],
[ 17, 17, 17, 255 ],
[ 38, 38, 38, 255 ],
[ 54, 54, 54, 255 ],
[ 86, 86, 86, 255 ],
[ 103, 103, 103, 255 ],
[ 137, 137, 137, 255 ],
[ 169, 169, 169, 255 ],
[ 194, 194, 194, 255 ],
[ 126, 126, 126, 255 ],
[ 218, 218, 218, 255 ],
[ 75, 75, 75, 255 ],
[ 154, 154, 154, 255 ],
[ 27, 27, 27, 255 ],
[ 253, 253, 253, 255 ] ]
The last entry is not in the palette. If you add more colors or gradients to the original image, more spurious colors will pop up. Is this a missing/misplaced nearest color matching in reduce
?
Issue Analytics
- State:
- Created 4 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
rgbquant - npm
The symptom of these issues is a lack of important color groups in the final palette which results in poorly reduced images. Frequently,...
Read more >RgbQuant.js: Color Quantization Lib - Morioh
The symptom of these issues is a lack of important color groups in the final palette which results in poorly reduced images.
Read more >Known Palette 3 Issues and Available Troubleshooting
This article details problems we have seen a few users have with Palette 3 and troubleshooting that is currently available.
Read more >HTML - CodePen
... converted frame indexed to palette\\n var colorDepth; // number of bit planes\\n var ... dithSerp = opts. ... dithKern;\\n dithSerp = typeof...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
it does feel like serpentine may not provide the best “improvement” since it’s pretty directional. you may want to look into Riemersma Dither, particularly one that follows a Hilbert space-filling curve. this might give you less directional dithering.
https://www.compuphase.com/riemer.htm https://www.compuphase.com/hilbert.htm
i think igor implemented this in his RgbQuant offshoot: https://github.com/ibezkrovnyi/image-quantization
also, here is way too much additional dithering info: https://bisqwit.iki.fi/story/howto/dither/jy/
Yep, I’m aware of those methods and plan on implementing them later. I just also wanted to have serpentine available.