Slowly drawing a line in pygame while other lines remain static

Question

In my last question i made a crucial mistake by not providing all the information and just editing it would result in an entirely different topic so i created a new question.

What i didnt say is that i already have some lines printed on the screen (they serve playground for the game) and only in specific cases i want to add slowly drawn lines to the screen. pygame.update.flip() function seems to mess up with the game as my playground starts to blink. The reason i didnt provide this explanation is that i didnt think the solution would have anything to do with formatting of other parts of my code.

I see two solutions here. Either i need a way to draw a line slowly without disturbing my "playground lines" or i need to find a way draw my "playground lines" so that they are not disturbed by pygame.update.flip() .

line_start = [ (100, 0), (200, 0), (0, 100), (0, 200) ]
line_end = [ (100, 300), (200, 300), (300, 100), (300, 200) ]

def draw_lines(line_start, line_end):
    for idx in range(len(line_start)):
        pygame.draw.line(screen, BLACK, line_start[idx], line_end[idx])

This creates a fild used for Tic Tac Toe game

def draw_red_line(i):
    y = 0
    while y < 300:
        pygame.draw.line(screen, RED, (i*100+50, 0), (i*100+50, y))
        pygame.display.flip()
        pygame.event.get()
        y+=1

This solution given by Selcuk messes up the game in a way i explained and other solutions are based around same method.

Answer 1

Create a function which can draw a line from a point s to a point e , dependent on a value p in range [0.0, 1.0]. If the value is 0, then no line is drawn. If the value is 1 the complete line is drawn. Else a part of the line is drawn:

def draw_red_line(s, e, p):
    x = s[0] * (1-p) + e[0] * p
    y = s[1] * (1-p) + e[1] * p
    pygame.draw.line(screen, RED, s, (round(x), round(y)))

You've 4 lines. Use a counter ( count ) which counts up from 0 to 4 by a small step (eg 0.01). The integral part of the counter states the number of lines which have to be draw completely and have to be persistent (remain):

for i in range(int(count)):
    draw_red_line(line_start[i], line_end[i], 1)

If the counter is less then 4, then the fraction part of the counter is used to draw the next line partially:

if count < 4:
    i = int(count)
    draw_red_line(line_start[i], line_end[i], count-i)
    count += 0.01

See the short example:

import pygame

pygame.init()
screen = pygame.display.set_mode((300,300))
clock = pygame.time.Clock()
RED = (255, 0, 0)

line_start = [(100, 0),   (200, 0),   (0, 100),   (0, 200)]
line_end   = [(100, 300), (200, 300), (300, 100), (300, 200)]

def draw_red_line(s, e, p):
    x = s[0] * (1-p) + e[0] * p
    y = s[1] * (1-p) + e[1] * p
    pygame.draw.line(screen, RED, s, (round(x), round(y)))

count=0
run = True
while run:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False

    screen.fill(0)

    for i in range(int(count)):
        draw_red_line(line_start[i], line_end[i], 1)
    if count < 4:
        i = int(count)
        draw_red_line(line_start[i], line_end[i], count-i)
        count += 0.01

    pygame.display.flip()

pygame.quit()