Feature request/proposal: converting brightness to opacity

[SuzuSuzu-HaruHaru]

Hello! First of all, I want to congratulate you on the great job behind this repository: but even before that I should point out that I am a novice and a total beginner, so I apologize in advance if I am being impolite as I am still learning the proper etiquette here on GitHub.

As a person who also likes to draw (and, in fact, I have spent a lot more time drawing on programs such as Photoshop or Clip Studio Paint than coding, although I like programming just as much), there is a feature that I typically appreciate a lot in programs that let you draw with layers: it is the ability to convert brightness to opacity, which is especially useful when you are working on a white background (because it's easier on the eyes), but then you want to set the white background to transparency and keep only the black lineart so you can paste it above another layer; and it can be useful in other circumstances too, like if you accidentally start drawing on a white layer while instead you thought that you were somewhere else, and now you want to get rid of the white background.

Now, I have thought of a little solution to implement this feature; but—as I said—I am still learning the proper etiquette and thus I asked some friends of mine who are more experienced than me, and they suggested that I should open an issue to discuss the idea first. Therefore, here I am!

You can see my solution at the forked version that I have on my account within the brightnessToOpacity branch, where I basically implemented something like this in js/engine/CPColorBmp.js:

CPColorBmp.prototype.brightnessToOpacity = function(rect) {
    rect = this.getBounds().clipTo(rect);

    var
        yStride = (this.width - rect.getWidth()) * CPColorBmp.BYTES_PER_PIXEL,

        pixIndex = this.offsetOfPixel(rect.left, rect.top);

    for (var y = rect.top; y < rect.bottom; y++, pixIndex += yStride) {
        for (var x = rect.left; x < rect.right; x++, pixIndex += CPColorBmp.BYTES_PER_PIXEL) {
            this.data[pixIndex + CPColorBmp.ALPHA_BYTE_OFFSET] = ((this.data[pixIndex + CPColorBmp.RED_BYTE_OFFSET] +
                this.data[pixIndex + CPColorBmp.GREEN_BYTE_OFFSET] +
                this.data[pixIndex + CPColorBmp.BLUE_BYTE_OFFSET]) / 3) ^ 0xFF;
        }
    }
};

and likewise in js/engine/CPGreyBmp.js, amid the other changes needed to make it work (in CPMainMenu.js, ChickenPaint.js and CPArtwork.js).

Considering a color to be bright when it is closer to white and less bright when it is closer to black, the idea is to sum the three color values (red, green and blue) and divide the result by three to get the total brightness of the pixel; we then invert it, and assign this value to the alpha channel. So, for example, white (which is the brightest color of them all) will become completely transparent, whereas black will remain fully visible; and the colors in-between will become only partially transparent, thus preserving the fading effect at the edges of the stroke.

Of course, this is merely a suggestion. This could probably be implemented in many other ways, and you definitely know the code much better than me. I tentatively implemented it as a new option in the Effects dropdown menu, but again, that could be moved—or even removed entirely if this is a feature that you do not like, or that you are not interested in. For the time being I also added a Japanese translation in js/languages/ja.json which I took from the name that this option has in the Japanese version of Clip Studio Paint, so I hope that it is grammatically correct.

Well, this was it! As I said I am still a novice, so I am not doing a pull request because I am still very insecure and shy. But I tested it locally, and it seems to work on my machine! I hope that you like it and, in any case, congratulations for maintaining this project!

[satopian]

Thank you.
I actually tried using it, but as it was, the lines of the line art with the opacity of the pen pressure became too thin and it didn't work well.
So I tried to improve it, but I ran into a problem where the ends of the lines remained white.
I spent half a day somehow fixing the code, but it doesn't work the same way when I run it in Clip Studio Paint.
It's difficult.
I'll merge it and continue researching.

[satopian]

@SuzuSuzu-HaruHaru
By improving the method of calculating opacity, I was able to achieve a "convert luminance to transparency" process similar to that of Clip Studio Paint.
I couldn't have achieved this without you creating the prototype.
Thank you.
The problem of gray-tone line art becoming too transparent has been solved.
I also solved the problem of white edges remaining around the line art when trying to avoid that.
However, colored line art will be converted to monochrome.
However, the same thing happens with Clip Studio Paint's "convert luminance to transparency" function, so this is probably the correct answer.

[SuzuSuzu-HaruHaru]

Hello! Sorry for the delay, Sunday was in the middle (and I did not even realize it at first, maybe I should look at the calendar more often...) and thus I was somewhere else.

For a second there my heart skipped a beat when reading these comments, fearing that I had caused some problems; especially when you wrote that you spent half a day trying to fix it, which I hope did not steal time away from you. But I am happy to know that, in the end, you were able to solve it and to replicate the exact way it works on Clip Studio Paint, and that my code was thus even just a little bit useful.

You are very good at coding while I am merely a beginner, so I will definitely take a look at the improved version to see how you changed it—and I will learn from it! In any case, thank you so much for the feedback!