Bubble sort animation for education

This code will represent graphically how bubble sort takes place. It can be used for educational purpose. I will try to write code for other algorithms as well.

Main

supportedOrientations(PORTRAIT_ANY)
displayMode(FULLSCREEN)

-- Use this function to perform your initial setup
function setup()
    
    
    
    local img = makeArrowImage()
    local img2 = makeDownArrow()
    saveImage("Documents:Arrow", img)
    saveImage("Documents:Arrowdn", img2)
    pointerImage = readImage( "Documents:Arrow" )
    pointerImage2 = readImage( "Documents:Arrowdn" )
    
    array = {10,4,6,1,8,7,10,2,5,9}
    
    
    position= {}
    for i=1, table.maxn(array)do
        position[i] = {x=0,y=0}
    end
    
    i = 1
    j = 2  
    swaped = false
    swapping = false
   
    lastActioned = ElapsedTime   
    
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(255, 255, 255, 255)   
    bubbleSort()          
end

function makeDownArrow()

    local img = image(400,400)
    
    setContext(img)
    background(0,0,0,0) 
    strokeWidth(40)
    stroke(49, 95, 49, 255)
    lineCapMode(SQUARE)
    line(200,400,200,0)
    line(150,200,200,0)
    line(200,0,250,200)
    setContext()
    
    return img
end

function makeArrowImage()

    local img = image(400,400)
    
    setContext(img)
    background(0,0,0,0) 
    strokeWidth(30)
    stroke(0, 0, 0, 255)
    lineCapMode(SQUARE)
    line(200,400,200,0)
    line(150,200,200,400)
    line(200,400,250,200)
    setContext()
    
    return img
end

BubbleSort

si = 0
sj = 0
step = 1
temp = "X"

function bubbleSort()
 
    -- Draws array in every frame --
    fill(75, 90, 122, 255)
    font("HelveticaNeue-CondensedBlack")
    fontSize(60)
    text("Bubble Sort",WIDTH/2,HEIGHT-50)
    printAlgorithm()
    drawArray() 
        
    ------ bubble sort logic ------------  
    -- this part of cod will be executed in every 1 second to represent the sorting procedure --
    --========================================================================================--
    if ElapsedTime - lastActioned > 1 and not swapping then 
        
        
        if i <= table.maxn(array)-1 then            
            if j <= table.maxn(array) then
                if array[i] > array[j] then
                    swapping = true -- when swapping is true then swap will take place
                    lastSwaped  = ElapsedTime
                    si = i
                    sj = j
                    step = 1
                    --tmp = array[i]
                    --array[i] = array[j]
                    --array[j] = tmp
                    --swaped = true
                end
                          
                ---- increment of index i and j ----
                if swaped then
                    swaped = false
                elseif not swapping then
                    j=j+1
                end
                
                if j > table.maxn(array) then
                    i = i + 1
                    if i < table.maxn(array) -1 then
                        j = i + 1
                    else
                        i = table.maxn(array) -1
                        j = table.maxn(array)
                    end
                end  
                ---------------------------------------
            end
        end                               
    lastActioned = ElapsedTime    
    end    
    --========================================================================================--
    --Swapping will take place in the following code.
    --=========================================================================================--
    if swapping and ElapsedTime - lastSwaped >1 then
        if step == 1 then     
            temp = array[si]
            step = 2
        elseif step == 2 then  
            array[si] = array[sj]
            step = 3
        else      
            array[sj] = temp
            step = 0
            si = 0
            sj = 0
            temp = "X"
            swapping = false
        end
        lastSwaped = ElapsedTime
    end
end



function drawArray()
    
    rectMode(CENTER)
    textMode(CENTER)
    
    x = WIDTH/4
    y = HEIGHT-HEIGHT/6
    
    font("HelveticaNeue-CondensedBold")
    fontSize(40)
    text("array: ", x-100,y)
    
    for ind=1, table.maxn(array) do
        
        strokeWidth(3)
        stroke(64, 64, 122, 255)
        font("Arial-BoldMT")
        fontSize(25)
        
        w,h = textSize(array[ind]) 
        w1,h1 = textSize(array[ind+1])
        
        fill(223, 223, 223, 247)
        rect(x,y,w+25,h+10)
        position[ind].x = x
        position[ind].y = y
        fill(0, 0, 0, 255)
        text(array[ind],x,y)
        
        font("Inconsolata")
        fill(107, 107, 107, 255)
        
        fontSize(20)
        
        text("i="..i,position[i].x,position[i].y-1.3*h-30)
        text("j="..j,position[j].x,position[j].y-1.3*h -30)
        
        --sprite("Documents:arrup",position[i].x,position[i].y-1.2*h,25,40)  
        --sprite("Documents:arrdn",position[j].x,position[j].y-1.2*h,25,40)
        

        sprite("Documents:Arrow",position[i].x,position[i].y-1.3*h,40,30)  
        sprite("Documents:Arrow",position[j].x,position[j].y-1.3*h,40,30)
        
        
        
        x = x + w/2 + 26 + w1/2
           
    end
    
    if swapping then
        if step == 1 or step == 2 then
            fill(255, 255, 255, 255)
            rect(position[i].x,position[i].y-3.5*h,50,50)
            fill(11, 36, 245, 255)
            text(temp,position[i].x,position[i].y-3.5*h)
            fill(0, 0, 0, 255)
            text("temp",position[i].x,position[i].y-4.5*h)
            if step == 2 then
                
                
                sprite("Documents:Arrowdn",position[i].x,position[i].y+1.3*h,40,30)
                lineCapMode(CIRCLE)
                strokeWidth(6)
                stroke(49,95,49,255)
                line(position[j].x,position[j].y+h/2+5,position[j].x,position[j].y+1.3*h+15)
                
                
                line(position[i].x,position[i].y+1.3*h+15,position[j].x,position[j].y+1.3*h+15)
            end
        elseif step == 3 then
            fill(255, 255, 255, 255)
            rect(position[j].x,position[j].y-3.5*h,50,50)
            fill(11, 36, 245, 255)
            text(temp,position[j].x,position[j].y-3.5*h)
            fill(0, 0, 0, 255)
            text("temp",position[j].x,position[j].y-4.5*h)
        end
        
    end
end

function printAlgorithm()
    l1 = "for i=1 to N-1 do"
    l2 = "for j=i+1 to N do"
    l3 = "if array[i]>array[j] then"
    l4 = "temp = array[i]"
    l5 = "array[i] = array[j]"
    l6 = "array[j] = temp"
    l7 = "endif"
    l8 = "endfor"
    l9 = "endfor"
    
 
    
    left = 70
    top = HEIGHT*0.55
    
    textMode(CORNER)
    textAlign(LEFT)
    font("AmericanTypewriter-Bold")
    fontSize(25)
    fill(0, 0, 0, 255)
    text("Pseudocode:",left,top+40)
    text("Performance:",WIDTH/2+50,top+40)
    
    
    textAlign(LEFT)
    font("Inconsolata")
    fontSize(16)
    fill(0, 0, 0, 255)
    
    text(l1,left,top)
    text(l2,left+20,top-20)
    text(l3,left+40,top-40)
    text(l4,left+60,top-60)
    text(l5,left+60,top-80)
    text(l6,left+60,top-100)
    text(l7,left+40,top-120)
    text(l8,left+20,top-140)
    text(l9,left,top-160)
    
    left = WIDTH/2+50
    fontSize(16)
    l1 = "Worst case performance: O(n^2)"
    l2 = "Best case performance: O(n)"
    l3 = "Average case performance: O(n^2)"
    l4 = "Worst case space complexity: O(1)"
    text(l1, left, top)
    text(l2, left, top-20)
    text(l3, left, top-40)
    text(l4, left, top-60)
end

Great visualization effort. However:

This is not bubble sort as it would be genuinely identifiable by its bubbles.