- 平移
二维平移矩阵
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学习笔记——二维矩阵变换