Smooth gradient

[aradeonas]

Hi,

I want to make smooth gradient and for this I used this example code:

Code: Pascal  [Select][+][-]

1. procedure TForm1.PaintTest1;
2. var
3.   bmp: TBGRABitmap;
4.   layer: TBGRABitmap;
5.   i, j, ww, hh: integer;
6.   p1, p2: TPointF;
7.   c1, c2: TBGRAPixel;
8.   co: integer;
9. begin
10.   bmp := TBGRABitmap.Create(Width, Height, BGRAWhite);
11.   ww := bmp.Width;
12.   hh := bmp.Height;
13.   //------------------
14.   for i := 1 to 5 do
15.   begin
16.     case i of
17.       1:
18.       begin
19.         c1 := BGRA(179, 130, 210, 255);
20.         c2 := BGRA(255, 255, 255, 255);
21.         p1 := PointF(-ww / 5, -hh / 5);
22.         p2 := PointF(ww, hh);
23.         co := 2;
24.       end;
25.       2:
26.       begin
27.         c1 := BGRA(49, 206, 148, 255);
28.         c2 := BGRA(255, 255, 255, 255);
29.         p1 := PointF(ww / 3, hh * 1.1);
30.         p2 := PointF(0, 0);
31.         co := 2;
32.       end;
33.       3:
34.       begin
35.         c1 := BGRA(131, 198, 57, 255);
36.         c2 := BGRA(255, 255, 255, 255);
37.         p1 := PointF(ww * 1.1, hh / 2);
38.         p2 := PointF(ww * 0.2, hh / 2);
39.         co := 2;
40.       end;
41.       4:
42.       begin
43.         c1 := BGRABlack;
44.         c2 := BGRA(255, 255, 255, 255);
45.         p1 := PointF(ww, -hh / 2);
46.         p2 := PointF(ww / 2, hh / 2);
47.         co := 1;
48.       end;
49.       5:
50.       begin
51.         c1 := BGRA(0, 0, 0, 0);
52.         c2 := BGRAWhite;
53.         p1 := PointF(-ww / 5, hh * 1.2);
54.         p2 := PointF(ww / 4, hh * 4 / 5);
55.         co := 3;
56.       end;
57.     end;
58.  
59.     layer := TBGRABitmap.Create(bmp.Width, bmp.Height);
60.     layer.GradientFill(0, 0, layer.Width, layer.Height, c1, c2, gtRadial, p1, p2, dmSet);
61.     for j := 1 to co do
62.     begin
63.       bmp.BlendImage(0, 0, layer,boMultiply);
64.     end;
65.     layer.Free;
66.   end;
67.  
68.   //------------------
69.   bmp.Draw(Panel2.Canvas, 0, 0);
70.   bmp.SaveToFile('BlendImage.png');
71.   bmp.Free;
72. end;
73.  

as you can see in attachments the result is not smooth so I think about this part :

Code: Pascal  [Select][+][-]

1.     for j := 1 to co do
2.     begin
3.       bmp.BlendImage(0, 0, layer,boMultiply);
4.     end;

So I changed co to 1 like this :

Code: Pascal  [Select][+][-]

1.     for j := 1 to 1 do
2.     begin
3.       bmp.BlendImage(0, 0, layer,boMultiply);
4.     end;

But even in this case you can see the is sill problem and if it can be solved I want the first case with more chromatic color.
So how can I make this gradient smother?

[aradeonas]

I cant attach files,please run the code and see the result.

[balazsszekely]

Hi aradeonas,

Did you check BGRAGradients.pas?

[aradeonas]

Yes I checked and result is like this but maybe I dont know how use this.
The one this I saw in that unit and seems interesting that I didnt know is TPhongShading but its like light not my gradient.

@Circular : Man you did a great job! Its more than a year and I always use BGRABitmap and always I will see something that surprises me!

[aradeonas]

OK.Here it is screenshot in jpg format.it lost some quality but it shows the point.

[aradeonas]

I just test LazPaint and Photoshop and my code.
Photoshop gradient is much smother than LazPaint or my code.
@Circular : Can you check this?

[circular]

Hello!

Man you did a great job! Its more than a year and I always use BGRABitmap and always I will see something that surprises me!

For sure, the loop "1 to co" is not a good idea if you want something smooth, because the channel values are stored as bytes, so have more intermediates images entails a loss of quality.

When you compare with Photoshop, what are the steps in Photoshops that you are applying?

Maybe boMultiply is not the best blend mode for that. What about boAdditive?

[aradeonas]

Hi,
I try to change the co to 1 and apply the gradient just one time and test many ways but nothing.
You can test it your self,juts open LazPaint and draw a purple/transparent gradient from 0,0 to w,h and you will see it has some waves in it, but I just did this in Photoshop and nothing.
For this I only choose color purple and transparent and then draw a radial gradient.

[circular]

Hmm, you can try maybe without gamma correction. For this, use the boolean parameter for GrandientFill and BlendImage.

[aradeonas]

I tested before and results are slightly better but not as good as as it should.

[circular]

What are the steps you are following in Photoshop?

[aradeonas]

-Make a new 1920*1080 transparent 8bit iamge
-Choose gradient
-Choose purple and white
-Choose preset "Foreground to Transparent" in gradient editor
-Dont change anything else (Smooth is 100 and Mode is Normal and Opacity is 100).
-Draw a gradient from 0,0 to 1920,1080 and save as PNG in smallest mod and result will be around 800kb

If it still unclear I can explain more or take screenshots or ...

[circular]

Thanks.

I tried some gradients with LazPaint and for what I can see they are generated using all the shades of colors. However, the progression is not always steady and this could be slightly improved.

Here I provide a screenshot where I have increased the contrast to show this effect. You can see the onion layers, which is normal, but some layers are wider than others. This may be a result of some optimization.

However the problem you have when combining many gradients is another. It results from the loss of quality I explained above.

Can you provide a screenshot of a gradient made with Photoshop?

[aradeonas]

Yes I have problems with layers but I have this problem with only 1 layer too.
Here is an example code of mine:

Code: Pascal  [Select][+][-]

1. var
2.   bmp: TBGRABitmap;
3.   p1, p2: TPointF;
4.   c1, c2: TBGRAPixel;
5. begin
6.   bmp := TBGRABitmap.Create(1920, 1080);
7.   c1 := BGRA(230, 206, 250);
8.   c2 := BGRAPixelTransparent;
9.   p1 := PointF(0, 0);
10.   p2 := PointF(bmp.Width, bmp.Height);
11.   bmp.GradientFill(0, 0, bmp.Width, bmp.Height, c1, c2, gtRadial, p1, p2, dmSet, True, False);
12.   bmp.SaveToFile('test1.png');
13.   bmp.Free;
14.  

Here you are:
https://www.dropbox.com/s/xr0nlwmeaz6wmld/testgradient.zip?dl=1

[aradeonas]

Also notice the huge file size difference,I tried to change the writer options but no particular changes