js图像快速插值算法（JS的5种排序算法可视化）

js图像快速插值算法（JS的5种排序算法可视化）1954北京坐标系，1980西安坐标系，2000国家大地坐标系。主要用于工程建设、施工的CAD图纸的确认房屋的坐标、方向。2、按实施年代分冒泡排序后的坐标1、按照格式分空间坐标系（XYZ），大地坐标系（BLH），平面坐标系（xyh)。主要是数学方面的坐标系，用来解决空间问题以及维度的问题。

前几期已经预告了会发布数学坐标应用到程序中，写这边文章也是因为之前刷视频看到有人通过java将排序进行可视化，自己也想挑战一下。如果我们使用javascript raphael来实现这个超炫的效果，每种算法都不一样，我们先看看冒泡的效果：

实现的思路是什么呢？

无论通过哪一种排序算法，都是从一张散列的坐标点到排序后的有序坐标点（从图一到图二的过程）

散列坐标点

冒泡排序后的坐标

坐标系应用分类（扩展知识）

1、按照格式分

空间坐标系（XYZ），大地坐标系（BLH），平面坐标系（xyh)。主要是数学方面的坐标系，用来解决空间问题以及维度的问题。

2、按实施年代分

1954北京坐标系，1980西安坐标系，2000国家大地坐标系。主要用于工程建设、施工的CAD图纸的确认房屋的坐标、方向。

3、按区域功能分

有国家标准坐标系，有地方独立坐标系。主要用于地理图纸的制作、研究和计算。也常用于地理方向的教学。

说明：以上是对我们知识的扩展

数学里面我们学过笛卡尔直角坐标系、平面极坐标系、柱面坐标系(或称柱坐标系)和球面坐标系(或称球坐标系)，Lagrangian 坐标系，欧拉坐标系，今天我们使用迪卡尔直角坐标系来可视化。

PS：还有多少程序猿记得呢？

我们要实现的这个效果和坐标有什么关系呢？

我们要找到一个排序点，如下图，排序点有三个点，A，B，P，A为x轴长度，B为y轴长度，P为点到原点的距离，我们选择A或者B即可，这样我们抽象后其实就是身高进行高矮排序了。（PS:复杂问题简单化）

1、我们假定Y轴最大为500，X轴最大为1166（这里可以自己定义Y最大和X最大，作者是根据自己喜好定义的）；

2、这里随机生成坐标点（240个，坐标数量也可以自己定义），随机X轴和Y轴组成点的坐标

实现效果

1、生成一组乱序的坐标点（240个）；

2、使用Raphael画出生成的乱序坐标点；

3、对乱序数组进行排序（身高高矮排序）；

4、排序过程中不断使用Raphael进行删除和重绘；

5、排序完成终止重绘并且打印耗时；

排序过程

键盘敲打起来

根据电脑性能进行乱序数组的生成，为了显示分布均匀同时能够看到排序效果，建议数量在180到1000左右，数量多了排序时间耗时就长。这里我们选择240个坐标点。CTRL C和CTRL V肯定不行，优秀的程序猿一般都是比较懒的程序猿（通过代码解决苦力问题），肯定用代码生成坐标点上代码：

随机坐标点

其中箭头地方为重点，我们需要根据这个数组使用排序算法排序。

坐标起始点

1、为什么x的最大值的1166呢，因为作者的屏幕是1366的屏幕，减去200的偏移量就是1166了

2、我选了200 500为坐标原点，那么point的x和y需要：x 200，500-y；（PS:自己揣摩[呲牙]）

排序过程的重绘

这里使用冒泡排序法说明。使用Promise进行异步重绘。

排序重绘点

重绘关键代码

大片开始了，板凳端上瓜子磕上冒泡排序

选择排序法

插入排序

堆排序

快速排序

说明：这里主要讲解思路，如需完整代码请@作者或者留言，未完待续.....

延伸阅读

1、前端绘图利器-Raphael

2、前端如果使用Raphael绘制流程图会怎样？

3、JavaScript你应该掌握的动画技术，是时候展示了

4、元宇宙概念真香，看看代码里面的元宇宙吧

5、数学知识应用到程序中，我将飞机航线图可视化了，伟大的JS