Computer Graphics. Frame Rate.
When you create an animation through code you can face frame skips or picture flickers. This story is intended to explain you why it happens and what is responsible for that.
First of all, we need to understand two major terms used in animation development: Frame and Frame Rate.
Frame.
Wikipedia gives quite short and understandable definitions for different things, therefore I use it with great pleasure. So, what does it tell about a frame?
In filmmaking, video production, animation, and related fields, a frame is one of the many still images which compose the complete moving picture. The term is derived from the fact that, from the beginning of modern filmmaking toward the end of the 20th century, and in many places still up to the present, the single images have been recorded on a strip of photographic film that quickly increased in length, historically; each image on such a strip looks rather like a framed picture when examined individually.
The frame can be considered as a result of the code invocation, the main aim of which is to prepare one single picture.
Frame Rate.
I will not invent a definition for a frame rate, therefore let’s look again what Wikipedia says.
Frame rate (expressed in frames per second or FPS) is the frequency (rate) at which consecutive images called frames appear on a display. The term applies equally to film and video cameras, computer graphics, and motion capture systems. Frame rate may also be called the frame frequency, and be expressed in hertz.
I don’t have anything to add.
Why the Frame Rate is so Important.
When we look at a video display we think that an image on the screen is rendered at once as a solid picture. Of course, it is not true. In fact, video display renders a pixel at a time from left to right. When a row is finished the next one starts. Display does it so fast that we don’t see it and percept the action as if the whole picture is drawn (frame).
The interesting thing here is that somewhere something like two-dimensional array exists that holds the position and the color of each pixel. Do you think it is a good idea to change that array while it is iterated through to draw pixels on the screen? Probably, it is not. Best you can get is something like two pictures mixed up.
To reduce this issue, double buffer pattern is used. The main idea of the pattern is to provide two arrays that hold the data. One array is accessible for a ‘write’ operation (canvas buffer), another for a ‘read’ (display buffer). At some point, these buffers are swapped (canvas buffer becomes display buffer and vice versa). Pretty simple? Yes, it is. In our case, numerous advanced graphics algorithms set values in the canvas buffer to prepare a next frame while at the same time a video driver gets values from the display buffer (current frame) to send them to a video display. Can we call a count of swap operations per second a frame rate? According to the definition above, we can. But a more interesting thing is that this frame rate is equal to 1/60th, 2/60th, 3/60th etc… of a second and applied to our video display independently of our code. What I mean. Just imagine that we have a code that draws rectangle and fills it with red or green color in rotation. You can be sure, this code will be executed incredibly fast. Let’s take this time as 1 millisecond just for example. If we add the code in the loop, how often will the rectangles be drawn in our program? Simple calculation shows that 1 second divided to 1 millisecond is equal to 1000. 1000 times per second our code will set values to canvas buffer and only 1/60th, 2/60th, 3/60th etc… of a second the rectangle will be displayed on the screen. Who knows what color the rectangle will have? I don’t. All that I can tell is that about 16–17 frames produced by code were skipped.
Generally, there are few reasons why you need to synchronize your code frame rate with the rate of swap operations:
- To avoid flickers that can occur when our code writes a new frame to the canvas buffer and swap operation is performed.
- To avoid frame skips that, as it was described above, can occur when our code provides more frames than can be displayed.
How to make synchronization? It depends on your needs. You can try to make some delays in the code (not recommended), use a graphic engine or use built-in functions of the platforms that your code is targeted at.
Conclusion
Frame skips and picture flickers have a simple nature of origin. Knowledge of this nature helps us to avoid them and provides us with ability to create smooth and beautiful graphics. The best way to do it is to use a graphic engine or built-in functions of the target platform.
Thank you for reading. I hope you enjoyed this story. Sincerely yours, Alex.
