Double Buffering ( or ) Flicker free Drawing

The concept of "Double Buffering" ( Also known as "Flicker Free Drawing")
 is very simple.For example , if you have to draw a line, a circle and a square :-

Heavily Flickering Pseudocode

         1) Draw a Line
         2) Update window
         3) Draw a Circle
         4) Update Window
         5) Draw a Square
         6) Update Window

You can see that there are 3 updates to the window. This is the reason for the flickering.
Now u must be thinking, why cant i draw all 3 items first and then, update the window.
Thats what Double Buffering is all about. Now, lets see how it works...

Flicker Free Pseudocode ( Double Buffered Code )

         1) Create a memory DC ( one that u dont show on the screen )
                  * a) Draw a Line
                  * b) Draw a Circle
                  * c) Draw a Square
         2) Bitblt the memory DC to your actual dc ( Copies your memory dc to your actual dc )
         3) Update Window.

* All these drawings dont need to update the window, bcoz u are not doing it on
  the screen. You are only doing it in an invisible, memory dc.

Now , there's only one update to your window. This eliminates flickering drastically. The
above case shows only 3 drawings. Imagine the situation, if u had tens or hundreds of
drawings to do. Even, in that case, with double buffering, it would take only one update
to your window. There !!! Your flickering has gone away :)

The name "Double Buffering" comes from the idea of having 2 buffers to do your operation.
The first buffer is your memory dc or memory buffer, the 2nd one is your actual dc or buffer.

Example code

         // This example assumes that you are going to draw filled rectangles
         // in the screen.It generates random shades of green to fill that rect.
         // Use this code in your view class's OnDraw() function if you are using
         // Doc/View architecture or if you are using a dialog based application,
         // then you can add this code in the OnPaint Function.


         // Get the coordinates of the bounding rectangle.
         CRect rcClient;          
         GetClientRect(rcClient);

         CDC MemDC,*pDC;
         CBitmap MemBitmap;

         // Get Current DC
         pDC = GetDC();
         MemDC.CreateCompatibleDC(pDC);
         MemBitmap.CreateCompatibleBitmap(pDC,rcClient.right,rcClient.bottom);

         CBitmap *pOldBitmap = MemDC.SelectObject(&MemBitmap);

         //Create a brush with random shades of green
         CBrush bkBrush(HS_FDIAGONAL,RGB(0,rand()%255,0));
         MemDC.FillRect(rcClient,&bkBrush);

         // Copy the bitmap from the memory dc to your main
         // DC (pdc here) using a fast bitblt function call
         pDC->BitBlt(0,0,rcClient.right,rcClient.bottom,&MemDC,0,0,SRCCOPY);
         MemDC.SelectObject(pOldBitmap);

         // Refer NOTE 1 regarding the line below
         ReleaseDC(pDC);

Note : 1

         Make sure that you ALWAYS release the unwanted GDI objects. For example, if
         you have used any brushes, fonts, bitmaps or device contexts (dc ), always release
         it. This avoids a situation called a "Resource Leak". A resource leak is
         similar to a "Memory Leak". Assuming that your program is going to run for a long
         time, the application will slowly eat up the resources available until finally,
         your application and even windows wont be able to draw itself. It would look as
         though the application hung up. Infact, the application did not hang up. Its only
         not able to redraw itself.

Conclusion

         THATS ALL FOLKS. A Simple tutorial for flicker free drawing (a) double buffering.
         Hoping that i have made it clear to you. All Luck.


Best link for Flicker Free Drawing code : http://www.codeproject.com/gdi/flickerfree.asp
The link above contains a simpler and exhaustive implementation of the same method.
Hosted by www.Geocities.ws

1