Bubble Sort Code Push

Author: Sid-0602

animations/moveAnimation.js

@@ -0,0 +1,16 @@
+function animate(moves){
+    if(moves.length==0){return;}
+
+    const move=moves.shift(); //i and j contains i-1 and i.
+    const [i,j] = move.indices;
+    if(move.type == "swap"){
+        [array[i],array[j]] = [array[j],array[i]];
+    }
+
+    playNote(200+array[i]*500); //linear interpolation function. 
+    playNote(200+array[j]*500);
+    showBars(move);
+    setTimeout(function(){
+        animate(moves);
+    },50);
+};

animations/playNote.js

@@ -0,0 +1,24 @@
+let audioCtx = null;
+
+function playNote(freq){
+    if(audioCtx==null){
+        audioCtx= new(
+            AudioContext ||
+            webkitAudioContext ||
+            window.webkitAudioContext
+        )();
+    }
+
+    const dur = 0.1;
+    const osc = audioCtx.createOscillator();
+    osc.frequency.value = freq;
+    osc.start();
+    osc.stop(audioCtx.currentTime+dur);
+    const node = audioCtx.createGain();
+    node.gain.value=0.1;
+    node.gain.linearRampToValueAtTime(
+        0,audioCtx.currentTime+dur
+    );
+    osc.connect(node);
+    node.connect(audioCtx.destination);
+}

index.html

@@ -22,5 +22,8 @@ <h3>Easy to visualize and understand the sorting Algorithms with Sound Effects!<
 
     <script src="script.js"></script>
     <script src="sorting_algo/bubbleSort.js"></script>
+    <script src="animations/playNote.js"></script>
+    <script src="animations/moveAnimation.js"></script>
+    <script src="animations/showBars.js"></script>
 </body>
 </html>

script.js

@@ -1,64 +1,7 @@
-const n=25;
+const n=50;
 const array = [];
 init();
 
-let audioCtx = null;
-
-function playNote(freq){
-    if(audioCtx==null){
-        audioCtx= new(
-            AudioContext ||
-            webkitAudioContext ||
-            window.webkitAudioContext
-        )();
-    }
-
-    const dur = 0.1;
-    const osc = audioCtx.createOscillator();
-    osc.frequency.value = freq;
-    osc.start();
-    osc.stop(audioCtx.currentTime+dur);
-    const node = audioCtx.createGain();
-    node.gain.value=0.1;
-    node.gain.linearRampToValueAtTime(
-        0,audioCtx.currentTime+dur
-    );
-    osc.connect(node);
-    node.connect(audioCtx.destination);
-}
-
-function init(){
-    for(i=0;i<n;i++){
-        array[i] = Math.random();
-    }
-    showBars();
-}
-
-function play(){
-    const copyArray = [...array];
-    const moves = bubbleSort(copyArray);
-    animate(moves);
-}
-
-function animate(moves){
-    if(moves.length==0){return;}
-
-    const move=moves.shift(); //i and j contains i-1 and i.
-    const [i,j] = move.indices;
-    if(move.type == "swap"){
-        [array[i],array[j]] = [array[j],array[i]];
-    }
-
-    playNote(200+array[i]*500); //linear interpolation function. 
-    playNote(200+array[j]*500);
-    showBars(move);
-    setTimeout(function(){
-        animate(moves);
-    },50);
-}
-
-
-
 function showBars(move){
 
     container.innerHTML="";
@@ -75,4 +18,17 @@ function showBars(move){
         }
         container.appendChild(bar);
     }
+};
+
+function init(){
+    for(i=0;i<n;i++){
+        array[i] = Math.random();
+    }
+    showBars();
+}
+
+function play(){
+    const copyArray = [...array];
+    const moves = bubbleSort(copyArray);
+    animate(moves);
 }