CodeLab - First Steps (Saturation RGB)

[ReMake]

Possibly you repeatedly applied Paint.NET effect Hue / Saturation.
Probably you asked a question: whether it is possible to adjust a color saturation separately in each color channel? Yes, it's possible.

Let's begin to create this simple effect in CodeLab.

Start CodeLab: Effects-> Advanced-> CodeLab. CodeLab dialog box with the script by default will be presented to you:

// Name:
// Submenu:
// Author:
// Title:
// Version:
// Desc:
// Keywords:
// URL:
// Help:
#region UICode
IntSliderControl Amount1 = 0; // [0,100] Slider 1 Description
IntSliderControl Amount2 = 0; // [0,100] Slider 2 Description
IntSliderControl Amount3 = 0; // [0,100] Slider 3 Description
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
    // Delete any of these lines you don't need
    Rectangle selection = EnvironmentParameters.GetSelection(src.Bounds).GetBoundsInt();
    int CenterX = ((selection.Right - selection.Left) / 2) + selection.Left;
    int CenterY = ((selection.Bottom - selection.Top) / 2) + selection.Top;
    ColorBgra PrimaryColor = EnvironmentParameters.PrimaryColor;
    ColorBgra SecondaryColor = EnvironmentParameters.SecondaryColor;
    int BrushWidth = (int)EnvironmentParameters.BrushWidth;

    ColorBgra CurrentPixel;
    for (int y = rect.Top; y < rect.Bottom; y++)
    {
        if (IsCancelRequested) return;
        for (int x = rect.Left; x < rect.Right; x++)
        {
            CurrentPixel = src[x,y];
            // TODO: Add pixel processing code here
            // Access RGBA values this way, for example:
            // CurrentPixel.R = PrimaryColor.R;
            // CurrentPixel.G = PrimaryColor.G;
            // CurrentPixel.B = PrimaryColor.B;
            // CurrentPixel.A = PrimaryColor.A;
            dst[x,y] = CurrentPixel;
        }
    }
}

Delete next lines:

// Delete any of these lines you don't need
Rectangle selection = EnvironmentParameters.GetSelection(src.Bounds).GetBoundsInt();
int CenterX = ((selection.Right - selection.Left) / 2) + selection.Left;
int CenterY = ((selection.Bottom - selection.Top) / 2) + selection.Top;
ColorBgra PrimaryColor = EnvironmentParameters.PrimaryColor;
ColorBgra SecondaryColor = EnvironmentParameters.SecondaryColor;
int BrushWidth = (int)EnvironmentParameters.BrushWidth;

they will not be necessary for us.

Open User Interface Designer: File-> User Interface Designer. Select in it the top line and in the Control name box write Red. Click the Update button. Rename the next controls to Green and Blue accordingly. Now the code block of user interface (UI) will look like this:

#region UICode
IntSliderControl Amount1 = 0; // [0,100] Red
IntSliderControl Amount2 = 0; // [0,100] Green
IntSliderControl Amount3 = 0; // [0,100] Blue
#endregion

As we will adjust each separate color items of pixel, three variables will be necessary for us: R, G and B. Add these lines after CurrentPixel = src [x, y];

int R = CurrentPixel.R;
int G = CurrentPixel.G;
int B = CurrentPixel.B;

We will need one more variable - grey, add it below the lines shown above.

int gray = (R+G+B)/3;

By trial I defined the formula of adjustment of the color channel: Color = ((100 - AmountX) *gray + AmountX*Color)/100. Let's apply this formula to each of three channels:

// TODO: Add pixel processing code here
R = ((100 - Amount1)*gray + Amount1*R)/100;
G = ((100 - Amount2)*gray + Amount2*G)/100;
B = ((100 - Amount3)*gray + Amount3*B)/100;

It is necessary to collect the color components of pixel together:

CurrentPixel.R = Int32Util.ClampToByte(R);
CurrentPixel.G = Int32Util.ClampToByte(G);
CurrentPixel.B = Int32Util.ClampToByte(В);

Now our script looks like this:

#region UICode
IntSliderControl Amount1 = 0; // [0,100] Red
IntSliderControl Amount2 = 0; // [0,100] Green
IntSliderControl Amount3 = 0; // [0,100] Blue
#endregion

void Render(Surface dst, Surface src, Rectangle rect)
{
    ColorBgra CurrentPixel;
    for (int y = rect.Top; y < rect.Bottom; y++)
    {
        if (IsCancelRequested) return;
        for (int x = rect.Left; x < rect.Right; x++)
        {
            CurrentPixel = src[x,y];
            int R = CurrentPixel.R;
            int G = CurrentPixel.G;
            int B = CurrentPixel.B;
            int gray = (R+G+B)/3;

            // TODO: Add pixel processing code here
            R = ((100 - Amount1)*gray + Amount1*R)/100;
            G = ((100 - Amount2)*gray + Amount2*G)/100;
            B = ((100 - Amount3)*gray + Amount3*B)/100;

            CurrentPixel.R = Int32Util.ClampToByte(R);
            CurrentPixel.G = Int32Util.ClampToByte(G);
            CurrentPixel.B = Int32Util.ClampToByte(B);

            dst[x,y] = CurrentPixel;
        }
    }
}

Save this script with the SaturationRGB_1 name (File -> Save...) and create a DLL file with the same name (File-> Save as DLL...). Check how your effect works.

When all sliders is set to 0, we will have the image of grey colour. If all sliders is set to 100 we will have the not changed source image.

Let's continue. Replace the maximum values of Amount in the code block of user interface (UI) to 300 (experiment shows that great values will lead to loss of the image details). Set the minimum values to -200 (smaller values will also lead to loss of the image details). Set the default values to 100.

#region UICode
IntSliderControl Amount1 = 0; // [-200,300] Red
IntSliderControl Amount2 = 0; // [-200,300] Green
IntSliderControl Amount3 = 0; // [-200,300] Blue
#endregion

Let's address to Using CodeLab to Build a DLL by BoltBait. We can find some usefull information in the Default section and we can create similar for our script:

// Author: ReMake - name of the effect's author
// Name: Saturation RGB - name of effect in the menu
// Title: Saturation RGB - a title of the effect's interface
// Desc: Saturation RGB - the effect description
// Keywords: paint.net|effect|saturation|rgb - a keywords from which your effect can be found in the Internet
// URL: http://www.getpaint.net/redirect/plugins.html - your address in a network (or in the forum)

Let's place this information before the code block of the interface:

// Author: ReMake
// Name: Saturation RGB
// Title: Saturation RGB
// Desc: Saturation RGB
// Keywords: paint.net|effect|saturation|rgb
// URL: http://www.getpaint.net/redirect/plugins.html
#region UICode
IntSliderControl Amount1 = 0; // [-200,300] Red
IntSliderControl Amount2 = 0; // [-200,300] Green
IntSliderControl Amount3 = 0; // [-200,300] Blue
#endregion

Save this script with the name SaturationRGB.

And last, it is necessary to create an icon for the interface of our effect from the PNG file, which have the size of 16x16 pixels. I have created such icon: 

Now let's save our effect as a DLL file: File-> Save as DLL... Almost all information is in the dialog box, which presented to you. Select the Adjustment item in the Menu Settings. Click the Select icon link and select the icon. Click the Build button - your new effect is ready!

The user interface of our new effect looks like this.

 

I think, it was easy to create this effect.

 

It was my first effect!

Results of the effect's work you can see in the Saturation RGB topic.

 

Вариант этой темы на русском языке смотрите здесь.

 

Edited July 26, 2018 by toe_head2001
Formatting