我正在嘗試創建一個冒泡排序可視化，但我遇到了一個關於如何以一對一的方式制作動畫的問題

Question

問題：我正在嘗試創建一個冒泡排序可視化，但是當頁面重新加載時它會自動對整個事物進行排序。 我正在尋找輸入以使其變慢。 這是我的代碼：

let a = [];
let i = 0;
let j = 0;

function setup() {
  createCanvas(640, 640);
  a = new Array(width);
  for (let i = 0; i < a.length; i++) {
    a[i] = random(height);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < a.length; i++) {
    line(i, height, i, height - a[i]);
    stroke(255);
  }
  if (i < a.length) {
    sort(a, i, j);
    i++;
  }
}

function sort(a, i, j) {
  for (i = 0; i < a.length; i++) {
    for (j = 0; i < a.length + 1; j++) {
      if (a[i] < a[j]) {
        let f = a[i];
        a[i] = a[j];
        a[j] = f;
      }
    }
  }
}

Answer 1

您的代碼非常接近，但有幾個問題。

1. 重命名您的排序方法，使其不會與 p5js 排序沖突
2. 在您的排序方法中，不要對整個數組進行排序

這是您的代碼，其中包含兩項改進

 let a = []; let i = 0; let j = 0; function setup() { createCanvas(640, 640); a = new Array(width); for (let i = 0; i < a.length; i++) { a[i] = random(height); } // adjust the frame rate to slow things down even more frameRate(30); } function draw() { background(0);// black background for (let k = 0; k < a.length; k++) { line(k, height, k, height - a[k]); stroke(255);// white bars } if (j < a.length){ for (i = 0; i < a.length; i++) { mySort(a, i, j); } j++; } else { noLoop(); } } function mySort(a, i, j) { if (a[i] < a[j]) { let f = a[i]; a[i] = a[j]; a[j] = f; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>