算法可视化神器！用动画让冒泡排序、二分查找一目了然

还在为理解冒泡排序的每一趟交换或是二分查找的边界条件而绞尽脑汁吗静态的代码和文字描述有时确实不够直观。想要真正让算法“动”起来一目了然强烈推荐你试试**图码这个专注于算法可视化**的神器。它提供了超过60种数据结构和算法的交互式动画可视化你可以输入自己的数据实时观看动画过程甚至直接上传C/Java/Python等代码进行代码可视化解析让执行逻辑清晰呈现。对于正在备战408考研或数据结构期末考试的同学来说它更是复习利器知识点与可运行代码紧密结合助你高效攻克难点。更贴心的是其7*24小时AI代码解析服务能随时为你选中代码片段提供解释。别再空想立即点击访问**图码**亲手创建你的第一个算法动画让学习效率飞跃吧算法可视化神器用动画让冒泡排序、二分查找一目了然最近在LeetCode上学习时看到很多大佬用算法动图讲解题解思路清晰又直观简直羡慕哭了于是上网搜了下有没有什么可视化工具能把算法的执行过程用动画展示出来。结果还真让我找到了一个宝藏——algorithm-visualizer对于我这种手残党画图苦手、不擅长图像化记录思路来说简直是救星先来体验一下我们可以直接去体验地址看看。界面分为三部分最左边是算法目录涵盖了排序、二叉树、图、动态规划等经典算法。中间是算法动画演示区域。右边是代码编辑区。对哪个算法感兴趣直接点击【运行Play】按钮就能看到动画演示非常方便不过这些算法都是已经写好的可视化demo。如果我们想把自己写的算法也变成动画就需要了解它背后的可视化实现原理。网上教程很少我自己摸索了一下分享给大家。自己动手实现算法动画1. 冒泡排序可视化原始冒泡排序代码functionbubbleSort(arr){letlenarr.length;letdonetrue;// 标志位如果某轮没有交换说明已排序完成while(done){donefalse;for(leti1;ilen;i){if(arr[i-1]arr[i]){consttemparr[i-1];arr[i-1]arr[i];arr[i]temp;donetrue;// 发生了交换}}len--;}returnarr;}加入可视化代码后// 引入algorithm-visualizer包const{Tracer,Array1DTracer,ChartTracer,LogTracer,Randomize,Layout,VerticalLayout}require(algorithm-visualizer);constchartnewChartTracer();// 柱状图consttracernewArray1DTracer();// 一维数组视图constloggernewLogTracer();// 日志输出Layout.setRoot(newVerticalLayout([chart,tracer,logger]));// 垂直布局constarrRandomize.Array1D({N:10});// 随机生成10个元素的数组tracer.set(arr);// 初始化数组视图tracer.chart(chart);// 同步到柱状图Tracer.delay();// 暂停一下logger.println(原始数组 [${arr.join(, )}]);functionbubbleSort(arr){letlenarr.length;letdonetrue;while(done){donefalse;tracer.select(len-1);// 高亮当前轮次的最后一个元素Tracer.delay();for(leti1;ilen;i){tracer.select(i);// 高亮当前比较的元素Tracer.delay();if(arr[i-1]arr[i]){consttemparr[i-1];arr[i-1]arr[i];arr[i]temp;donetrue;tracer.patch(i-1,arr[i-1]);// 显示i-1位置的值变化tracer.patch(i,arr[i]);// 显示i位置的值变化Tracer.delay();tracer.depatch(i-1);// 取消显示变化tracer.depatch(i);}tracer.deselect(i);// 取消高亮}len--;}tracer.deselect(len-1);logger.println(排序完数组 [${arr.join(, )}]);returnarr;}bubbleSort(arr);可视化运行效果冒泡动图.gif2. 有序数组二分查找可视化原始二分查找代码functionBinarySearch(arr,target){letstart0;letendarr.length-1;letmidNum;while(startend){constmidIdxMath.floor((startend)/2);midNumarr[midIdx];if(midNumtarget){startmidIdx1;}elseif(midNumtarget){endmidIdx-1;}else{returnmidIdx;}}return-1;}加入可视化代码后const{Tracer,Array1DTracer,ChartTracer,LogTracer,Randomize,Layout,VerticalLayout}require(algorithm-visualizer);constchartnewChartTracer();consttracernewArray1DTracer();constloggernewLogTracer();Layout.setRoot(newVerticalLayout([chart,tracer,logger]));// 生成0-50之间的有序随机数组constarrRandomize.Array1D({N:15,value:()Randomize.Integer({min:0,max:50}),sorted:true});// 随机选择一个目标值consttargetarr[Randomize.Integer({min:0,max:arr.length-1})];tracer.set(arr);tracer.chart(chart);Tracer.delay();functionBinarySearch(arr,target){letstart0;letendarr.length-1;letmidNum;while(startend){constmidIdxMath.floor((startend)/2);midNumarr[midIdx];tracer.select(start,end);// 高亮当前搜索区间Tracer.delay();tracer.patch(midIdx);// 高亮中间元素Tracer.delay();tracer.depatch(midIdx);// 取消高亮tracer.deselect(start,end);// 取消高亮区间if(midNumtarget){startmidIdx1;}elseif(midNumtarget){endmidIdx-1;}else{logger.println(${target}找到在位置${midIdx}!);tracer.select(midIdx);// 高亮找到的位置returnmidIdx;}}logger.println(${target}没有找到!);return-1;}BinarySearch(arr,target);可视化运行效果二分查找动图.gif可视化代码详解Array1DTracer一维数组视图consttracernewArray1DTracer();constarrRandomize.Array1D({len:15});// 1. 初始化数组tracer.set(arr);// 2. 重置数组tracer.reset();// 3. 暂停显示变化tracer.delay();// 4. 可视化表示x位置的值变为vtracer.patch(x,v);// 5. 停止可视化表示x位置的变化tracer.depatch(x);// 6. 选择位置单个或区间tracer.select(x);tracer.select(from,to);// 7. 取消选择tracer.deselect(x);tracer.deselect(from,to);// 8. 同步数组到统计图tracer.chart();ChartTracer柱状图constchartnewChartTracer();// 使用方法与Array1DTracer基本一致chart.set(arr);chart.reset();chart.delay();// ...LogTracer日志输出constloggernewLogTracer();logger.print(一行打印);// 不换行logger.println(换行打印);// 换行随机初始化方法// 1. 随机一维数组N长度sorted是否排序constarrRandomize.Array1D({N:15,sorted:false});// 2. 随机二维数组N行M列constarr2DRandomize.Array2D({N:3,M:4,sorted:false});// 3. 随机浮点数constdoubleNumRandomize.Double({min:1,max:10});// 4. 随机整数constintNumRandomize.Integer({min:1,max:10});// 5. 随机字符串length长度letters可选字母constrandomStringRandomize.String({length:10,letters:abcdefg});最后以上是JavaScript的用法这个平台也支持Java和Python哦大家可以动手试试在自己的算法代码里加入可视化指令就能在平台上看到酷炫的动画效果了。这对于排查错误、做学习笔记、记录题解思路都超级有帮助毕竟可视化是最直观、最容易让人理解算法思想的方式。赶紧试试吧让你的算法“动”起来