Create various gradients effects

Create various gradients effects

Create various gradients effects

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

DownloadDownload This Tutorials

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

procedure TForm1.FormCreate(Sender: TObject);

   { Draw 1 pixcel width line }
   procedure DrawLine(X,Y,H,L:Integer; Step:Real);
   Var
      R, C : Integer;
   Begin
      For R:=0 To H Do
      Begin
         { Change fill color }
         If R<=L Then
         Begin
            C:=Round(R*Step);
            { Red -> Green }
            Image1.Canvas.Pen.Color:=RGB(255-C,C,0)
         End
         Else If R<=2*L Then
         Begin
            C:=Round((R-L)*Step);
            { Green -> Blue }
            Image1.Canvas.Pen.Color:=RGB(0,255-C,C)
         End
         Else If R<=3*L Then
         Begin
            C:=Round((R-2*L)*Step);
            { Blue -> Yellow }
            Image1.Canvas.Pen.Color:=RGB(C,C,255-C);
         End;
         { Fill area by drawing lines }
         Image1.Canvas.MoveTo(X,Y+R);
         Image1.Canvas.LineTo(X+1,Y+R);
      End;

   End;

Var
   Angle, X, Y, H, H2, W, L : Integer;
   Step : Real;
begin
   { Get form size }
   H:=Image1.Height;
   W:=Image1.Width;

   { Fill image area by form color }
   Image1.Canvas.Brush.Color:=Form1.Color;
   Image1.Canvas.Pen.Color:=Form1.Color;
   Image1.Canvas.Rectangle(0,0,W,H);


   { Set fill size }
   H2:=150;
   L:=H2 Div 3;

   { Set fill step size }
   Step:=255/L;
   Angle:=0;
   For X:=1 to W Do
   Begin
      Y:=Round(100*Sin(Angle*(Pi/180)));
      DrawLine(X,(H Div 3)-Y,H2,L,Step);
      Inc(Angle);
      If Angle>360 Then Angle:=0;
   End;
end;

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

procedure TForm1.FormCreate(Sender: TObject);

   { Draw 1 pixcel width line }
   procedure DrawLine(X,Y,H:Integer; Step:Real);
   Var
      R, C : Integer;
   Begin
      For R:=0 To H Do
      Begin
         { Change fill color }
         C:=Round(R*Step);
         { Red -> Green }
         Image1.Canvas.Pen.Color:=RGB(255-C,C,0);

         { Fill area by drawing lines }
         Image1.Canvas.MoveTo(X,Y+R);
         Image1.Canvas.LineTo(X+1,Y+R);
      End;

   End;

Var
   Angle, X, Y, H, H2, W : Integer;
   Step : Real;
begin
   { Get form size }
   H:=Image1.Height;
   W:=Image1.Width;

   { Fill image area by form color }
   Image1.Canvas.Brush.Color:=clBlack;
   Image1.Canvas.Pen.Color:=clBlack;
   Image1.Canvas.Rectangle(0,0,W,H);


   { Set fill size }
   H2:=150;

   { Set fill step size }
   Step:=255/H2;
   Angle:=0;
   For X:=1 to W Do
   Begin
      Y:=Round(100*Sin(Angle*(Pi/180)));
      DrawLine(X,(H Div 3)-Y,H2,Step);
      Inc(Angle);
      If Angle>360 Then Angle:=0;
   End;
end;

This one draws a sin form in neon color form.

Neon Gradient

procedure TForm1.FormCreate(Sender: TObject);

    { Draw 1 pixcel width line }
    procedure DrawLine(X,Y,H,L:Integer; Step:Real);
    Var
        R, C : Integer;
    Begin
        For R:=0 To H Do
        Begin
            { Change fill color }
            If R<=L Then
            Begin
                C:=Round(R*Step);
                { Black -> Red }
                Image1.Canvas.Pen.Color:=RGB(C,0,0)
            End
            Else If R<=2*L Then
            Begin
                C:=Round((R-L)*Step);
                { Red -> Black }
                Image1.Canvas.Pen.Color:=RGB(255-C,0,0)
            End;
            { Fill area by drawing lines }
            Image1.Canvas.MoveTo(X,Y+R);
            Image1.Canvas.LineTo(X+1,Y+R);
        End;

    End;

Var
    Angle, X, Y, H, H2, W, L : Integer;
    Step : Real;
begin
    { Get form size }
    H:=Image1.Height;
    W:=Image1.Width;

    { Fill image area by form color }
    Image1.Canvas.Brush.Color:=clBlack;
    Image1.Canvas.Pen.Color:=clBlack;
    Image1.Canvas.Rectangle(0,0,W,H);


    { Set fill size }
    H2:=150;
    L:=H2 Div 2;

    { Set fill step size }
    Step:=255/L;
    Angle:=0;
    For X:=1 to W Do
    Begin
        Y:=Round(100*Sin(Angle*(Pi/180)));
        DrawLine(X,(H Div 3)-Y,H2,L,Step);
        Inc(Angle);
        If Angle>360 Then Angle:=0;
    End;
end;

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

neon horizontal line gradient

procedure TForm1.FormCreate(Sender: TObject);

    { Draw 1 pixcel width line }
    procedure DrawLine(W,Y,H,L,RGBV:Integer; Step:Real);
    Var
        R, C : Integer;
    Begin
        For R:=0 To H Do
        Begin
            { Change fill color }
            If R<=L Then
            Begin
                C:=Round(R*Step);
                Case RGBV Of
                    1:Image1.Canvas.Pen.Color:=RGB(C,0,0);
                    2:Image1.Canvas.Pen.Color:=RGB(0,C,0);
                    3:Image1.Canvas.Pen.Color:=RGB(0,0,C);
                End;
            End
            Else If R<=2*L Then
            Begin
                C:=Round((R-L)*Step);
                Case RGBV Of
                    1:Image1.Canvas.Pen.Color:=RGB(255-C,0,0);
                    2:Image1.Canvas.Pen.Color:=RGB(0,255-C,0);
                    3:Image1.Canvas.Pen.Color:=RGB(0,0,255-C);
                End;
            End;
            { Fill area by drawing lines }
            Image1.Canvas.MoveTo(0,Y+R);
            Image1.Canvas.LineTo(W,Y+R);
        End;

    End;

Var
    Row, X, Y, H, H2, W, L : Integer;
    Step : Real;
begin
    { Get form size }
    H:=Image1.Height;
    W:=Image1.Width;

    { Fill image area by form color }
    Image1.Canvas.Brush.Color:=clBlack;
    Image1.Canvas.Pen.Color:=clBlack;
    Image1.Canvas.Rectangle(0,0,W,H);


    { Set fill size }
    H2:=100;
    L:=H2 Div 2;

    { Set fill step size }
    Step:=255/L;
    For Row:=1 To 3 Do
    Begin
        Y:=(Row-1)*150;
        DrawLine(W,Y,H2,L,Row,Step);
    End;
end;

Download This Delphi Tutorials.

Download materials for this article (Delphi - Tutorials)

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

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

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

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

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



Awesome tip!

tom philip :: August 15-2010 :: 10:06 PM

Good Thing! if use bezier will better!

Leave a comment