互动应用开发p5.js——冒泡排序可视化

不念不忘少年蓝@ 2023-10-01 15:48 1阅读 0赞

## 冒泡排序可视化 ##

### 一、实验内容 ###

#### 实验要求： ####

1.  实现10个数以上的冒泡排序可视化
2.  体现两两交换过程
3.  动画速度可由变量控制
4.  代码注释完整
    
    可选：已排好的序列颜色有所区分

#### 解题思路： ####

1.  比较相邻的元素。如果第一个比第二个大，就交换他们两个。
2.  对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
3.  针对所有的元素重复以上的步骤，除了最后一个。
4.  持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

#### 实现冒泡排序的可视化效果。要求： ####

1.  提交cs源代码
2.  实验思路、步骤和重要变量需要注释说明
3.  不得抄袭，抄袭行为（包括抄袭和被抄袭者）一经发现全部0分

#### 评价标准： ####

优：运行正确，动画完整，可视化效果美观，注释明确；

良：运行正确，动画较完整，可视化效果较美观，注释明确；

中：运行基本正确，动画基本完整，可视化效果有缺失，但不影响结果，注释基本明确；

及格：运行基本正确，动画和可视化效果有少量不影响结果的错误；注释基本明确；

不及格：不能运行；抄袭；

### 二、实验说明： ###

所有实验是通过 Visual Studio Code引入p5.js包编写，所以首先要去p5.js官网下载相关包，或是在联网状态下把html中引入包的代码改成例如<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>等。

###    三、实验代码： ###

var a;
    var ars=[];
    //定义全局变量，记录数组移动下标
    var i=0;
    var j=0;
    //判断是否交换
    var flag=true;
    
    
    function setup() {
        createCanvas(520, 300);
        
        for(var k=0;k<10;k++){
           a={
                h:random(100),//随机数
                w:20,//矩形宽度
                c:color(random(255),random(255),random(255)),//随机颜色
                p:100+k*30//横坐标
           }
           ars.push(a);
        }
        
    }
    
    function draw() {
        background(240);
        if(frameCount%10==0){
            //判断是否要移动交换
            if(ars[j].h>ars[j+1].h){
                //置移动状态
                flag=true;
                //判断是否在移动
                if(flag==true){
                    //移动矩形
                    ars[j].p=ars[j].p+5;
                    ars[j+1].p=ars[j+1].p-5;
                    //判断是否移动到指定位置
                    if(ars[j].p==ars[j+1].p+30){
                        //更新数组
                        swap(ars);
                        //改变状态
                        flag=false;
                    }
                }
         
            }
            else{
                //判断i，j
                if(i<ars.length){
                    j++;
                    if(j>=ars.length-i-1){
                        j=0;
                        i++;
                    }
                }
                //结束
                else{
                    noLoop();
                }
            }
        }
        //绘制图形
        noStroke();
        
        for(var k=0;k<ars.length;k++){
            stroke(4);
            strokeWeight(0.03);
            line(80, 200, 410, 200);//画横坐标横线
            noStroke();
            fill(ars[k].c);//填充随机颜色
            rect(ars[k].p,200,ars[k].w,-ars[k].h);//画矩形
            text(parseInt(ars[k].h),ars[k].p,190-ars[k].h)//将随机数放到矩形上方
        }
        
    }
    //交换过程
    function swap(arr){
        var ah = arr[j].h;
        arr[j].h = arr[j + 1].h;
        arr[j + 1].h = ah;
        var ac = arr[j].c;
        arr[j].c = arr[j + 1].c;
        arr[j + 1].c = ac;
        var ap = arr[j].p;
        arr[j].p = arr[j + 1].p;
        arr[j + 1].p = ap;
    }

### 四、实验结果 ###

![209b85a4f9b14403aa614e9b49a52882.png][]

![581b31fc44d240eabd6c539874f3e9d0.png][]

[209b85a4f9b14403aa614e9b49a52882.png]: https://img-blog.csdnimg.cn/209b85a4f9b14403aa614e9b49a52882.png
[581b31fc44d240eabd6c539874f3e9d0.png]: https://img-blog.csdnimg.cn/581b31fc44d240eabd6c539874f3e9d0.png