Visualizing Bubble Sort using Tkinter in Python

In this article, we will use the Python GUI Library Tkinter to visualize the Bubble Sort algorithm. 

• Tkinter is a very easy to use and beginner-friendly GUI library that can be used to visualize the sorting algorithms.
• Here Bubble Sort Algorithm is visualized which works by repeatedly swapping the adjacent elements/values if they are in the wrong order until the whole array is sorted.
• The idea is that : if arr[i] > arr[i+1] then swap them.
• In the first iteration, N-1 items have to be scanned and the largest element moves to its right position. In the second iteration, the second largest item will move to its correct position, and after the third iteration (stopping at item N-3) the third largest will be in place.  Therefore, to place all the elements in the correct order the above operation is performed N-1 times. This algorithm has Time Complexity = O(N²).

Procedure:

1. A list of random values within a specified range is generated as bars.
2. Different colors (red and green) are used to show the sorting process.
3. A suitable “Speed” range bar is created for the ease of the user to visualize.
4. “Generate” and “Start” buttons are created separately for the creation of data bars and initiation of the sorting process.

Extension Code for Bubble Sort :

This is the extension code for the bubble sort algorithm which is imported in the main Tkinter visualizer code to implement the bubble sort algorithm and return the sorted result. 

Python3

# Extension Bubble Sort Code
# importing time module
import time

# function to implement bubble sort by passing
# the following parameters:
# data is passed for the set of unsorted data values
# drawdata is used to generate the data bars
# timer is for the speed range
def bubble(data, drawData, timer):
    n = len(data)

    for i in range(n):
        for j in range(0, n-i-1):

            if data[j] > data[j+1]:
                data[j], data[j+1] = data[j+1], data[j]

                # if swapped then color becomes Green else stays Red
                drawData(data, ['Green' if x == j +
                                1 else 'Red' for x in range(len(data))])
                time.sleep(timer)

    # sorted elements generated with Green color
    drawData(data, ['Green' for x in range(len(data))])

Code for Tkinter :

In this code, we are generating the data values as bars of different lengths and a particular color. The basic layout is designed in a Tkinter ‘Frame’ and the portion when the bars are generated and the algorithm is visualized is designed in a Tkinter ‘Canvas’.

The code essentially has the following components:

1. Mainframe: a Tkinter frame to arrange all the necessary components(labels, buttons, speed bar, etc.) in an organized manner
2. Canvas: A Tkinter canvas used as the space where the generated data bars are drawn and the sorting process is visualized
3. generate(): Method to generate the data values by accepting a range and then passing that as a parameter to the drawData() function
4. drawData():  Method to generate bars to normalized data values(within the given range) of a particular color on the canvas
5. start_algorithm(): This function is called when the “START” button is pressed. It initiates the sorting process by calling the bubble() function from the Bubble Sort Extension Code.

Python3

# code for Bubble Sort Visualizer using Python and Tkinter
from tkinter import *
from tkinter import ttk
import random
from bub_srt import bubble

# initialising root class for Tkinter
root = Tk()
root.title("Bubble Sort Visualizer")

# maximum window size
root.maxsize(900, 600)
root.config(bg="Black")
select_alg = StringVar()
data = []

# function to generate the data values by accepting a given range
def generate():
    global data

    # minval : minimum value of the range
    minval = int(minEntry.get())

    # maxval : maximum value of the range
    maxval = int(maxEntry.get())

    # sizeval : number of data values/bars to be generated
    sizeval = int(sizeEntry.get())

    # creating a blank data list which will be further
    # filled with random data values
    # within the entered range
    data = []
    for _ in range(sizeval):
        data.append(random.randrange(minval, maxval+1))

    drawData(data, ['Red' for x in range(len(data))])

# function to create the data bars by creating a canvas in Tkinter
def drawData(data, colorlist):
    canvas.delete("all")
    can_height = 380
    can_width = 550
    x_width = can_width/(len(data) + 1)
    offset = 30
    spacing = 10

    # normalizing data for rescaling real-valued numeric data within the
    # given range
    normalized_data = [i / max(data) for i in data]

    for i, height in enumerate(normalized_data):
        # top left corner
        x0 = i*x_width + offset + spacing
        y0 = can_height - height*340

        # bottom right corner
        x1 = ((i+1)*x_width) + offset
        y1 = can_height

        # data bars are generated as Red colored vertical rectangles
        canvas.create_rectangle(x0, y0, x1, y1, fill=colorlist[i])
        canvas.create_text(x0+2, y0, anchor=SE, text=str(data[i]))
    root.update_idletasks()

# function to initiate the sorting process by
# calling the extension code
def start_algorithm():
    global data
    bubble(data, drawData, speedbar.get())


# creating main user interface frame and
# basic layout by creating a frame
Mainframe = Frame(root, width=600, height=200, bg="Grey")
Mainframe.grid(row=0, column=0, padx=10, pady=5)

canvas = Canvas(root, width=600, height=380, bg="Grey")
canvas.grid(row=1, column=0, padx=10, pady=5)

# creating user interface area in grid manner
# first row components
Label(Mainframe, text="ALGORITHM", bg='Grey').grid(
    row=0, column=0, padx=5, pady=5, sticky=W)

# algorithm menu for showing the name of the sorting algorithm
algmenu = ttk.Combobox(
    Mainframe, textvariable=select_alg, values=["Bubble Sort"])
algmenu.grid(row=0, column=1, padx=5, pady=5)
algmenu.current(0)

# creating Start Button to start the sorting visualization process
Button(Mainframe, text="START", bg="Blue", command=start_algorithm).grid(
    row=1, column=3, padx=5, pady=5)

# creating Speed Bar using scale in Tkinter
speedbar = Scale(Mainframe, from_=0.10, to=2.0, length=100, digits=2,
                 resolution=0.2, orient=HORIZONTAL, label="Select Speed")
speedbar.grid(row=0, column=2, padx=5, pady=5)


# second row components
# sizeEntry : scale to select the size/number of data bars
sizeEntry = Scale(Mainframe, from_=3, to=60, resolution=1,
                  orient=HORIZONTAL, label="Size")
sizeEntry.grid(row=1, column=0, padx=5, pady=5)

# minEntry : scale to select the minimum value of data bars
minEntry = Scale(Mainframe, from_=0, to=10, resolution=1,
                 orient=HORIZONTAL, label="Minimum Value")
minEntry.grid(row=1, column=1, padx=5, pady=5)

# maxEntry : scale to select the maximum value of data bars
maxEntry = Scale(Mainframe, from_=10, to=100, resolution=1,
                 orient=HORIZONTAL, label="Maximum Value")
maxEntry.grid(row=1, column=2, padx=5, pady=5)

# creating generate button
Button(Mainframe, text="Generate", bg="Red", command=generate).grid(
    row=0, column=3, padx=5, pady=5)

# to stop automatic window termination
root.mainloop()

Output :