Drawing on the screen

drawing shapes, text and images on the screen with a small animation

This program will draw some shapes on the display, draw “hello world!” in the middle of the screen and let an image go to every corner of the window. You can use every image you want, but you will need to place the image file in the same directory as your program.

the entire code:

import pygame, sys
from pygame.locals import *

pygame.init()

FPS = 30 #frames per second setting
fpsClock = pygame.time.Clock()

#set up the window
screen = pygame.display.set_mode((400, 300), 0, 32)
pygame.display.set_caption('animation')

#set up the colors
white = (255, 255, 255)
black = (  0,   0,   0)
green = (0, 255, 0)
blue = (0, 0, 180)
red   = (255,   0,   0)

image  = pygame.image.load('image.png')
imagex = 360
imagey = 260
direction = 'left'

# text setting
font_obj = pygame.font.Font('freesansbold.ttf', 32)
text_surface_obj = font_obj.render('Hello World!', True, GREEN, BLUE)
text_rect_obj = text_surface_obj.get_rect()
text_rectObj.center = (200, 150)

while True: # the main game loop
    screen.fill(WHITE)

    # draw a green polygon onto the surface
    pygame.draw.polygon(screen, green, ((146, 0), (291, 106), (236, 277), (56, 277), (0, 106)))

    # draw some blue lines onto the surface
    pygame.draw.line(screen, blue, (60, 60), (120, 60), 4)
    pygame.draw.line(screen, blue, (120, 60), (60, 120))
    pygame.draw.line(screen, blue, (60, 120), (120, 120), 4)

    # draw a blue circle onto the surface
    pygame.draw.circle(screen, blue, (300, 50), 20, 0)

    # draw a red ellipse onto the surface
    pygame.draw.ellipse(screen, red, (100, 150, 40,80), 1)

    # draw a red rectangle onto the surface
    pygame.draw.rect(screen,red, (200, 150, 100, 50))

    # draw the text onto the surface
    screen.blit(text_surface_obj, text_rect_obj)


    #the animation of the image
    if direction == 'right':
        imagex += 5
        if imagex == 360:
            direction = 'down'
    elif direction == 'down':
        imagey += 5
        if imagey == 260:
            direction = 'left'
    elif direction == 'left':
        imagex -= 5
        if imagex == 20:
            direction = 'up'
    elif direction == 'up':
        imagey -= 5
        if imagey == 20:
            direction = 'right'
    screen.blit(image, (imagex, imagey))

    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()

    pygame.display.update()
    fpsClock.tick(FPS)

drawing the white background:

screen.fill(white)

drawing the polygon:

In this function you define display surface, the color and the position of every corner of the polygon, you can do that clockwise and counterclockwise.

pygame.draw.polygon(screen, green, ((146, 0), (291, 106), (236, 277), (56, 277), (0, 106)))

drawing the lines:

Here you define the display surface, the color, the first and the last point and the width of the line.

pygame.draw.line(screen, blue, (60, 60), (120, 60), 4)
pygame.draw.line(screen, blue, (120, 60), (60, 120))
pygame.draw.line(screen, blue, (60, 120), (120, 120), 4)

drawing the circle:

In this function you define the display surface, the color, the position, the radius and the width of the circle (0 gives a plain circle).

pygame.draw.circle(screen, blue, (300, 50), 20, 0)

drawing the ellipse:

In this function you define the display surface, the color, the position, the horizontal size, the vertical size and the width of the ellipse

pygame.draw.ellipse(screen, red, (100, 150, 40,80), 1)

drawing the rectangle:

In this function you define the display surface, the color, the position and the vertical and the horizontal size of the rectangle.

pygame.draw.rect(screen,red, (200, 150, 100, 50))

defining the text:

First you define the type and the size of your text, I use a basic font that you get with pygame.

font_obj = pygame.font.Font('freesansbold.ttf', 32)

Then you define the actual text, if you want it bold or not (True/False), the color of the text and, if you want to mark your text, a color of the marking.

text_surface_obj = font_obj.render('Hello World!', True, green, blue)

If you want to mark your text or want to define the center of your text, you have to tell pygame that with this function:

text_rect_obj = text_surface_obj.get_rect()

And after that, you can define the center of your text with this function:

text_rect_obj.center = (200, 150)

drawing the text:

If you marked your text or defined the center, you have to draw the text this way:

screen.blit(text_surface_obj, text_rectObj)

Otherwise you draw your text, but you need to define the position, so you do that this way:

DISPLAYSURF.blit(textSurfaceObj, (100,50))

defining the image:

Here you define the image you want to use, the start position (x and y coordinates), and the direction of the image.

image  = pygame.image.load('image.png')
imagex = 360
imagey = 260
direction = 'left'

animating the image:

Here you check the direction of the image, if it reached a corner, if so change the direction, if not, move it 5 pixels in the same direction and draw the image again. That’s what we do with this part of the code:

if direction == 'right':
    imagex += 5
    if imagex == 360:
        direction = 'down'
elif direction == 'down':
    imagey += 5
    if imagey == 260:
        direction = 'left'
elif direction == 'left':
    imagex -= 5
    if imagex == 20:
        direction = 'up'
elif direction == 'up':
    imagey -= 5
    if imagey == 20:
        direction = 'right'
screen.blit(image, (imagex, imagey))

note: my image is 20 by 20 pixels, I used if imagex == 360 and if imagey == 260: because then my image is 20 pixels from the edge, if your image has a different size, you will have to change the numbers.

checking if you quit the program:

Here we check if you closed the window of your program.

for event in pygame.event.get():
    if event.type == QUIT:
        pygame.quit()
        sys.exit()

updating the display:

Here you tell pygame to update the display so everything you have drawn appears on the screen.

pygame.display.update()

defining the frames per second:

Here you tell pygame to sleep enough so the frames per second setting is respected.

fpsClock.tick(FPS)