WebGL学习笔记——二维矩阵变换

• 平移

二维平移矩阵

WebGL学习笔记——二维矩阵变换

说明：

(x',y')是原坐标(x,y)分别在x轴方向移动tx，y轴方向移动ty之后得到的新坐标

使用python的numpy矩阵处理模块、matplotlib的绘图模块直观展示一个三角形平移变化的代码及结果如下，使用的工具是JupyterLab

import numpy as np
import matplotlib.pyplot as plt
# 原坐标,第一行为x轴的坐标值，第二行为y轴的坐标值，第三行固定为1
# [x1, x2, x3]
# [y1, y2, y3]
# [ 1,  1,  1]
points = np.array([[-1,0,1],
                 [0,1,0],
                 [1,1,1]])
# 二维坐标平移矩阵
translate = np.array([[1,0,2],
                     [0,1,2],
                     [0,0,1]])
# 经过平移矩阵变换后的新坐标
new_points = np.matmul(translate, points)
new_points

Out[101]:

array([[1, 2, 3],
       [2, 3, 2],
       [1, 1, 1]])

In [103]:

plt.grid()
plt.axis('equal')
# 绘制原坐标组成的三角形
plt.fill(points[0,:], points[1,:], "b")
# 绘制经过平移变换后形成的新坐标组成的三角形
plt.fill(new_points[0,:], new_points[1,:], "r")
plt.show()

WebGL学习笔记——二维矩阵变换

• 旋转

二维旋转矩阵：

WebGL学习笔记——二维矩阵变换

说明：

(x',y')是原坐标(x,y)相对于原点(0,0)逆时针旋转θ角度之后得到的新坐标

演示代码如下：

import numpy as np
import matplotlib.pyplot as plt
import math
# 原坐标,第一行为x轴的坐标值，第二行为y轴的坐标值，第三行固定为1
# [x1, x2, x3]
# [y1, y2, y3]
# [ 1,  1,  1]
points = np.array([[-1,0,1],
                 [0,1,0],
                 [1,1,1]])
# 二维旋转矩阵
translate = np.array([
  [math.cos(math.radians(30)),-math.sin(math.radians(30)),0],
  [math.sin(math.radians(30)),math.cos(math.radians(30)),0],
  [0,0,1]])
# 经过旋转矩阵变换后的新坐标
new_points = np.matmul(translate, points)
new_points

Out[123]:

array([[-0.8660254, -0.5      ,  0.8660254],
       [-0.5      ,  0.8660254,  0.5      ],
       [ 1.       ,  1.       ,  1.       ]])

In [125]:

plt.grid()
plt.axis('equal')
# 绘制原坐标组成的三角形
plt.fill(points[0,:], points[1,:], "b")
# 绘制经过旋转变换后形成的新坐标组成的三角形
plt.fill(new_points[0,:], new_points[1,:], "r")
plt.show()

WebGL学习笔记——二维矩阵变换

• 缩放

二维缩放矩阵：

WebGL学习笔记——二维矩阵变换

说明：

(x',y')等于(xsx，ysy)

演示代码如下：

import numpy as np
import matplotlib.pyplot as plt
# 原坐标,第一行为x轴的坐标值，第二行为y轴的坐标值，第三行固定为1
# [x1, x2, x3]
# [y1, y2, y3]
# [ 1,  1,  1]
points = np.array([[-1,0,1],
                 [0,1,0],
                 [1,1,1]])
# 二维缩放矩阵
translate = np.array([[10,0,0],
                     [0,10,0],
                     [0,0,1]])
# 经过缩放矩阵变换后的新坐标
new_points = np.matmul(translate, points)
new_points

Out[105]:

array([[-10,   0,  10],
       [  0,  10,   0],
       [  1,   1,   1]])

In [109]:

plt.grid()
plt.axis('equal')
# 绘制经过缩放变换后形成的新坐标组成的三角形
plt.fill(new_points[0,:], new_points[1,:], "r")
# 绘制原坐标组成的三角形
plt.fill(points[0,:], points[1,:], "b")
plt.show()

WebGL学习笔记——二维矩阵变换