Bubble Sort Visualizer in Python using PyGame
Today we are going to develop PyGame Bubble Sort Visualizer project. Let’s start!!!
About Bubble Sort Visualizer:
Consider a telephone directory containing phone numbers in random order. Since the listing is random, finding specific information is going to be time-consuming and laborious. The same task can be easy to perform when the directory is alphabetically ordered. This is where Sorting comes to play. Sorting is a technique that aids searching for necessary information by ordering elements of consideration in increasing the order of numbers or alphabets.
Python Bubble Sort Visualizer:
The objective of this project is to create bubble sort visualizer using pygame.
The PyGame Bubble Sort Visualizer project uses pygame, a built-in module in python. It is helpful to understand loops and function calls. Since it is built-in, it is good to check if the module is installed using the following commands
import pygame pygame.__version__
This command displays the pygame version. In case the module is missing, an error will pop up. Thus install pygame using pip3: pip3 install pygame
Download Python Bubble Sort Visualizer code:
Please download the source code of python bubble sort visualizer: Bubble Sort Using Pygame
Project File Structure:
Let’s have a look at the steps to build the Bubble Sort Vizualizer project:
- Importing necessary modules: pygame
- Initialising pygame and creating a window with the declaration of necessary variables
- Defining functions to draw rectangles, show texts and implement bubble sort
- Taking user input and visualization of bubble sort
Now for the implementation in detail.
Feel free to play with the values and change your input methods.
1. Importing necessary modules:
#ProjectGurukul's Guide for Visualization Of Bubble Sort using Python #Import necessary modules import pygame
- Import pygame: Pygame is an open source library to create games and do other multimedia tasks. It provides functions to create windows, shapes, read keyboard and mouse events using which we can do functions or tasks.
2. Initialising pygame and creating a window with declaration of necessary variables:
#Initialise pygame window pygame.init() array1 = "" array = #Define screen dimensions, declare font for viewing text screen = pygame.display.set_mode((700,500)) font = pygame.font.SysFont('ubuntu mono', 20) run = True
- pygame.init(): Initialise pygame to create a window for viewing bubble sort
- array=, array1=”: Declare a list, array, to contain the user input. Similarly array1 is an empty string
- pygame.display.set_mode((500,500)): Create a window with the dimensions(500,500)
- pygame.font.Font(None, 25): Initialise a font variable of the font type None, with size 25. Here None implies the default system font. If the ttf file for a font is present, it can substitute None. Alternatively, to provide with a predefined font, use the function SysFont(font_name, size)
- run: A variable to terminate the loop and close the window
3. Defining functions to draw rectangles, show texts and implement bubble sort:
#Function to show text def show_text(array): #Create a new screen screen.fill((0,0,150,0)) #Use the font to display the array block = font.render(str(array), True, (255,255,150)) #Display the array screen.blit(block, (20,20)) #Function to draw rectangles def draw_rect(): for i in range(len(array)): #Draw rectangles using array elements #To maintain gaps between rectangles, mention the top coordinate more than the width pygame.draw.rect(screen, (255, 125, 0),((50+i*25,50, 20, array[i]*2))) pygame.display.update() #Function to implement bubble sort Implementer using PyGame def bubble_sort(): for i in range(len(array)): for j in range(len(array)-1): #Compare every element with every other element and switch places if array[j] > array[j+1]: array[j], array[j+1] = array[j+1], array[j] #Display the array array1 = [str(i) for i in array] array1=",".join(array1) show_text(array1) #Draw the rectangular boxes draw_rect() #Keep a delay between changes pygame.time.delay(500) #Display the changes made pygame.display.update()
- show_text: To receive user input, the user must be able to see what he types. Hence this function displays or renders the array on a screen. Fill the screen with color in the format (r,g,b,a) or by typing the color name. Next using the initialised font, we prepare to render it using render(text_to_display, True, (color)), following which screen.blit(rendered_text, (position)) displays the text
- draw_rect(): This function draws rectangles on the screen. The length of rectangles correspond to the values in the user input. To maintain distance between the rectangles, a distance greater than the width is set for the top left coordinate. Here we add 5 as the distance between rectangles. To reflect the changes on the screen, call pygame.display.update()
- bubble_sort(): Implement bubble sort here. The array elements are compared with one another and swapped if the former element is greater than the latter. After sorting, convert the array to a string of numbers and join them using ‘,’.join(array1). show_text() is called to display the array changes. To display the rectangles, call draw_rect() and set a delay between changes using pygame.time.delay(500). Then view the changes using pygame.display.update()
4. Taking user input and visualization of bubble sort:
#Since changes keep happening, a loop is used while run == True: #Detect keyboard press for event in pygame.event.get(): #Keyboard press condition if event.type == pygame.KEYDOWN: #Spacebar press if event.key == pygame.K_RETURN: #Start visualising and sorting #Convert string to array by splitting the string array = array1.split(",") array = [int(i) for i in array] draw_rect() pygame.time.delay(3000) bubble_sort() elif event.key == pygame.K_BACKSPACE: #Remove last element in case of any changes array1 = array1[:-1] else: #Check if the keyboard press is a digit array1+=event.unicode show_text(array1) pygame.display.update() #Check if pygame exit is selected elif event.type == pygame.QUIT: run= False #Quit and close the window pygame.quit()
- Run == True: To continue viewing the visualization, run has to be set to True.
- for event in pygame.event.get(): Detect user events such as mouse clicks, mouse movements, keyboard key clicks
- event.type == pygame.KEYDOWN: To check if the event is a keyboard key press.
- event.key == pygame.K_RETURN: Checks if enter is pressed. The array (string) is split to a list using split() and converted to integer elements using int() and then sorting starts after displaying rectangles initially following which a delay happens.
- event.key == pygame.K_BACKSPACE: To delete the last element in the list using array1[:-1]. To remove the last element, index is set to -1.
- else condition: The user input is taken here. Append the user input to the string array1. Call show_text(array1) to display it to the user
- event.type == pygame.QUIT: If the user selects the close window option, the flag run is set to False and the loop terminates.
- pygame.quit(): To close the window and quit the initialised pygame, pygame.quit() is used.
#Initially fill the screen black screen.fill((0,0,0,0)) block = font.render("ProjectGurukul's Guide for Visualization Of Bubble Sort", True, (255,0,150)) screen.blit(block, (0,20)) block1 = font.render("Enter Input and press ENTER to visualize", True, (255,255,150)) screen.blit(block1, (0,40)) block2 = font.render("Add comma to separate the integers and backspace to pop", True, (255,255,150)) screen.blit(block2, (0,60)) pygame.display.update()
This snippet of code is optional
- screen.fill((0,0,0,0)): Fill the screen black whilst displaying initial texts
Bubble Sort Visualization Project Output
Thus using pygame, we created a simple Bubble Sort Visualizer. The project proves to be a great introduction and a fun opportunity to play with values and shapes creating amazing visualizers.