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

冒泡排序可视化

一、实验内容

实验要求：

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;
}

 四、实验结果