Use exact color palette from mspaint

1j01 commented 4 years ago

Somehow extract palette from mspaint. In Windows 95, there's Options > Save Colors, that could be used to get a .pal file. JS Paint can read .pal files. Or save a .bmp from mspaint and extract the colors from that. Or pick colors from the screen with mspaint running, and not via a VM that might change the colors.
A document made in mspaint should be able to be opened in jspaint and the fill tool should work intuitively.
Simply changing the palette now would make old documents incompatible fill-tool-wise, but we could write code to detect the old palette and convert.

1j01 commented 4 years ago

Here's an example image. If you fill the blue and red rectangles with black, you can see the border revealed. The border color was sampled from the mspaint screenshot (right) and the fill from jspaint (left).

1j01 commented 4 years ago

This may be the exact colors from mspaint, or may not:

https://github.com/reactos/reactos/blob/893a3c9d030fd8b078cbd747eeefd3f6ce57e560/base/applications/mspaint/palettemodel.cpp#L35-L40

It should be easier to check if they're correct than to try to extract them, so this could be helpful.

1j01 commented 4 years ago

Windows Source Code

https://github.com/kouzhudong/nt4/blob/2154bff9bc2e70ec48c15fbf160ce173fce78b35/windows_nt_4_source_code/windows_nt_4_source_code_IK/nt4/private/windows/shell/accesory/mspaint/colorsrc.cpp#L39-L107

YES! I found the source code to mspaint, online! (from Windows NT 4.0, which is probably close enough for most things.) This will be super helpful.

Color Palette

(spacing of color components contrived for display on GitHub):

rgb( 0 , 0 , 0 ) Black rgb(128,128,128) Dark Gray rgb(128, 0 , 0 ) Dark Red rgb(128,128, 0 ) Pea Green rgb( 0 ,128, 0 ) Dark Green rgb( 0 ,128,128) Slate rgb( 0 , 0 ,128) Dark Blue rgb(128, 0 ,128) Lavender rgb(128,128, 64) rgb( 0 , 64, 64) rgb( 0 ,128,255) rgb( 0 , 64,128) rgb( 64, 0 ,255) rgb(128, 64, 0 )

rgb(255,255,255) White rgb(192,192,192) Light Gray rgb(255, 0 , 0 ) Bright Red rgb(255,255, 0 ) Yellow rgb( 0 ,255, 0 ) Bright Green rgb( 0 ,255,255) Cyan rgb( 0 , 0 ,255) Bright Blue rgb(255, 0 ,255) Magenta rgb(255,255,128) rgb( 0 ,255,128) rgb(128,255,255) rgb(128,128,255) rgb(255, 0 ,128) rgb(255,128, 64)

JavaScript conversion of the C code:

const colorColorsDef = [
    "rgb(0,0,0)", // Black
    "rgb(128,128,128)", // Dark Gray
    "rgb(128,0,0)", // Dark Red
    "rgb(128,128,0)", // Pea Green
    "rgb(0,128,0)", // Dark Green
    "rgb(0,128,128)", // Slate
    "rgb(0,0,128)", // Dark Blue
    "rgb(128,0,128)", // Lavender
    "rgb(128,128,64)", //
    "rgb(0,64,64)", //
    "rgb(0,128,255)", //
    "rgb(0,64,128)", //
    "rgb(64,0,255)", //
    "rgb(128,64,0)", //

    "rgb(255,255,255)", // White
    "rgb(192,192,192)", // Light Gray
    "rgb(255,0,0)", // Bright Red
    "rgb(255,255,0)", // Yellow
    "rgb(0,255,0)", // Bright Green
    "rgb(0,255,255)", // Cyan
    "rgb(0,0,255)", // Bright Blue
    "rgb(255,0,255)", // Magenta
    "rgb(255,255,128)", //
    "rgb(0,255,128)", //
    "rgb(128,255,255)", //
    "rgb(128,128,255)", //
    "rgb(255,0,128)", //
    "rgb(255,128,64)", //
];

const bwColorsDef = [
    "rgb(0,0,0)",
    "rgb(9,9,9)",
    "rgb(18,18,18)",
    "rgb(27,27,27)",
    "rgb(37,37,37)",
    "rgb(46,46,46)",
    "rgb(55,55,55)",
    "rgb(63,63,63)",
    "rgb(73,73,73)",
    "rgb(82,82,82)",
    "rgb(92,92,92)",
    "rgb(101,101,101)",
    "rgb(110,110,110)",
    "rgb(119,119,119)",

    "rgb(255,255,255)",
    "rgb(250,250,250)",
    "rgb(242,242,242)",
    "rgb(212,212,212)",
    "rgb(201,201,201)",
    "rgb(191,191,191)",
    "rgb(182,182,182)",
    "rgb(159,159,159)",
    "rgb(128,128,128)",
    "rgb(173,173,173)",
    "rgb(164,164,164)",
    "rgb(155,155,155)",
    "rgb(146,146,146)",
    "rgb(137,137,137)",
];

The monochrome palette has a mapping between these grayscale values and patterns of black and white pixels. I currently treat the monochrome palette as a palette of patterns directly.

1j01 commented 3 years ago

I decided against automatically upgrading the color palette of images when opening them. It was too slow, and I don't like the idea of it silently changing things, or using heuristics to decide whether to perform the upgrade. I introduced a slight threshold in the fill tool to fix https://github.com/1j01/jspaint/issues/184 and I might be able to increase it to handle the palette inconsistencies with old documents created in JS Paint vs JS Paint's new, correct palette. I'm not sure how different the colors are between the palettes. I don't want to increase it to the point that two visually distinct patches of color are filled as one.

1j01 / jspaint