p5.js |冒泡排序

冒泡排序是最简单的排序算法，如果相邻元素的顺序错误，它会重复交换相邻元素。

为了更多地了解它。请参考冒泡排序

方法：

• 创建一个随机值数组，并根据高度呈现与该值对应的条形图。
• 为冒泡排序创建一个函数，该函数比较相邻的条以交换条。
• 为了获得更好的可视化效果，请将颜色设置为当前正在处理的条形图（下图示例中为红色）。

例子：

  

    Bubble Sort
      
    
  
    
      
     
        body {
            padding: 0;
  
        }
        canvas {
            vertical-align: top;
        } 
    
 
  

    
      
        // Set Global Variables 
        let values = [];
        let w = 20;
           
        // To store the state of each bar
        // in order to change the color
        let states = [];
           
           
        function setup() {
              
            // Create Canvas of Size Windows
            // Width * Windows Height
            createCanvas(800, 400);
           
            // 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(20);
            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));
        }
    

  
            

输出：