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.
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.
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.
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.
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)
sin-wave-gradient.zip
File size: 4 KB, File type: zip
Total downloads: 244, Upload date: February 10 - 2009rainbow-gradient-sin-wave.zip
File size: 4 KB, File type: zip
Total downloads: 223, Upload date: February 10 - 2009Neon-Color-Gradient.zip
File size: 4 KB, File type: zip
Total downloads: 220, Upload date: February 10 - 2009neon-horizontal-line-gradient.zip
File size: 4 KB, File type: zip
Total downloads: 242, Upload date: February 10 - 2009
Akura :: January 27-2010 :: 11:43 AM
Awesome tip!
tom philip :: August 16-2010 :: 02:06 AM
Good Thing! if use bezier will better!