python - How to slow down the sorting in a sorting visualizer? for better clarity?

Question

I am making a sorting algorithm visualizer, I have just managed to complete the bubble sort. So the problem is that the graph sorts instantly.

Minimal Code:

import PySimpleGUI as sg 
from random import randint 
from time import sleep
sg.theme('Dark')


hlayout1 = #LAYOUT FOR THE WINDOW

window = sg.Window('Sort Visualizer',hlayout1)


while True:
    event,value = window.read()
    if event == sg.WINDOW_CLOSED:
        break
    if event == '--[RANDOM]--':
        #Generates a random array to the Graph. 
    if event=='--[SORT]--':     
        n = len(array) 
        for i in range(n): 
            swapped = False
            for j in range(0, n-1):  
                if array[j] > array[j+1] : 
                    array[j], array[j+1] = array[j+1], array[j]
                    
                    #Need to do something here.... Lets refer this as A
                    
                    swapped = True
            # IF no two elements were swapped 
            # by inner loop, then break 
            if swapped == False: 
                break
        canvas.erase()                           #These three lines refresh the 
        for idx,i in enumerate(array):           #graph, Lets refer this as 
            canvas.draw_line((idx+5,0),(idx+5,i))#Refresher
window.close()

What I have Tried-

1. time.sleep() and move the refresher lines into the Block A
2. PySimpleGui.Graph's method - Graph.move_figure in A
3. And using a tkinter canvas with Pysimplegui.

But in all of these I see that array lags for 3-4 minutes and snaps instantly to the sorted position. I don't have problem sorting the lines just making it slightly more interactive

Maybe the problem lies in my old laptop not being able to render it properly. Since I move the Refresher to to A its a loop inside a loop inside a loop. And if its gonna snap to the sorted positions then its better to use array.sort()? It will use less iterations and will be more efficient. A online tutorial on geeks for geeks uses Pygame and its time.delay() function. Should I drop Pysimplegui and use Pygame to make the same thing?

question from:https://stackoverflow.com/questions/66060023/how-to-slow-down-the-sorting-in-a-sorting-visualizer-for-better-clarity

Answer 1

In GUI event loop, GUI refresh only at when window.read(). Any change on GUI will not be updated during one event loop, and after all steps of your sorting completed, you can only find the last state of GUI.

If you want each step shown when something changed in GUI, what you need is to add one statement after you change GUI, like

graph = window['-GRAPH-']
graph.move_figure(figure, x_direction, y_direction)
window.refresh()

Then it will show you each step.