Pygame Drawing and Animation

Color Theory

In electrical engineering, engineers design chips to send the data to the computer screen. The data is sent to each individual pixel on the monitor screen. The monitor screen typically has 1920 pixels in the horizontal (x-direction) and 1280 pixels in the vertical (y-direction). Each pixel on the screen is composed of three components. One component is Red, the second is Green, and the third is Blue color. This system is called RGB. 

R can have a value from 0 to 255.  The value 255 has the maximum amount of RED color, and the value 0 has no RED color.

G can have a value from 0 to 255. Likewise, G = 255 means maximum GREEN, and G = 0 means no Green color.

And B can have a value from 0 to 255.  Similarly, B = 255 maximum GREEN, and G = 0 means no GREEN.

Depending on the value of R, G, and B that you specify in your Python program, the color of the pixel will change.

For example, RGB = (0,0,0) will make the screen black.

RGB = (255, 255, 255) will make the screen white.

Frames per Second (FPS): On your laptop computer, the computer screen is refreshed at about 60 times per second.  This means that the display processor chip on your computer rewrites the screen 60 times per second. This repetition rate is called frame rate or refresh rate and is referred to as frames per second or FPS. If the frame rate is too low, you will see a jerky image. Very fast, action-packed games require a much higher frame rate and the frame rate may be set to a value much higher than 60.

Animation:

If your Python program creates a static image that does not move, it is not very interesting. The user will lose interest in looking at a static image.  Motion and moving images are essential requirements of video games. This motion is called animation.

Suppose you have written a program where the player kicks a soccer ball and the ball flies across the screen. The computer emulates this motion by drawing the picture of the ball of the first frame at position (0, 0).  In frame 2, the computer draws the ball at position (1, 1).  In frame 3, the computer draws the ball at a new location, and so on. 

The human eye has what is called persistence of vision. The human eye and brain can only process about 16 separate images per second, retaining an image for about 1/16th of a second. If a new image replaces the previous image in less than 1/16th of a second, it will create the illusion of continuity. The human brain integrates the images on successive frames to get the impression of motion. This is why the computer refreshes the screen at 60 times or higher per second.