pygame display doesn't update after initial array drawing

Question

I started working on a sorting algorithm visualization tool as a side project. I don't know about the rules of uploading multiple files here so apologize in advance if I broke the rules.

project layout:

directory - geometry: point.py , line.py

main.py

so to the files:

point.py:

class Point:
    def __init__(self,x, y):
        self.x = x
        self.y = y

    def get_x(self):
        return self.x

    def get_y(self):
        return self.y

    def set_x(self, new_x):
        self.x = new_x

    def set_y(self, new_y):
        self.y = new_y

next is line.py:

from geometry.point import Point
import pygame as pg

class Line:

    def __init__(self, start_point, end_point, color, width):
        self.start = start_point
        self.end = end_point
        self.size = self.start.get_y() - self.end.get_y()
        self.color = color
        self.width = width

    def get_start(self):
        return self.start

    def get_end(self):
        return self.end

    def get_size(self):
        return self.size

    def get_color(self):
        return self.color

    def draw_on_board(self, window):
        pg.draw.line(window, self.color, (self.start.get_x(), self.start.get_y()), (self.end.get_x(), self.end.get_y()), self.width)

    def set_start(self, new_start):
        self.start = new_start
        self.size = self.start.get_y() - self.end.get_y()

    def set_end(self, new_end):
        self.end = new_end
        self.size = self.start.get_y() - self.end.get_y()

lastly, main.py:

import sys
from geometry.point import Point
from geometry.line import Line
import random
import time
import os
import pygame

pygame.init()
WIN_WIDTH = 1280
WIN_HEIGHT = 720
window_size = (WIN_WIDTH, WIN_HEIGHT)
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
LINE_COLOR = (153, 255, 51)
gap = 10
start = 10
end = 500
line_width = 5
window = pygame.display.set_mode(window_size)
pygame.display.set_caption("Sorting Algorithms Visualization")


def draw_background(win):
    win.fill(WHITE)

def create_arr_and_lines():
    x_start = 250
    y_start = WIN_HEIGHT - gap * 5
    numbers = list(range(gap, end + gap * 5, gap))
    shuffle_array(numbers)
    lines = []
    for i in range(len(numbers)):
        start_point = Point(x_start + gap * i, y_start)
        end_point = Point(x_start + gap * i, y_start - numbers[i])
        line = Line(start_point, end_point, VALUE_COLOR, line_width)
        lines.append(line)
    return lines


def print_arr(lines, win):
    draw_background(win)
    for line in lines:
        line.draw_on_board(win)
    pygame.display.flip()


def bubble_sort(lines, win):
    n = len(lines)
    for i in range(n):
        for j in range(n - i - 1):
            if lines[j].get_end().get_y() < lines[j+1].get_end().get_y():
                lines[j], lines[j+1] = lines[j+1], lines[j]
                print_arr(lines, win)
            pygame.display.flip()
            time.sleep(0.005)


def shuffle_array(arr):
    random.shuffle(arr)


def main():
    
    lines = create_arr_and_lines()
    running = True
    done_sorting = False
    while running:
        if done_sorting:
            print_arr(lines, window)
            pygame.display.update()
            time.sleep(2)
            running = False
        print_arr(lines, window)
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                running = False
                pygame.quit()
                sys.exit()
            elif event.type == pygame.MOUSEBUTTONDOWN:
                if not done_sorting:
                    bubble_sort(lines, window)
                    done_sorting = True

            else:
                continue

        pygame.display.update()


main()

again, apologies for the long post, does anyone know why the display doesn't update once the sorting starts? (meaning after I press the mouse button down) thanks in advance!

Answer 1

The bubble sort is working correctly, and the lines are moving in the list. The problem is that the x values of the lines never change.

Try this code:

def bubble_sort(lines, win):
    n = len(lines)
    for i in range(n):
        for event in pygame.event.get():
           if event.type == pygame.QUIT: return
        for j in range(n - i - 1):
            if lines[j].get_end().get_y() < lines[j+1].get_end().get_y():
                lines[j], lines[j+1] = lines[j+1], lines[j]
                for i,ln in enumerate(lines):  # update x coordinates
                   ln.start.x = 250 + gap * i
                   ln.end.x = 250 + gap * i
                print_arr(lines, win)
            time.sleep(0.01)

Answer 2

I think it's because you are using display.flip() twice both in print_arr() and in bubble sort . So screen gets updated once inside the if clause and once it gets out of the if clause . Thus the last update vanishes . Maybe try removeing the display.flip() in bubble sort for loop.

def bubble_sort(lines, win):
    n = len(lines)
    for i in range(n):
        for j in range(n - i - 1):
            if lines[j].get_end().get_y() < lines[j+1].get_end().get_y():
                lines[j], lines[j+1] = lines[j+1], lines[j]
                print_arr(lines, win) #flip() gets called at end of it
            pygame.display.flip()  #remove it
            time.sleep(0.005)