图形算法可视化

栏目: 编程工具 · 发布时间: 5年前

内容简介:最近看了一些和图形、算法可视化相关的文章和代码,挺有意思,于是自己也学着做了些东西。迷宫小时候玩过,但从来没琢磨过迷宫是怎么设计的,以为就是有人慢慢画出来的。看过网上这篇文章后,才知道,原来还可以随机生成:

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

迷宫生成算法

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

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 配置有点问题,只能下载到本地之后再打开页面了。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序设计语言

程序设计语言

斯科特 / 裘宗燕 / 电子工业出版社 / 2007-6 / 99.00元

★列为全球上百所大学标准教材和首席参考书! ★图书馆必备典藏,作者Michael L.Scott 是计算机领域的著名学者,译者是北京大学的裘宗燕教授,他熟悉专业,译笔流畅,因此,这是一本难得的著、译双馨的佳作。 这是一本很有特色的教材,其核心是讨论程序设计语言的工作原理和技术。本书融合了传统的程序设计语言教科书和编译教科书的有关知识,并增加了一些有关汇编层体系结构......一起来看看 《程序设计语言》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具