我正在尝试创建一个冒泡排序可视化，但我运行遇到了一个关于如何以一对一的方式制作动画的问题

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

您的代码非常接近，但有几个问题。

重命名您的排序方法，使其不会与 p5js 排序冲突
在您的排序方法中不要对整个数组进行排序

这是经过两项改进的代码

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>

我正在尝试创建一个冒泡排序可视化，但我运行遇到了一个关于如何以一对一的方式制作动画的问题

I am trying to create a bubble sort visualization but I ran into a probem on how do to animate in a one-by-one fashion

html

javascript

p5.js

我正在尝试创建一个冒泡排序可视化，但我 运行 遇到了一个关于如何以一对一的方式制作动画的问题

I am trying to create a bubble sort visualization but I ran into a probem on how do to animate in a one-by-one fashion

html

javascript

p5.js

我正在尝试创建一个冒泡排序可视化，但我运行遇到了一个关于如何以一对一的方式制作动画的问题