重大更新:算法可视化颜色系统

近期很多读者在使用网站的算法可视化的功能,给我提出了不少有价值的意见,我都抽空实现出来了。

目前一个比较大的的更新是可视化面板的颜色系统,可以通过代码注释或者 UI 页面修改任意数据结构的颜色,更直观地展示算法执行。

之前只支持用代码注释来控制颜色的,不过考虑到使用起来有一定的门槛,所以我把颜色控制整合到了前端页面上,只需要点几下鼠标即可修改颜色。

如下图,可以点击左侧的代码中的颜色块修改变量的颜色;也可以点击右侧的数据结构修改任意节点的颜色:

de82bb4b3ee7429faf2efd06ebf7dc51.png

详细使用文档见:

https://labuladong.online/algo/intro/visualize/

颜色系统可以更直观地展现算法的执行过程,下面简单列举几个例子。

1、动态规划递推过程,直观地展示状态转移:

47b2913741f7a9650f260bbbbd18c9e4.png

2、二分搜索过程:

83d81801c7c5cd8668741607d36890fb.png

3、树结构的遍历过程:

6af3baae1583e5a54a44cb8172a760b4.png

4、滑动窗口的滑动过程:

4f8938796c96ae9b0aecab8fc2b5b6d0.png

5、复杂数据结构的可视化讲解:

38fc59322808a0b4f8d4fb81ae70e425.png

6、分而治之求解子问题的过程,已计算出结果的节点和未计算出结果的节点有不同的颜色:

4ba90a8844009cc414e1e1d8aa2bdaab.png

7、排序算法:

c92bb82dec13dd9c0266511a84fe57f2.png

以上功能,已同时支持 labuladong.online 所有教程,以及配套 Chrome/vscode/Jetbrain 刷题插件,欢迎体验:

http://labuladong.online/algo/home/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值