We have previously discussed that FTGraphics is a vector-raster hybrid graphics engine (i.e., it uses lines and shapes to specify exactly the color of each pixel in a 2D matrix of pixels but you, the user, specify coordinates in terms of decimals and not pixels). While raster graphics engines can be used to understand how computer graphics actually work since all engines ultimately have to produce some type of raster image in order to display it on the screen, more sophisticated graphics engines are generally used for writing games (both 2D and 3D) because they produce higher quality graphics than pure raster engines and they often provide a set of "special effects" which can be applied to lines and shapes to add a cooler feel to the graphics. FTGraphics provides one special effect called convolution blur. This is a fancy name for simply continuously averaging all the pixels around a given pixel. We refer to convolution blur here as a "flare" effect and the methods for drawing flares are located in the FTFlareGraphics unit. The code below illustrates flares.
program Workspace;
uses FTGraphics, FTFlareGraphics;
procedure Initialize;
begin
InitFlareBackground;
end;
procedure OnEnterFrame;
begin
Flare(0,0,GetHue(clOrange),255);
DoConvolutionFilter;
end;
begin
RunGraphicalApp(@Initialize,@OnEnterFrame);
end.
uses FTGraphics, FTFlareGraphics;
procedure Initialize;
begin
InitFlareBackground;
end;
procedure OnEnterFrame;
begin
Flare(0,0,GetHue(clOrange),255);
DoConvolutionFilter;
end;
begin
RunGraphicalApp(@Initialize,@OnEnterFrame);
end.
In the Initialization procedure we have to call InitFlareBackground. We do this because flares are processed on an all-black background. Anything that is drawn to the background is averaged with neighboring pixels until it finally fades away. This is the essence of the flare effect. For this reason, we cannot draw anything else to the background or it will simply be blurred into everything around it. This is an example of creating layers of graphics. The flare background is the bottom layer and we can draw other graphics on top of it.
Notice in OnEnterFrame, we draw a flare by calling the Flare(X,Y,Hue,Luminosity) procedure. X and Y are the coordinates at which to draw the flare. Hue is the shade for the flare and luminosity is how bright the flare is. Previously we have used RGB and HSI as our color models. FTFlareGraphics uses HSL where Hue and Saturation are identical to H and S in HSI but Luminosity (L) differs. In HSI, maximum intensity meant the brightest color possible. In HSL, maximum luminosity means maximum whiteness of the pixel. In other words, maximum luminosity is like a light which is so bright that you cannot even determine its color. Half luminosity (128) in HSL corresponds to maximum intensity (255) in HSI.
Notice in OnEnterFrame, we draw a flare by calling the Flare(X,Y,Hue,Luminosity) procedure. X and Y are the coordinates at which to draw the flare. Hue is the shade for the flare and luminosity is how bright the flare is. Previously we have used RGB and HSI as our color models. FTFlareGraphics uses HSL where Hue and Saturation are identical to H and S in HSI but Luminosity (L) differs. In HSI, maximum intensity meant the brightest color possible. In HSL, maximum luminosity means maximum whiteness of the pixel. In other words, maximum luminosity is like a light which is so bright that you cannot even determine its color. Half luminosity (128) in HSL corresponds to maximum intensity (255) in HSI.
We use HSL because it simulates a bright white flare at maximum intensity which is the effect we're going for.
The line DoConvolutionFilter actually does the convolution blur once. Doing it several times will simply continue the averaging and create an effect in which a single pixel continues to blur into neighboring pixels (which is what happens over multiple frames). It is important to note that DoConvolutionFilter also writes to the entire background of the frame. This means that if you want to write regular graphics on top of a flare background you must do it after the call DoConvolutionFilter or all of your graphics will be overwritten. Run the program and see what happens.
What you should see is a glowing dot at the center of the screen. Now change the code to make the flare move:
The line DoConvolutionFilter actually does the convolution blur once. Doing it several times will simply continue the averaging and create an effect in which a single pixel continues to blur into neighboring pixels (which is what happens over multiple frames). It is important to note that DoConvolutionFilter also writes to the entire background of the frame. This means that if you want to write regular graphics on top of a flare background you must do it after the call DoConvolutionFilter or all of your graphics will be overwritten. Run the program and see what happens.
What you should see is a glowing dot at the center of the screen. Now change the code to make the flare move:
procedure Initialize;
begin
InitFlareBackground;
end;
procedure OnEnterFrame;
begin
Flare(FrameCount/15,FrameCount/15,GetHue(clOrange),255);
DoConvolutionFilter;
end;
begin
InitFlareBackground;
end;
procedure OnEnterFrame;
begin
Flare(FrameCount/15,FrameCount/15,GetHue(clOrange),255);
DoConvolutionFilter;
end;
The flare appears to take off accross the screen and leaves a trail behind itself that fades away.
Now try to write graphics on top of the flare. For example, create a red square at the center of the screen (remember that it has to be written after DoConvolutionFilter). Also, modify the flare code above DoConvolutionFilter so that 4 flares are emitted from each corner of the square.
Now try to write graphics on top of the flare. For example, create a red square at the center of the screen (remember that it has to be written after DoConvolutionFilter). Also, modify the flare code above DoConvolutionFilter so that 4 flares are emitted from each corner of the square.
procedure Initialize;
begin
InitFlareBackground;
end;
procedure OnEnterFrame;
begin
Flare(FrameCount/15,FrameCount/15,GetHue(clOrange),255);
Flare(-FrameCount/15,FrameCount/15,GetHue(clOrange),255);
Flare(FrameCount/15,-FrameCount/15,GetHue(clOrange),255);
Flare(-FrameCount/15,-FrameCount/15,GetHue(clOrange),255);
DoConvolutionFilter;
FillRect(-1,-1,1,1,clRed);
end;
begin
InitFlareBackground;
end;
procedure OnEnterFrame;
begin
Flare(FrameCount/15,FrameCount/15,GetHue(clOrange),255);
Flare(-FrameCount/15,FrameCount/15,GetHue(clOrange),255);
Flare(FrameCount/15,-FrameCount/15,GetHue(clOrange),255);
Flare(-FrameCount/15,-FrameCount/15,GetHue(clOrange),255);
DoConvolutionFilter;
FillRect(-1,-1,1,1,clRed);
end;
In its current implementation, the flare effect can only take place in the background, but as we will see, this still allows for a number of cool special effects. In more sophisticated engines, the equivalent of a flare effect is a particle effect or particle system. These engines try to model the dispersion of particles and the reflection of light from these particles. Particle effects are much more versitile than the flare effect we're discussing here, but particle effects are more difficult to implement. Thus, in the hopes of keeping things relatively straightforward, we'll be using the flare effect in this unit.