Color mode

[svenhb]

Your tool is so cool!!!
I made a color version but didn't test the result with my plotter up to now - https://grbl-plotter.de/plotterfun-color
Also drag & drop of an images on to the canvas is possible
To do: I can't change the order of the colors (the lightest color first would be nice), output scaled to given mm (somehow a factor of 3.78 is applied...)

[mitxela]

Very nice! Sorry I didn't comment earlier.

When I tried my CMYK plot, I did it by processing four separate images, which I generated in Krita, so this is certainly a lot easier.

[Triod-project]

Your tool is so cool!!!
I made a color version but didn't test the result with my plotter up to now - https://grbl-plotter.de/plotterfun-color
Also drag & drop of an images on to the canvas is possible
To do: I can't change the order of the colors (the lightest color first would be nice), output scaled to given mm (somehow a factor of 3.78 is applied...)

Hi svenhb,
Have you share your code?

[svenhb]

Just rigth-click on the open site and save the code... https://grbl-plotter.de/plotterfun-color/

[asutay38]

Does this site have a program?
For example (Drawing Bot V3)

[asutay38]

Or does this site allow you to save individual CMYK colors?

[svenhb]

The program is HTML and JavaScript, just open the site and check the source code (right click in browser window).
Inside the saved SVG, the color, are separated - just open in a text-editor.
If you need something else than RGB or CMY color model:
In line 359 the colors will be separated from the image. RGB is easy because pixel-date is stored in RGB, for CMY calculations are needed to separate cyan, magenta and yellow:

< function applyFilter (channel, context) { // https://wiki.selfhtml.org/wiki/JavaScript/Canvas/Pixel_Manipulation
var data, mod, x, y, offset;
var r,g,b,k,c,m,yl;
mod = context.createImageData(cw, ch);

    for (x = 0; x < cw; x++) {
        for (y = 0; y < ch; y++) {
            offset = (cw * y + x) * 4;
                        
            if ((channel < 0) || (channel > 3)) {
                mod.data[offset]     = imgData.data[offset];
                mod.data[offset + 1] = imgData.data[offset + 1];
                mod.data[offset + 2] = imgData.data[offset + 2];
                mod.data[offset + 3] = imgData.data[offset + 3];
            }
            else {
                if (modeRGB) {
                    if (channel > 2) channel = 2;
                    mod.data[offset] = mod.data[offset + 1] = mod.data[offset + 2] = 255 - imgData.data[offset + channel];
                } else {
                    r = imgData.data[offset] / 255;     // https://stackdev.io/question/1077/convert-rgb-to-cmyk
                    g = imgData.data[offset + 1] / 255;
                    b = imgData.data[offset + 2] / 255;
                    k = Math.min(1 - r, Math.min(1 - g, 1 - b));
                    if (k == 1) {
                        c = m = yl = 0;
                    } else {
                        c = (1 - r - k) / (1 - k);
                        m = (1 - g - k) / (1 - k);
                        yl = (1 - b - k) / (1 - k);
                    }
                    
                    if (channel == 3) {
                        mod.data[offset] = mod.data[offset + 1] = mod.data[offset + 2] = 255 - byteRange(k * 255);                           
                    } else {                        
                        mod.data[offset] = byteRange(c * 255);
                        mod.data[offset + 1] = byteRange(m * 255);
                        mod.data[offset + 2] = byteRange(yl * 255);
                        
                        mod.data[offset] = mod.data[offset + 1] = mod.data[offset + 2] = 255 - mod.data[offset + channel];
                    }
                }
                mod.data[offset + 3] = 255;
            }
        }
    }
    context.putImageData(mod, 0, 0);
}    

[mariana-s-fernandes]

HI @svenhb, I have been using your color version, works really well! Do you have the code in a repo?

[svenhb]

I made a repo here: https://github.com/svenhb/plotterfun-color
I hope it is ok for mitxela

[witchole]

Hi @svenhb, that's a nice enhancement!

Just a few comments:

(1) In CMY-only mode, the image is missing the black channel.

I think you can fix that by changing this line:

k = Math.min(1 - r, Math.min(1 - g, 1 - b))

to:

if (modeK) k = Math.min(1 - r, Math.min(1 - g, 1 - b)) else k = 0;

(2) RGB mode would look better on a black background as it's an additive colour system, so should start without light.

(3) Why not add a "Monochrome" option, so this could be integrated back into @mitxela's repository?