python socket发送数组_利用pyprocessing初步探索数组排序算法可视化

【经过两次更新，功能基本完成】最终效果请直接下拉到最后一个视频观看

背景说明

这篇文章旨在初步探索利用pyprocessing的强大的可视化功能，以及pyprocessing和Ipython之间的本地网络通讯，实现对于Ipython中数组排序的可视化。简单的说，就是使用pyprocessing做一个程序（服务端），负责数据的存储以及数据的可视化，然后我们的python程序负责核心排序算法，并通过一个本地网络端口向其发送指令。当然，这里的python程序也可以是其他任何语言的程序，因为发送到网络端口的是字节流，而只要字节流符合规定格式，就能够实现算法的可视化。

算法可视化的基本思想采用了“图表被动更新”的策略。什么是“被动”呢？就是我们的可视化程序是根据我们发出的指令进行元素交换的，而我们对于图表发出的指令类似于下面这种：

请交换第二个和第五个数组元素
请交换第七个和第八个数组元素

这和现在大多数主动式可视化方式不同：它们是主动绑定一个数组，并在每次更新图像前扫描数组元素。和这种主动式相比，这里的被动式显然是更有优点的，比如说：

对初学者更加友好。因为初学者对于排序问题经常会写出递归式的解法，这时主动式的可视化方式就会失效。
可视化更加灵活。方面调整一些参数，同时使得背景分组染色这种可视化方式变得可能。

另外，关于pyprocessing和Ipython之间的通讯原理请看本专栏的上一篇文章，而软件的安装请查看更早期的相关文章。

程序效果

效果展示https://www.zhihu.com/video/1164283402328129536

视频说明：

程序默认产生了一个随机数组，然后根据客户端发出的指令进行元素交换操作。

客户端程序(python)如下：

import socketaddress = ('127.0.0.1', 12345)
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.connect(address)s.send(r'13 5'.encode()) # 交换第13个和第5个元素的位置
s.send(r'12 4'.encode())
s.send(r'1 3'.encode())
s.send(r'13 5'.encode())
s.send(r'12 4'.encode())
s.send(r'1 3'.encode())

因为现在整个项目正在开发的初期，服务器端程序暂时不公开。欢迎有兴趣的同学和作者交流。作者会持续改进该程序，并添加更加丰富的功能。顺带一提，如果文章没人点赞的话就完全没有更新的欲望了噢~

2019.10.7 更新

完善了昨天的算法可视化的基本程序。并将指令分成了“init”指令和“swap”指令两种。

下面是一个基本的客户端程序：

import time
s.send(r'init 1 2 3 4 5 11 10 9'.encode())
time.sleep(0.5)
s.send(r'swap 3 5'.encode())
time.sleep(0.5)
s.send(r'swap 2 4'.encode())
time.sleep(0.5)
s.send(r'swap 2 3'.encode())

我们就用上面的基本指令写一个排序算法的可视化：

import socketaddress = ('127.0.0.1', 12345)
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.connect(address)import timedef bubble_sort(alist):for j in range(len(alist)-1,0,-1):# j表示每次遍历需要比较的次数，是逐渐减小的for i in range(j):if alist[i] > alist[i+1]:alist[i], alist[i+1] = alist[i+1], alist[i]s.send(('swap ' + str(i) + ' ' + str(i+1)).encode())time.sleep(0.5)def insert_sort(alist):# 从第二个位置，即下标为1的元素开始向前插入for i in range(1, len(alist)):# 从第i个元素开始向前比较，如果小于前一个元素，交换位置for j in range(i, 0, -1):if alist[j] < alist[j-1]:alist[j], alist[j-1] = alist[j-1], alist[j]s.send(('swap ' + str(j) + ' ' + str(j-1)).encode())time.sleep(0.5)li = [54,26,93,17,77,31,44,55,20,33,66]
s.send(('init ' + ' '.join(str(a) for a in li)).encode())insert_sort(li)
print(li)

对于插入排序算法的可视化https://www.zhihu.com/video/1164499957758525440

可以看出，我们的程序达成了目标效果，运行流畅。

下一步目标是利用processing的分层渲染技术加入更多的可视化信息，比如加入元素标号，展示分组信息，重点突出正在交换的元素等。

2019.10.8更新

服务器端程序加入了多行命令解析功能，对应的客户端程序每条指令的末尾都需要添加一个“*”表示一条指令的结束
服务器端程序加入了条条染色功能，对应的指令格式是：”color n time*“，其中n是条的序号，而time是该染色持续的时间（单位：毫秒）

下面是例子调用代码：

# 连接到服务器
import socket
address = ('127.0.0.1', 12345)
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.connect(address)import time
# 冒泡排序
def bubble_sort(alist):for j in range(len(alist)-1,0,-1):# j表示每次遍历需要比较的次数，是逐渐减小的for i in range(j):time.sleep(0.6)s.send(('color ' + str(i) + ' ' + '400*').encode()) # 染色可视化指令s.send(('color ' + str(i+1) + ' ' + '400*').encode()) # 染色可视化指令if alist[i] > alist[i+1]:alist[i], alist[i+1] = alist[i+1], alist[i]s.send(('swap ' + str(i) + ' ' + str(i+1)+'*').encode()) # 交换可视化指令
li = [54,26,93,17,77,31,44,55,20,33,66]
s.send(('init ' + ' '.join(str(a) for a in li)).encode()) # 可视化初始化指令bubble_sort(li)

以及上述调用程序的效果视频：

对冒泡排序进行可视化https://www.zhihu.com/video/1164857154036174848