Original Article: Sorting Algorithm Visualizer in Python
In this project, we will a Sorting Algorithm Visualizar using Python and Tkinter. We'll visualize Bubble Sort and Merge Sort.
main.py will be our main Python file which we will execute. colors.py will contain some hexadecimal values of colors that we'll need. The file __init__.py, will allow the algorithms folder to act as a Python package.
In this file, we will store some hexadecimal values of colors as variables.
DARK_GRAY = '#65696B'
LIGHT_GRAY = '#C4C5BF'
BLUE = '#0CA8F6'
DARK_BLUE = '#4204CC'
WHITE = '#FFFFFF'
BLACK = '#000000'
RED = '#F22810'
YELLOW = '#F7E806'
PINK = '#F50BED'
LIGHT_GREEN = '#05F50E'
PURPLE = '#BF01FB'This file will be our main executable file.
First, we will import some stuff and set up a basic interface.
from tkinter import *
from tkinter import ttk
# Importing colors from colors.py that we made earlier
from colors import *
root = Tk()
root.title('Sorting Algorithms Visualization')
root.maxsize(1000, 700)
root.config(bg = WHITE)
root.mainloop()We will need random to create an array
import randomNow, we will add some variables and functions. We will edit the functions one by one. For now, we will just pass.
algo_list is to select which algorithm we want to use to sort
algorithm_name = StringVar()
algorithm_list = [
'Bubble Sort',
'Merge Sort',
'Selection Sort',
'Insertion Sort',
'Quick Sort',
'Counting Sort',
'Radix Sort',
'Heap Sort',
'Bucket Sort',
'Shell Sort'
]speed_list is for selecting sorting speed
speed_name = StringVar()
speed_list = ['Fast', 'Medium', 'Slow']This empty list will be filled with random values every time we generate a new array.
data = []This function will draw randomly generated list data[] on the canvas as vertical bars.
def draw_data(data, colorArray):
passThis function will generate an array with random values every time we hit the generate button.
def generate():
passThis function will set the sorting speed
def set_speed():
passThis function will trigger a selected algorithm and start sorting
def sort():
passNow we need few things:
-
Two dropdown menus, one to select the algorithm and one to select the sorting speed.
-
Two buttons, one to generate the array and one to start sorting.
-
A canvas to draw the array.
Let's add some code in the section of the user interface
UI_frame = Frame(root, width=900, height=300, bg=WHITE)
UI_frame.grid(row=0, column=0, padx=10, pady=5)Dropdown to select sorting algorithm
l1 = Label(UI_frame, text='Algorithm: ', bg=WHITE)
l1.grid(row=0, column=0, padx=10, pady=5, sticky=W)
algorithm_menu = ttk.Combobox(UI_frame, textvariable=algorithm_name, values=algorithm_list)
algorithm_menu.grid(row=0, column=1, padx=5, pady=5)
algorithm_menu.current(0)Dropdown to select sorting speed
l2 = Label(UI_frame, text='Sorting Speed: ', bg=WHITE)
l2.grid(row=1, column=0, padx=10, pady=5, sticky=W)
speed_menu = ttk.Combobox(UI_frame, textvariable=speed_name, values=speed_list)
speed_menu.grid(row=1, column=1, padx=5, pady=5)
speed_menu.current(0)Button for generating array
b1 = Button(UI_frame, text='Generate Array', command=generate, bg=LIGHT_GRAY, width=20)
b1.grid(row=2, column=0, padx=5, pady=5)Sort button
b2 = Button(UI_frame, text='Sort', command=sort, bg=LIGHT_GRAY, width=20)
b2.grid(row=2, column= 1, padx=5, pady=5)Canvas to draw our array
canvas = Canvas(root, width=800, height=400, bg=WHITE)
canvas.grid(row=1, column=0, padx=10, pady=5)Now it's time to fill up the functions that we left empty before.
This function will convert the elements of data[] into vertical bars and draw them into the window.
def draw_data(data, colorArray):
canvas.delete('all')
canvas_width = 800
canvas_height = 400
x_width = canvas_width / (len(data) + 1)
offset = 4
spacing = 2
normalizedData = [i / max(data) for i in data]
for i, height in enumerate(normalizedData):
x0 = i * x_width + offset + spacing
y0 = canvas_height - height * 390
x1 = (i + 1) * x_width + offset
y1 = canvas_height
canvas.create_rectangle(x0, y0, x1, y1, fill=colorArray[i])
root.update_idletasks()The generate() function which will create an array with random values with the help of random module. After creating the array we will store them in data[]. Then we will call the draw_data() function from this function.
def generate():
global data
data = []
for i in range(0, 100):
random_value = random.randint(1, 150)
data.append(random_value)
draw_data(data, [BLUE for x in range(len(data))])This function will determine how fast or slow we want to see the sorting comparisons.
def set_speed():
if speed_menu.get() == 'Slow':
return 0.3
elif speed_menu.get() == 'Medium':
return 0.1
else:
return 0.001We will import the algorithms in main.py.
from algorithms.bubbleSort import bubble_sort
from algorithms.mergeSort import merge_sort
from algorithms.selectionSort import selection_sort
from algorithms.insertionSort import insertion_sort
from algorithms.quickSort import quick_sort
from algorithms.countingSort import counting_sort
from algorithms.radixSort import radix_sort
from algorithms.heapSort import heap_sort
from algorithms.bucketSort import bucket_sort
from algorithms.shellSort import shell_sortdef sort():
global data
time_tick = set_speed()
if algorithm_menu.get() == 'Bubble Sort':
bubble_sort(data, draw_data, time_tick)
elif algorithm_menu.get() == 'Merge Sort':
merge_sort(data, 0, len(data)-1, draw_data, time_tick)
elif algorithm_menu.get() == 'Selection Sort':
selection_sort(data, draw_data, time_tick)
elif algorithm_menu.get() == 'Insertion Sort':
insertion_sort(data, draw_data, time_tick)
elif algorithm_menu.get() == 'Quick Sort':
quick_sort(data, 0, len(data)-1, draw_data, time_tick)
elif algorithm_menu.get() == 'Counting Sort':
counting_sort(data, draw_data, time_tick)
elif algorithm_menu.get() == 'Radix Sort':
radix_sort(data, draw_data, time_tick)
elif algorithm_menu.get() == 'Heap Sort':
heap_sort(data, draw_data, time_tick)
elif algorithm_menu.get() == 'Bucket Sort':
bucket_sort(data, len(data), draw_data, time_tick)
elif algorithm_menu.get() == 'Shell Sort':
shell_sort(data, draw_data, time_tick)
else:
passShadhin, F. (2021, 21 junio). Build a Sorting Algorithm Visualizer in Python - Python in Plain English. Medium. https://python.plainenglish.io/build-a-sorting-algorithm-visualizer-in-python-f6f4afb1c98a
Bubble Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/bubble-sort/tutorial/
Merge Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/merge-sort/tutorial/
Selection Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/selection-sort/tutorial/
Insertion Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/insertion-sort/tutorial/
Quick Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/quick-sort/tutorial/
Counting Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/counting-sort/tutorial/
Radix Sort Tutorials & Notes | Algorithms. (2016, 27 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/radix-sort/tutorial/
GeeksforGeeks. (2021, 15 junio). Radix Sort. https://www.geeksforgeeks.org/radix-sort/
Heap Sort Tutorials & Notes | Algorithms. (2016, 24 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/heap-sort/tutorial/
GeeksforGeeks. (2020, 30 diciembre). Python Program for Heap Sort. https://www.geeksforgeeks.org/python-program-for-heap-sort/
Bucket Sort Tutorials & Notes | Algorithms. (2016, 24 abril). HackerEarth. https://www.hackerearth.com/practice/algorithms/sorting/bucket-sort/tutorial/
GeeksforGeeks. (2021, 8 junio). Bucket Sort. https://www.geeksforgeeks.org/bucket-sort-2/
GeeksforGeeks. (2021, 28 junio). ShellSort. https://www.geeksforgeeks.org/shellsort/