Create various gradients effects

This tutorial shows how to create various gradients effects like sin wave, neon colors and much more.

Bookmark:

Create various gradients effects

Following procedure draw rainbow gradient at startup. Within that you will see another procedure call DrawLine. It will draw single 1 pixel width line look like a color gradient. What the main procedure does is call DrawLine procedure and change it starting position.

Rainbow Gradient

01procedure TForm1.FormCreate(Sender: TObject);
02 
03   { Draw 1 pixcel width line }
04   procedure DrawLine(X,Y,H,L:Integer; Step:Real);
05   Var
06      R, C : Integer;
07   Begin
08      For R:=0 To H Do
09      Begin
10         { Change fill color }
11         If R<=L Then
12         Begin
13            C:=Round(R*Step);
14            { Red -> Green }
15            Image1.Canvas.Pen.Color:=RGB(255-C,C,0)
16         End
17         Else If R<=2*L Then
18         Begin
19            C:=Round((R-L)*Step);
20            { Green -> Blue }
21            Image1.Canvas.Pen.Color:=RGB(0,255-C,C)
22         End
23         Else If R<=3*L Then
24         Begin
25            C:=Round((R-2*L)*Step);
26            { Blue -> Yellow }
27            Image1.Canvas.Pen.Color:=RGB(C,C,255-C);
28         End;
29         { Fill area by drawing lines }
30         Image1.Canvas.MoveTo(X,Y+R);
31         Image1.Canvas.LineTo(X+1,Y+R);
32      End;
33 
34   End;
35 
36Var
37   Angle, X, Y, H, H2, W, L : Integer;
38   Step : Real;
39begin
40   { Get form size }
41   H:=Image1.Height;
42   W:=Image1.Width;
43 
44   { Fill image area by form color }
45   Image1.Canvas.Brush.Color:=Form1.Color;
46   Image1.Canvas.Pen.Color:=Form1.Color;
47   Image1.Canvas.Rectangle(0,0,W,H);
48 
49 
50   { Set fill size }
51   H2:=150;
52   L:=H2 Div 3;
53 
54   { Set fill step size }
55   Step:=255/L;
56   Angle:=0;
57   For X:=1 to W Do
58   Begin
59      Y:=Round(100*Sin(Angle*(Pi/180)));
60      DrawLine(X,(H Div 3)-Y,H2,L,Step);
61      Inc(Angle);
62      If Angle>360 Then Angle:=0;
63   End;
64end;

This one draws rainbow gradient as a sin wave form. This one uses similar technique as previous one, but uses only two colors in black background.

Sin wave Gradient

01procedure TForm1.FormCreate(Sender: TObject);
02 
03   { Draw 1 pixcel width line }
04   procedure DrawLine(X,Y,H:Integer; Step:Real);
05   Var
06      R, C : Integer;
07   Begin
08      For R:=0 To H Do
09      Begin
10         { Change fill color }
11         C:=Round(R*Step);
12         { Red -> Green }
13         Image1.Canvas.Pen.Color:=RGB(255-C,C,0);
14 
15         { Fill area by drawing lines }
16         Image1.Canvas.MoveTo(X,Y+R);
17         Image1.Canvas.LineTo(X+1,Y+R);
18      End;
19 
20   End;
21 
22Var
23   Angle, X, Y, H, H2, W : Integer;
24   Step : Real;
25begin
26   { Get form size }
27   H:=Image1.Height;
28   W:=Image1.Width;
29 
30   { Fill image area by form color }
31   Image1.Canvas.Brush.Color:=clBlack;
32   Image1.Canvas.Pen.Color:=clBlack;
33   Image1.Canvas.Rectangle(0,0,W,H);
34 
35 
36   { Set fill size }
37   H2:=150;
38 
39   { Set fill step size }
40   Step:=255/H2;
41   Angle:=0;
42   For X:=1 to W Do
43   Begin
44      Y:=Round(100*Sin(Angle*(Pi/180)));
45      DrawLine(X,(H Div 3)-Y,H2,Step);
46      Inc(Angle);
47      If Angle>360 Then Angle:=0;
48   End;
49end;

This one draws a sin form in neon color form.

Neon Gradient

01procedure TForm1.FormCreate(Sender: TObject);
02 
03    { Draw 1 pixcel width line }
04    procedure DrawLine(X,Y,H,L:Integer; Step:Real);
05    Var
06        R, C : Integer;
07    Begin
08        For R:=0 To H Do
09        Begin
10            { Change fill color }
11            If R<=L Then
12            Begin
13                C:=Round(R*Step);
14                { Black -> Red }
15                Image1.Canvas.Pen.Color:=RGB(C,0,0)
16            End
17            Else If R<=2*L Then
18            Begin
19                C:=Round((R-L)*Step);
20                { Red -> Black }
21                Image1.Canvas.Pen.Color:=RGB(255-C,0,0)
22            End;
23            { Fill area by drawing lines }
24            Image1.Canvas.MoveTo(X,Y+R);
25            Image1.Canvas.LineTo(X+1,Y+R);
26        End;
27 
28    End;
29 
30Var
31    Angle, X, Y, H, H2, W, L : Integer;
32    Step : Real;
33begin
34    { Get form size }
35    H:=Image1.Height;
36    W:=Image1.Width;
37 
38    { Fill image area by form color }
39    Image1.Canvas.Brush.Color:=clBlack;
40    Image1.Canvas.Pen.Color:=clBlack;
41    Image1.Canvas.Rectangle(0,0,W,H);
42 
43 
44    { Set fill size }
45    H2:=150;
46    L:=H2 Div 2;
47 
48    { Set fill step size }
49    Step:=255/L;
50    Angle:=0;
51    For X:=1 to W Do
52    Begin
53        Y:=Round(100*Sin(Angle*(Pi/180)));
54        DrawLine(X,(H Div 3)-Y,H2,L,Step);
55        Inc(Angle);
56        If Angle>360 Then Angle:=0;
57    End;
58end;

This one draws neon looking horizontal color gradients using three basic colors.

neon horizontal line gradient

01procedure TForm1.FormCreate(Sender: TObject);
02 
03    { Draw 1 pixcel width line }
04    procedure DrawLine(W,Y,H,L,RGBV:Integer; Step:Real);
05    Var
06        R, C : Integer;
07    Begin
08        For R:=0 To H Do
09        Begin
10            { Change fill color }
11            If R<=L Then
12            Begin
13                C:=Round(R*Step);
14                Case RGBV Of
15                    1:Image1.Canvas.Pen.Color:=RGB(C,0,0);
16                    2:Image1.Canvas.Pen.Color:=RGB(0,C,0);
17                    3:Image1.Canvas.Pen.Color:=RGB(0,0,C);
18                End;
19            End
20            Else If R<=2*L Then
21            Begin
22                C:=Round((R-L)*Step);
23                Case RGBV Of
24                    1:Image1.Canvas.Pen.Color:=RGB(255-C,0,0);
25                    2:Image1.Canvas.Pen.Color:=RGB(0,255-C,0);
26                    3:Image1.Canvas.Pen.Color:=RGB(0,0,255-C);
27                End;
28            End;
29            { Fill area by drawing lines }
30            Image1.Canvas.MoveTo(0,Y+R);
31            Image1.Canvas.LineTo(W,Y+R);
32        End;
33 
34    End;
35 
36Var
37    Row, X, Y, H, H2, W, L : Integer;
38    Step : Real;
39begin
40    { Get form size }
41    H:=Image1.Height;
42    W:=Image1.Width;
43 
44    { Fill image area by form color }
45    Image1.Canvas.Brush.Color:=clBlack;
46    Image1.Canvas.Pen.Color:=clBlack;
47    Image1.Canvas.Rectangle(0,0,W,H);
48 
49 
50    { Set fill size }
51    H2:=100;
52    L:=H2 Div 2;
53 
54    { Set fill step size }
55    Step:=255/L;
56    For Row:=1 To 3 Do
57    Begin
58        Y:=(Row-1)*150;
59        DrawLine(W,Y,H2,L,Row,Step);
60    End;
61end;

Download This Delphi Tutorials.

Download materials for this article (Delphi - Tutorials)

sin-wave-gradient.zip
       File size: 4 KB, File type: zip
       Total downloads: 244, Upload date: February 10 - 2009

rainbow-gradient-sin-wave.zip
       File size: 4 KB, File type: zip
       Total downloads: 223, Upload date: February 10 - 2009

Neon-Color-Gradient.zip
       File size: 4 KB, File type: zip
       Total downloads: 220, Upload date: February 10 - 2009

neon-horizontal-line-gradient.zip
       File size: 4 KB, File type: zip
       Total downloads: 242, Upload date: February 10 - 2009

YES, I accept the Terms and Conditions and I acknowledge that I have reviewed and understood the agreement.

Akura :: January 27-2010 :: 11:43 AM

Awesome tip!

tom philip :: August 16-2010 :: 02:06 AM

Good Thing! if use bezier will better!

Create various gradients effects

Create various gradients effects

Create various gradients effects

Bookmark:

Create various gradients effects

Download This Delphi Tutorials.

Akura :: January 27-2010 :: 11:43 AM

tom philip :: August 16-2010 :: 02:06 AM

Leave a comment