[Html][p5.js]冒泡排序的可视化效果

原创于 2021-09-29 00:19:28 发布 · 714 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

p5js 同时被 2 个专栏收录

2 篇文章

订阅专栏

互动应用开发

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript库p5.js创建冒泡排序可视化效果的实验。通过展示冒泡排序的过程，帮助读者更好地理解排序算法。实验包括sketch.js和BuddleSort.html两个代码文件，实现了动态的排序动画。

文章目录

一、实验要求
二、效果图
三、代码
- 1.sketch.js
- 2.BuddleSort.html
四、其他

一、实验要求

实现冒泡排序的可视化效果。

二、效果图

在这里插入图片描述

三、代码

1.sketch.js

/**
 * 冒泡排序可视化
 */

var canvasWidth = 700; // 画布宽度
var canvasHeight = 500; // 画布高度
var numArray = [350,107,104,99,200,300,12,48]; // 原始数组
var tempArray = []; // 过程数组，记录排序过程
sort(numArray); // 排序原始数组将过程放进过程数组

function setup() {
    frameRate(60) // 设置刷新率
    createCanvas(canvasWidth, canvasHeight); //创建画布
}

var speed = 1; // 动画速度参数
var x = 40;  // 初始绘制x坐标
var y = 400; // 绘制y坐标
var wid = 30;  // 条形宽度
var i = 0; // 过程数组下标
var flag = true; // 标志，每一次交换过程完成后变为false
x0 = 0+speed; // 交换动画中的x变动量，初始为speed，每一帧+speed

function draw(){
    x = 40; // 每次绘制初始化绘制初始位置x值
    if(i<tempArray.length-1){  // 绘制过程数组里的每个过程
        background(255,200,1); // 清空背景
        for(j = 0;j < numArray.length;j++){ // 绘制每个过程的矩形
            if(tempArray[i][j] == tempArray[i+1][j]){ // 若两个过程的第j个数相等则不需要进行交换，直接绘制即可
                drawRect(tempArray[i][j],x);
            }else{
                if(x0 < 2*wid){ // 若不相等，判断x变动量，即是否交换完成
                    // 分别绘制需要交换的两个矩形
                    drawRect(tempArray[i][j],x+x0); 
                    drawRect(tempArray[i+1][j],x-x0);
                    x0+=speed;
                    j++;
                
                }else{ // 交换完成后绘制下一个矩形，并将标志flag修改为false
                    drawRect(tempArray[i+1][j],x);
                    flag = false;
                }
            }
        }
    }else{
        // 全部过程绘制完毕，绘制最终排序好的数组即可
        for(j = 0;j < numArray.length;j++){
            drawRect(numArray[j],x);
        }
    }
    if(!flag){ // 交换过程结束后初始化x0并i++，进行下一个过程
        i++;
        x0 = speed; 
        flag = true;
    }
}

// 冒泡排序比较并且将过程存入tempArray
function sort(arr){
    for(i = 1;i < arr.length;i++){
        for(j = 0;j < arr.length - i;j++){
            if(arr[j]>arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp; 
                tempArray.push(arr.slice())
            }
        }
    }
}

// 绘制矩形
function drawRect(h,mX){
    // 填充颜色
    fill(h,h&10+100,h&5+40)

    // 绘制文本
    textSize(16);
    text(h, mX+3, y-h-10);

    //绘制矩形，高度为h，x坐标为mX
    rect(mX,y,wid,-1*h);
    x+=2*wid;
}

2.BuddleSort.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BuddleSort</title>
</head>
<script text="javascript" src="sketch.js"></script>
<script text="javascript" src="p5.js"></script>
<body>

</body>
</html>