冒泡排序介绍 | 使用p5.js

冒泡排序是一种基础的排序算法，它通过重复地遍历要排序的数组，比较相邻的两个元素，如果顺序错误就交换它们。通过多次遍历和交换，在每一轮中将最大的元素“冒泡”到数组的尾部，最终完成排序。

在本篇文章中，我们将使用p5.js来实现一个可视化的冒泡排序过程。

p5.js

p5.js是一个基于Processing语言的JavaScript库，它为艺术家、设计师、教育者和初学者提供了一种创建交互式图形、动画和音乐的方式。p5.js旨在让编程可视化，并通过创建一种易于理解的语言，向许多不同的领域介绍了人类使用计算机的可能性。

在本文中，我们将使用p5.js来可视化冒泡排序的过程。

冒泡排序的实现

现在，我们将使用p5.js来实现冒泡排序的可视化。我们将创建一个简单的页面，该页面包含一个按钮，点击该按钮将触发排序过程的可视化。

JsFiddle: https://jsfiddle.net/m9f3q6yo/

创建一个画布

首先，我们将使用p5.js创建一个画布。我们需要指定画布的宽度和高度，以及一个背景颜色。

function setup() {
  createCanvas(400, 400);
  background(220);
}

生成随机数组

接下来，我们将创建一个函数来生成一个随机数组。我们将在下面的代码中使用这个函数。

function generateArray() {
  let arr = [];
  for (let i = 0; i < 50; i++) {
    arr.push(floor(random(10, height - 10)));
  }
  return arr;
}

绘制数组

我们将创建一个函数，该函数将在画布上绘制一个数组。这个函数需要接收一个数组作为参数，并在画布上按照一定的间距绘制每个元素。

function drawArray(arr) {
  for (let i = 0; i < arr.length; i++) {
    rect(i * 8 + 10, height - arr[i], 8, arr[i]);
  }
}

冒泡排序算法实现

现在，我们将实现冒泡排序算法。我们将创建一个函数，该函数将接收一个数组作为参数，并在每次排序中使用两个嵌套的循环来比较相邻元素，如果它们的顺序错误就交换它们。

function bubbleSort(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

可视化排序过程

最后，我们将在p5.js中可视化这个排序过程。我们将使用上述函数和算法来模拟排序，并在每次排序结束后重新绘制数组。

let arr = generateArray();
let i = 0,
  j = 0;

function draw() {
  background(220);
  drawArray(arr);
  if (i < arr.length - 1) {
    j++;
    if (j >= arr.length - i - 1) {
      i++;
      j = 0;
    }
    if (arr[j] > arr[j + 1]) {
      let temp = arr[j];
      arr[j] = arr[j + 1];
      arr[j + 1] = temp;
    }
  }
}

成品

现在，您可以访问上面提供的JsFiddle链接，在浏览器中运行我们的冒泡排序可视化程序。您还可以尝试更改数组的大小和间距，并查看它如何影响排序的时间和图形化的表现。

总结

在本文中，我们使用p5.js构建了一个简单的冒泡排序可视化程序。通过使用p5.js，我们能够轻松地创建一个基于算法的图形化应用程序。我们希望这个程序为您提供了有趣而有用的想法，以及一个创建自己的可视化工具的基础。