可视化全排列生成

项目介绍

本次组合数学第二次大作业,我们组选择的是做一款网页端的工具,集成排列数、中介数和序号的互相转换。希望这款工具可以对老师和同学的学习提供在线化的服务和帮助。

使用方法

在浏览器中直接打开permutation.html进行使用。如果在清华校园网内,可以访问这里来在线试用。推荐使用 chrome。 具体地,网页中有十个文本框,分别代表着原排列数,排列位数,四种排序的中介数,以及该排列数在四种排序方法中的序数。特别地,排列位数输入框只针对序数往中介数、排列数转换时起效。当用户在其中任意一个文本框输入一个合法数值时,都会同步更新所有其他的区域,极大地方便用户加强对各种方法全排列的理解。

需注意,我们定义中介数长度必须为排列位数-1,即,输入时不可省略全0前缀。如排列数1243对应的字典序中介数为001,而不是1。

系统设计

前端采用原生 html 与 js,调整了一下前端显示的 css,实现了对每个文本框输入的实时响应,能够对每个输入进行实时转换,并添加了有效性判断逻辑。

后端主要实现了4种方法(字典序法dic、递增进位制数法inc、递减进位制数法des、邻位对换法swap)的排列数、中介数、序数的三方转换。对应的函数分别如下:

  • perm2inter(perm):全排列 → 中介数。对应4种中介数算法的核心逻辑,在组合数学课上有详细介绍。
  • inter2perm(inter):中介数 → 全排列。上一函数的逆过程,在课上也有相应算法介绍。
  • perm2index(perm):全排列 → 序数。先调用perm2inter()将全排列转换成对应的中介数,再根据中介数是递增进位制(对应dic和inc)还是递减进位制(对应des和swap),得到相应的序数。
  • index2perm(index):序数 → 全排列。同样借助中介数来完成,是上一函数的逆过程:先根据中介数算法的进位制来反向生成中介数,再调用inter2perm()将中介数转换成对应的全排列。
  • next_permutation(perm, step):全排列 → 之后第step个全排列,step为负数时则为之前第-step个全排列。这一函数在最终的页面中并未使用。

同步更新的逻辑如下:

  1. 当用户输入一个合法的排列数时,我们调用perm2index(perm)perm2inter(perm)生成相应的4种中介数、序数。
  2. 当用户输入一个合法的中介数时,我们先调用inter2perm(inter)生成对应的排列数,此时回到情形1。
  3. 当用户输入一个合法的序数时,我们先调用index2perm(index)生成对应的排列数(排列数长度取决于当前的排列位数框的值),此时又回到情形1。
  4. 当输入数值不合法时,页面会清空除“排列位数”以外的所有输入框,并显示“输入不合法”的提示信息。

测试效果

贴图贴图

分工

沈光耀 2016211017 前端设计 陈禹东 2018210965 后端逻辑 李晓涵 2018210958 产品把控,部署上线