XP - Change Fog Color Tone with Javascript?

Started by Heretic86, March 07, 2022, 02:33:03 am

Previous topic - Next topic

Heretic86

In the XP Editor in Change Fog Color Tone, its obvious to me that it uses an RGBA value.

If I wanted to simulate the effect in CSS / Javascript using a filter, what would I need need to do to use to achieve the same effects on regular images or a Canvas image?

*cough cough* Blizz?
Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)

KK20

Tone != Color

Tone has Gray instead of Alpha. The idea is you're changing the graphic's luminance. It's easier to think about changing a graphic to grayscale--how do you determine what shade of gray a colored pixel should have?

When I was working on an editor myself, I ended up writing a DLL to do this calculation.
Code: c++
/*
The four parameters tone_r, tone_g, tone_b, and tone_gray represent the integer values entered into "Change Fog Color Tone".
pixels is just a pointer to the graphic itself
length is how many pixels the graphic has (i.e. width * height)
*/

void DLL_EXPORT ToneCalc(long * pixels, long length, int tone_r, int tone_g, int tone_b, int tone_gray)
{
    // Iterate through every single pixel in the graphic
    for (int i = 0; i < length; ++i)
    {
        long pixel = pixels[i];
        // Break up the hex color code to individual variables between 0-255
        int alpha = (pixel & 0xFF000000) >> 24;
        int red = (pixel & 0xFF0000) >> 16;
        int green = (pixel & 0xFF00) >> 8;
        int blue = (pixel & 0xFF);

        // The algorithm...
        int gray = (red * 299 + green * 587 + blue * 114) / 1000;
        int factor = (255 - tone_gray) * 1000 / 255;
        red = std::max(std::min((red - gray) * factor / 1000 + gray + tone_r, 255), 0);
        green = std::max(std::min((green - gray) * factor / 1000 + gray + tone_g, 255), 0);
        blue = std::max(std::min((blue - gray) * factor / 1000 + gray + tone_b, 255), 0);

        // Replace the pixel color
        pixels[i] = blue + (green << 8) + (red << 16) + (alpha << 24);
    }
}
I can't remember how I eventually came up with this algorithm, want to say some Stackoverflow answer.

Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Heretic86

March 07, 2022, 04:21:05 pm #2 Last Edit: March 13, 2022, 12:56:38 am by Heretic86 Reason: Edited with solution to my question
Thanks!

I was figuring this would be more complicated than one of the existing CSS image filters.  The results almost look like an HSL value as the S for Saturation might be applicable?  I wasnt really planning on doing this on a pixel by pixel redraw, rather apply to the whole image.

Do you think an HSL filter might be better?  If anything I would rather have MORE functionality rather than less...

---

Edit: Got it, problem solved.

So yes, it IS possible to use an SVG with a Raster Image, apply an SVG filter (such as feColorMatrix), then draw that filtered image to an HTML5 Canvas element.

NOTE: I suck at SVG.

For anyone else that ends up here, the trick is to create a new Image, set an Event Listener for onload on the new Image() to handle drawing to your canvas, then set the matrix values on the feMatrix element, then set the image source  (img.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML).replace(/\=+$/, ''); ) to a base64 encoded string of your full SVG element (svg.outerHTML).

It appears to me so far that the onload event listener is needed as even though the data src may be base64 encoded, it appears to be considered as "not fully loaded" until the render with filters is complete.

It may also be necessary to wrap ctx.clearRect and ctx.drawImage in a setTimeout call.  In my situation, I did not need it.

Spoiler: ShowHide

INLINE SVG HTML (contains a base64 data source for a Color Chip)
            <svg id="colorChipSVG" width="73" height="118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <filter id="colormatrix" x="0" y="0" width="1" height="1">
                <feColorMatrix id="feMatrix" type="matrix" values="1 0 0 0 0  0 1 0 0 0   0 0 1 0 0   0 0 0 1 0" />
                <feColorMatrix id="fs" type="saturate" values="1"/>
              </filter>
              <image id="svgImg" width="73" height="118" filter="url(#colormatrix)" xlink:href="data:image/png;base64,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" />
            </svg>

Javascript
    function drawColorChip(){
      let tempImg = new Image();
     
      tempImg.onload = function(){
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.drawImage(tempImg, 0, 0, 73, 118);
      };
     
      tempImg.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML).replace(/\=+$/, '');
    }
Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)

KK20

That is exactly what it is; it's actually the YIQ format as Google points out.

I don't really know what constitutes as an "HSL filter". If that's just another way of saying a pixel shader, then sure use one (though I'm doubtful one exists). That is basically what the code I shared is after all.

Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Heretic86

March 09, 2022, 02:56:48 pm #4 Last Edit: March 09, 2022, 03:03:10 pm by Heretic86
Well, I am half way there, without a dll, or going pixel by pixel.

Possible solution is SVG.  SVG can be drawn to a canvas!

What I did was to use a feColorMatrix filter to the SVG.

I am having some trouble loading the image source graphic into Blob.  I can load the SVG by itself with the external image just fine and the effects appear to be the same as Color Tone in XP.  When I try to make a Blob out of the SVG, it doesnt use the Image Source Data.

Any suggestions to convert the SVG to an Image so I can draw that Image to the canvas?

Spoiler: ShowHide

          <svg xmlns="http://www.w3.org/2000/svg" id="changeMapFogToneSVG" class="changeMapFogTone">
            <filter id="svgCssFilter">
              <feColorMatrix id="svgMatrix" type="matrix"
                values="1 0 0 0 1
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 1 0">
              </feColorMatrix>
            </filter>
            <img id="svgImg" class="changeMapFogToneSvgFilter" src="data:image/png;base64,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" />
          </svg>

      img = new Image();
      let domurl = window.URL || window.webkitURL || window;
      let svgTemp = new Blob([svg], {type: 'image/svg+xml'});
      let url = domurl.createObjectURL(svgTemp);
      img.src = url;

Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)