Algorithm Visualiser

This project helped me to understand generative functions in JavaScript, as well as solidify my knowledge in searching and sorting algorithms. This project also stands as a resource for people wanting to get a visual representation of these algorithms.

The project first started off using the <canvas> element and getting basic shapes to be drawn. From there I used the width of the canvas to calculate the width of the bars and used the height of the canvas to calculate the height.

				function drawBars(colour){
    var barWidth = (canvas.width / arr.length);
    var barHeight = (canvas.height / arr.length);

    for(let i = 0; i < arr.length; i++){
        ctx.fillStyle = colour;
        ctx.fillRect((barWidth * i) + 1, (canvas.height - (barHeight * arr[i])), barWidth - 1, barHeight * arr[i]);
    }
}
			

After drawing all of the bars the same colour, I made another function so that a single bar could be drawn to represent the current bar the algorithm is looking at. The function is essentially the same, with the only difference being it omits the for loop and instead requires the index position of the specified bar.

				function activeBar(arr, i, colour){
    var barWidth = (canvas.width / arr.length);
    var barHeight = (canvas.height / arr.length);

    ctx.fillStyle = colour;
    ctx.fillRect((barWidth * i) + 1, (canvas.height - (barHeight * arr[i])), barWidth - 1, barHeight * arr[i]);
}
			

For the animation part of the algorithms, I made them using generative functions that yields the activeBar() function. The example below shows how I used it for a linear search.

				function* linearSearchGen(arr, x){
    for(let i = 0; i < arr.length; i++){
        yield activeBar(arr, i, "yellow");
        if(arr[i] == x){
            return i;
        }
    }    
    return -1;
}
			

It uses the setInterval() function and keeps being called until the algorithm is finished. In this case, the outcome is that either the element is found, or is not found. If the algorithm does find the element, it highlights it in green. If the algorithm doesn't find the element, it will make every bar red indicating it coudln't be found.

For my sorting algorithms I needed a way to "randomise" the array. Without looking into algorithms to do this my initial thought was to randomise a value and push it straight to the array. The next element would follow the process, but if the value was already included in the array then it would be randomised again. This approach wasn't very efficient so I began looking into algorithms that are more efficient. I found an algorithm called the Fisher-Yates Shuffle which took an approach I hadn't thought of. It begins with a sorted array and works backwards. For each element, it generates a random number between 0 and (arr.length - i) where i decrements. It then swaps the elements at arr[rand] and arr[i].

				function shuffleArray(array){
    var arr = array;
    var rand;
    var temp;

    for (var i = arr.length - 1; i >= 0; i--) {
        rand = Math.floor(Math.random() * i);
        temp = arr[i];
        arr[i] = arr[rand];
        arr[rand] = temp;
    }

return arr;
}