index.html

<!DOCTYPE html> 
<html> 
<head>
    	<title>Bubble Sort</title> 
	<meta charset="UTF-8"> 
	<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"
	type="text/javascript"></script> 
	<style> 
		body { 
			padding: 0; 
		} 
		canvas { 
			vertical-align: top; 
		} 
	</style> 
</head> 
<body> 
	<script type="text/javascript"> 
		let values = []; 
		let w = 2; 
		let states = []; 
		function setup() { 
			// Create Canvas of Size Windows 
			// Width * Windows Height 
			createCanvas(1000, 700); 
		
			// Insert Random values in array 
			values = new Array(floor(width/w)); 
			for(let i = 0; i < values.length; i++) { 
				values[i] = float(random(height)); 
				states[i] = -1; 
			} 
			// Print Unsorted Array 
			print("Unsorted Array:" + values); 
			// Call to bubble sort function 
			bubbleSort(values, 0, values.length); 
			// Print Sorted Array 
			print("Sorted Array:" + values); 
		} 
		// Definition of bubble sort 
		async function bubbleSort(arr, start, end) { 
			if(start >= end) { 
				return; 
			} 
			for(var i = 0; i < end-1; i++) { 
				for(var j = 0; j < end-i-1; j++) { 
					if(arr[j] >= arr[j+1]) { 
						states[j] = 1; 
		
						// Call to swap function 
						await swap(arr, j, j+1); 
						states[j+1] = 0; 
					} 
					states[j] = 2; 
				} 
			} 
			return arr; 
		} 
		// Definition of draw function 
		function draw() { 
			background(51); 
			
			for(let i = 0; i < values.length; i++) { 
				stroke(0); 
				fill(255); 
				
				if(states[i] == 0) { 
					fill(255, 0, 0); 
				} 
				else if (states[i] == 1) { 
					
					// Element currently sorting 
					fill("#58FA82"); 
				} 
				else { 
					fill(255); 
				} 
				rect(i*w, height - values[i], w, values[i]); 
			} 
		} 
		// Definition of swap function 
		async function swap(arr, a, b) { 
			
			await sleep(1); 
			let t = arr[a]; 
			arr[a] = arr[b]; 
			arr[b] = t; 
		} 
		// Definition of sleep function 
		function sleep(ms) { 
			return new Promise(resolve => setTimeout(resolve, ms)); 
		} 
	</script> 
</body> 

</html>			 