Create a new version of paste:

Hello, this will be a simple single page HTML/Javascript image processing application.

The general purpose is to apply dithering to a provided image, but with the addition of a mask that allows the user to select the different dithering algorithms and color counts for different regions of the image.

So the first bit we need is a way to provide an input image, and to display it, and there should be a canvas on top of that which is transparent by default, this is where the user will draw the mask.

For the first version, let's not worry about viewport dimensions and simply make that mask canvas and image preview as big as the input image is in pixels.

To the left of this there is a vertical list for the various sets of dithering parameters the user can create. By default there is always one parameter set, with some default parameters, (e.g. "16 grayscale colors, dithered with floyd-steinberg", but the exact default doesn't matter). Each parameter set has just two options: number of colors, and algorith to use. The application automatically assigns each a unique color, except the first one, which always the one that gets used where the mask is still transparent.

Clicking on a parameter set should also mark it as the currently selected one, for the purpose of drawing the mask. That is, when the user moves the mouse over the mask canvas, there should be preview of a blob with the color of that parameter set, and left click should draw.

To start with, let's just have two brush types, filled circle and filled square. So there needs to be a selector for the shape, and a slider for the size, ranging from 1 pixel to 100. Put the controls for that above the preview/mask area.

One important aspect is that we need to set pixels "manually" on the canvas, just to be sure there is no blending, anti-aliasing, sub-pixel accuracy or any of that. Each pixel of the mask needs to be transparent, or match the color of one of the parameter sets exactly.

Each parameter set that is listed on the left should also have an "x" button to delete it, and that should cause the mask to revert all pixels that belonged to that parameter set to transparent.

"Under the hood" we can use a brute force approach: for each parameter set, dither the whole image, and then for the final image, use the pixels from the correct dithered result image, depending on the mask color. The user should be able to see the result below the input image as they change dithering parameters or draw on the mask, and to make this not block UI too badly, we should use web workers I think.

So whenever data changes, the web worker gets a copy of it, so that on any given change, we only have to transmit what changed this time. This includes input image, dithering parameter sets and their parameters, and the mask pixels. Then the web worker does the dithering and composing of the final result, and transmits that back to the main application whenever it's finished.

While the web worker is processing, it still accepts messages to that updates data (input image, parameters, mask), but it doesn't kick off another round of processing while it is still busy with processing the old, now slightly outdated data. We can use a "dirty" flag to make sure once it's done processing, if there were any data changes in the meantime, we process the current final result even before the user makes another input.

Does that seem reasonably clear/straightforward? Feel free to ask questions for clarification before you get to work.