冒泡排序可视化
一、实验内容
实验要求：
- 实现10个数以上的冒泡排序可视化
- 体现两两交换过程
- 动画速度可由变量控制
- 代码注释完整
可选：已排好的序列颜色有所区分
解题思路：
- 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
- 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
- 针对所有的元素重复以上的步骤，除了最后一个。
- 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
实现冒泡排序的可视化效果。要求：
- 提交cs源代码
- 实验思路、步骤和重要变量需要注释说明
- 不得抄袭，抄袭行为（包括抄袭和被抄袭者）一经发现全部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; }
四、实验结果
编辑
编辑
