强化学习：自定义gym环境可视化绘制_强化学习可视化

原文地址

分类目录——强化学习

• Gym环境的主要架构

  查看gym.Env类的主要结构如下

  

  其中主要会用到的是metadata、step()、reset()、render()、close()

  • metadata：元数据，用于支持可视化的一些设定，改变渲染环境时的参数，如果不想改变设置，可以无
  • step()：用于编写智能体与环境交互的逻辑；它接受一个动作（action）的输入，根据action给出下一时刻的状态（state）、当前动作的回报（reward）、探索是否结束（done）及调试帮助信息信息。
  • reset()：用于在每轮开始之前重置智能体的状态
  • render()：可视化的关键部分，用来绘制画面
  • close()：用来在程序结束时清理画布

• render()

  先看一下render能画出什么东西

  

  注：其中的数字是截图时标注的

  下面看一下这些图形是如何画出来的

  • 首先，需要声明一块画布

    这个感觉放在环境类的_init_()函数中比较好，算是初始化的工作

        def __init__(self):
            self.viewer = rendering.Viewer(600, 400)  # 600x400 是画板的长和框
    1
    2

    当然，该语句也可以追加在render()函数中

    要注意在gym的画布中

    • 向右为x轴正方向，向上为y轴正方向，左下角为坐标原点
    • 默认颜色：黑色
    • 默认坐标：原点（左下角）
    • gym中的color属性：gym中的这个color，（x, y, z）中的每一位应该取[0, 1]之间的值

  • render()的主题框架

    	def render(self, mode='human'):
            '''
            这里是绘制部分
            '''
            return self.viewer.render(return_rgb_array=mode == 'rgb_array')
    1
    2
    3
    4
    5

  • 画直线

    		# 方式一
            # 定义一根线
            aline = rendering.Line((100, 30), (500, 30))  # 1
            # 把图形元素添加到画板中
            self.viewer.add_geom(aline)
    
            # 方式二
            transform0 = rendering.Transform(translation=(50, 100))  # 相对偏移
            self.viewer.draw_line((0, 0), (0, 300), color=(0, 0, 1)).add_attr(transform0)  # 2
    1
    2
    3
    4
    5
    6
    7
    8
    9

    效果分别如图中的1、2所示

  • 画圆

    		# 方式一
            acircle = rendering.make_circle(50, 10, filled=False)  # 3 *注意下面还做了平移操作
            # radius=10 半径
            # res=30    说是画圆，其实是画正多边形，res指定多边形的边数
            # filled=True   是否填充
            acircle.set_color(0, 1, 0)
            acircle.set_linewidth(5)  # 设置线宽
    
            # 添加一个平移操作
            transform1 = rendering.Transform(translation=(100, 200))  # 相对偏移
            # 让圆添加平移这个属性
            acircle.add_attr(transform1)
    
            self.viewer.add_geom(acircle)
    
            # 方式二
            transform2 = rendering.Transform(translation=(200, 200))  # 相对偏移
            self.viewer.draw_circle(20, 30, False).add_attr(transform2)  # 4
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    注意其中的平移（Transform）操作

    效果分别如图3、4所示

  • 画多边形

    		# 方式一
            apolygon = rendering.make_polygon([(30, 30), (50, 30), (50, 80), (30, 80)], filled=True)  # 5 *注意下面做了偏移
            # 依次传入各个顶点
    
            apolygon.set_color(0, 0, 0)
            transform3 = rendering.Transform(translation=(50, 200))  # 相对偏移
            apolygon.add_attr(transform3)
            self.viewer.add_geom(apolygon)
            # 方式二
            transform4 = rendering.Transform(translation=(50, 50))  # 相对偏移
            self.viewer.draw_polygon([(60, 30), (80, 30), (80, 80), (60, 80)], False).add_attr(transform4)  # 6
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    效果分别如图中的5、6所示

    画非方形的时候，可以借助三角函数找坐标

    		# 画非方形的时候，可以借助三角函数找坐标
            transform4 = rendering.Transform(translation=(250, 300))  # 相对偏移，即设定中心
            # 这里打算就像上面画圆似的，找一个中心，根据半径圆心角依次获得各个点的坐标
            radius = 100
            res = 5  # 5边形
            points = [(np.cos(2 * np.pi * i / res) * radius, np.sin(2 * np.pi * i / res) * radius) for i in range(res)]
            self.viewer.draw_polygon(points, False).add_attr(transform4)  # 7 *注意偏移
    
            # 改变一下顶点的顺序
            transform5 = rendering.Transform(translation=(450, 300))  # 相对偏移，即设定中心
            new_points = [points[0], points[2], points[4], points[1], points[3]]
            self.viewer.draw_polygon(new_points, False).add_attr(transform5)  # 8
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    效果如图中的7、8所示

  • 画空多边形

    		# 方式一
            apolyline1 = rendering.make_polygon([(60, 30), (80, 30), (80, 80), (60, 80)], False)
            '''后续省略，没有在图中出现'''
    
            # 方式二
            apolyline2 = rendering.make_polyline([(60, 30), (80, 30), (80, 80), (60, 80)])
            # 其内部实现方式就是方式一
            '''后续省略，没有在图中出现'''
    
            # 方式三
            transform6 = rendering.Transform(translation=(300, 50))  # 相对偏移
            self.viewer.draw_polyline([(60, 30), (80, 30),
                                       (80, 80), (60, 80), (60, 30)]).add_attr(transform6)  # 9
            # 在我这里这种方式下需要最后传入起始点，也就是四边形要传入5个点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

  • 画曲线

    注意到上面的方式三，该方式是需要对多边形自行封口的（即最后一个坐标回到起点），那么如果不指定到起点，这就是一条折线，如果将点取的比较秘籍，这就是一条曲线，当然，这也是在其他画图方式中的做法。

    		# 那么，也就可以用它来画曲线了
            transform7 = rendering.Transform(translation=(0, 200))  # 相对偏移
            points2 = [(x, 100 * np.sin(0.02 * x)) for x in np.linspace(1, 600, 600)]
            self.viewer.draw_polyline(points2, color=(0, 0, 255), linewidth=5).add_attr(transform7)  # 10
    1
    2
    3
    4

    效果如图中10所示

  • 胶囊（capsule）形状

    		# 胶囊形状
            acapsule = rendering.make_capsule(10, 20)  # 11
            # length, width, 默认中心画在原点
            acapsule.add_attr(rendering.Transform(translation=(70, 100)))
            self.viewer.add_geom(acapsule)
    1
    2
    3
    4
    5

    效果如图中11所示

  • 测试

    if __name__ == '__main__':
        env = RenderTestEnv()   # 声明一个变量的时候就调用了__init__()函数生成了画布
        env.render()    # 显示画面
        time.sleep(3)   # 持续3秒
        env.close()     # 清掉画布
    1
    2
    3
    4
    5

    效果如文首图所示

• 相关文献

  分类目录——强化学习（更新中）

  什么是gym

  gym自定义可视化环境绘制

  gym自定义可视化环境实例

  强化学习调用gym环境实例

  从Q_Learning看强化学习

  一个Q_Learning强化学习自定义gym环境可视化实例
  tkinter制作强化学习环境
  Pytorch实现DQN

• 全部代码