Sorting Algorithm Visualization : Merge Sort

The human brain can easily process visuals instead of long codes to understand the algorithms. In this article, a program that program visualizes the Merge sort Algorithm has been implemented.

The GUI(Graphical User Interface) is implemented using pygame package in python.

Approach:



  • An array of random values is generated and are drawn as lines(bars) in the window .
  • Different colors are used to indicate which elements being compared, sorted and unsorted.
  • Since the algorithm performs the operation very fast, pygame.time.delay() has been used to slow down the process.
  • New array can be generated by pressing ‘r’ key.
  • The actions are performed using ‘pygame.event.get()’ method, which stores all the events which user performs.
  • Examples:

    Input :
    Press “Enter” key to Perform Visualization.
    Press “r” key to generate new array.
    Output :
    Initial:

    Visualizing:

    Final:

    Below is the program to visualize the Merge Sort algorithm:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    # Python implementation for visualizing merge sort. 
    import pygame
    import random
    pygame.font.init()
    # Total window
    screen = pygame.display.set_mode((900, 650))
      
    # Title and Icon 
    pygame.display.set_caption("SORTING VISUALISER")
    # Place any custom png file in same folder as the source code
    # and mention it below and uncomment below two lines.
    # img = pygame.image.load
    ('E:/Projects / Sorting Visualiser / sorticon.png')
    # pygame.display.set_icon(img)
      
    # Boolean variable to run the program in while loop
    run = True
      
    # Window size
    width = 900
    length = 600
    array =[0]*151
    arr_clr =[(0, 204, 102)]*151
    clr_ind = 0
    clr =[(0, 204, 102), (255, 0, 0), 
    (0, 0, 153), (255, 102, 0)]
    fnt = pygame.font.SysFont("comicsans", 30)
    fnt1 = pygame.font.SysFont("comicsans", 20)
    # Generate new Array
    def generate_arr():
        for i in range(1, 151):
            arr_clr[i]= clr[0]
            array[i]= random.randrange(1, 100)
    generate_arr() 
    def refill():
        screen.fill((255, 255, 255))
        draw()
        pygame.display.update()
        pygame.time.delay(20)
      
    # Sorting Algo:Merge sort
    def mergesort(array, l, r):
        mid =(l + r)//2
        if l<r:
            mergesort(array, l, mid)
            mergesort(array, mid + 1, r)
            merge(array, l, mid,
                  mid + 1, r)
    def merge(array, x1, y1, x2, y2):
        i = x1
        j = x2
        temp =[]
        pygame.event.pump() 
        while i<= y1 and j<= y2:
            arr_clr[i]= clr[1]
            arr_clr[j]= clr[1]
            refill()
            arr_clr[i]= clr[0]
            arr_clr[j]= clr[0]
            if array[i]<array[j]:
                    temp.append(array[i])
                    i+= 1
            else:
                    temp.append(array[j])
                    j+= 1
        while i<= y1:
            arr_clr[i]= clr[1]
            refill()
            arr_clr[i]= clr[0]
            temp.append(array[i])
            i+= 1
        while j<= y2:
            arr_clr[j]= clr[1]
            refill()
            arr_clr[j]= clr[0]
            temp.append(array[j])
            j+= 1
        j = 0       
        for i in range(x1, y2 + 1):  
            pygame.event.pump()  
            array[i]= temp[j]
            j+= 1
            arr_clr[i]= clr[2]
            refill()
            if y2-x1 == len(array)-2:
                arr_clr[i]= clr[3]
            else:    
                arr_clr[i]= clr[0]
      
    # Draw the array values
    def draw():
        # Text should be rendered
        txt = fnt.render
    ("PRESS 'ENTER' TO PERFORM SORTING.", 1, (0, 0, 0))
        # Position where text is placed
        screen.blit(txt, (20, 20))
        txt1 = fnt.render("PRESS 'R' FOR NEW ARRAY.",
                           1, (0, 0, 0))
        screen.blit(txt1, (20, 40))
        txt2 = fnt1.render("ALGORITHM USED: 
                           MERGE SORT", 1, (0, 0, 0))
        screen.blit(txt2, (600, 60))
        element_width =(width-150)//150
        boundry_arr = 900 / 150
        boundry_grp = 550 / 100
        pygame.draw.line(screen, (0, 0, 0), 
                        (0, 95), (900, 95), 6)
        for i in range(1, 100):
            pygame.draw.line(screen, 
                            (224, 224, 224), 
                            (0, boundry_grp * i + 100), 
                            (900, boundry_grp * i + 100), 1)
          
        # Drawing the array values as lines
        for  i in range(1, 151):
            pygame.draw.line(screen, arr_clr[i], 
                            (boundry_arr * i-3, 100), 
                            (boundry_arr * i-3, array[i]*boundry_grp + 100),
                            element_width)
      
    # Infinite loop to keep the window open
    while run:
        # background
        screen.fill((255, 255, 255))
        # Event handler stores all event 
        for event in pygame.event.get():
            # If we click Close button in window
            if event.type == pygame.QUIT:
                run = False
            if event.type == pygame.KEYDOWN:
                if event.key == pygame.K_r:
                    generate_arr() 
                if event.key == pygame.K_RETURN:
                    mergesort(array, 1, len(array)-1)       
        draw()
        pygame.display.update()
         
    pygame.quit()

    chevron_right

    
    

    Output:

    
    

    GeeksforGeeks has prepared a complete interview preparation course with premium videos, theory, practice problems, TA support and many more features. Please refer Placement 100 for details




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.