图形算法可视化

最近看了一些和图形、算法可视化相关的文章和代码,挺有意思,于是自己也学着做了些东西。

迷宫生成算法

迷宫小时候玩过,但从来没琢磨过迷宫是怎么设计的,以为就是有人慢慢画出来的。看过网上这篇文章后,才知道,原来还可以随机生成:

Maze Generation - Visualizing Algorithms

自己找了些资料参考,试着实现了几种之后,才慢慢领会到其中的一些原理。

算法中讨论的迷宫满足一个条件:迷宫中任意两点间有且只有一条路径

要随机生成满足这样条件的迷宫,看起来很复杂啊。但是换个思路之后,就发现问题没那么复杂了。

“树”其实就满足这个条件:

  • 所有的枝叶都可以通过树枝、树干连通
  • 由于枝干不交叉,没有环,所以枝叶间连通的路径是唯一的

所以,生成随机的迷宫的问题,就转化为生成随机的树的过程。进一步,可以拆分为以下过程:

  • 在迷宫网格内随机选择一个点作为“树根”
  • 从树根开始,向随机选择的某一方向开始生长
  • 直到树的枝干通过不断生长、分叉充满迷宫的所有网格

迷宫生成的不同算法,区别主要在两点:

  • 从一个位置开始生成后一直向随机方向延伸的最大长度:有的是延伸一个网格后立即更换生长点,有的则是直到无法继续延伸后才更换生长点
  • 更换生长点时选择位置的方式:有的是记录当前枝干经过的网格,依次后退,有的干脆是完全随机选择一个有可能向外生长的点

深度优先算法

深度优先算法,也叫递归回溯算法。它会一直向随机方向生长,直到无法生成的位置,向后回退一格,继续生长,直到所有网格被填充。

深度优先算法生成的迷宫,会有比较明显的长路径,这是因为树在一开始生成的时候,空间比较充裕,会有一些长的枝条产生。

Prim 算法

Prim 算法不会一直沿着一条路径进行探索,而是不断尝试随机的生长点。所以 Prim 算法生成的迷宫,分叉会比较多:

算法实现

综合以上两种算法,我既不希望有过长的路径,也不希望有太多的分叉,所以我采用的思路的尝试沿着一条路径延伸最多一定的长度,然后再随机选择生长点执行相同的过程。

下图是在 40*40 的迷宫网格,每条枝干最多生长15个网格的效果:

这是执行了一段时间之后,迷宫大部分区域已经走过:

这是最后的效果:

项目地址:luobotang/maze
在线DEMO:迷宫生成算法 - luobotang

算法可视化

上面例子中的迷宫生成算法过程,迷宫网格是通过 HTML 的

实现,相邻网格的连通效果,则是借助 CSS 的边框样式。

整个迷宫的所有网格由二维数组表示,每个网格的状态包含是否被访问、与相邻网格的连通情况等。

算法的执行过程由定时器驱动,每次执行一步,从而有动画的效果。

最短路径算法

与图相关的最短路径算法,在生活中应该是有着广泛的应用了吧,从一个位置到另一个位置,借助已有的路网,计算最短的路径。当然,还会因为路况、临时障碍,以及用户的个人偏好而产生不同结果。

对于“图”上,基本要素就是:

  • 节点
  • 边:根据场景的不同,还会有方向、权重属性

Dijkstra 算法

Dijkstra 算法是用于计算最短路径的比较著名的一种算法,早在1956年就发表了。

Dijkstra 算法如果看算法的详细执行过程,有点复杂,但是其基本思路在做过之后会发现,貌似很简单。

已确定 A 到 B 的最短路径,B 与 C 相连,且 A 到 B 的距离加上 B 到 C 的距离,小于当前 A 到 C 的距离,那么 A 到 B 再到 C 就是 A 到 C 的最短路径。

如上图所示,最初从 A 来看,到 C 的最短路径是 A -> C,距离是 4。但继续探索到 B 后,发现 A -> B 加上 B -> C 距离只有 3,比 A -> C 的距离要小,所以 A 到 C 的最短路径更新为:A -> B -> C。

算法实现

基本思路上面都介绍了,细节就是每次探索节点时,都选择当前未探索过的到源点距离最短的节点,这样可以源点到当前点的路径已经是最短路径。

算法可视化

图的可视化比较复杂了,只是绘制出来其实不难,但要将节点、边进行合理布局就比较麻烦,是另一个话题了。

我选择用 vis.js 提供的 Network 来绘制图形,然后通过逐步执行算法来更新图形。

这是初始状态:

执行过程中,会记录节点是否被访问,以及当前的最短路径和对应的距离:

全部执行完成后,就得到了源点开始到图中所有节点的最短路径:

项目地址:luobotang/graph
DEMO:Dijkstra 算法 - luobotang

项目的 Github Pages 配置有点问题,只能下载到本地之后再打开页面了。

结语

其实上面这些实现起来并没有特别困难,有很多现成的资料和代码可以利用。但是不管什么饭,都得自己吃过、消化过才是自己的。所以,我把自己吸收的“营养”记录下来,如果你也有兴趣,不妨自己上手一试。

最后,感谢阅读!

你可能感兴趣的:(数据可视化,算法,前端)