p5.js语法手册变形篇-applyMatrix()

说明

用于将作为参数给出的矩阵与当前矩阵相乘。这可用于同时执行平移、缩放、剪切和旋转操作。这是一个强大的操作，可用于轻松操纵场景中的对象。

范例

 

1. function setup() {
2. createCanvas(500, 100, WEBGL);
3. frameRate(10);
4. rectMode(CENTER);
5. }
7. function draw() {
8. let step = frameCount % 20;
9. background(200);
11. // 案例1
12. push()
13. translate(-250, -50);
14. applyMatrix(1, 0, 0, 1, 40 + step, 50);
15. rect(0, 0, 50, 50);
16. pop()
18. // 案例2
19. push()
20. translate(-100, 0);
21. applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
22. rect(0, 0, 50, 50);
23. pop();
25. // 案例3
26. push();
27. translate(0, 0);
28. noFill();
29. rotateY(PI / 6);
30. stroke(153);
31. box(35);
32. let rad = millis() / 1000;
33. let ct = cos(rad);
34. let st = sin(rad);
35. applyMatrix(
36. ct, 0.0, st, 0.0,
37. 0.0, 1.0, 0.0, 0.0,
38. -st, 0.0, ct, 0.0,
39. 0.0, 0.0, 0.0, 1.0
40. );
41. noFill();
42. stroke(255);
43. box(50);
44. pop();
47. // 案例4
48. push();
49. translate(100, 0);
50. let angle2 = map(step, 0, 20, -PI / 4, PI / 4);
51. let shear_factor = 1 / tan(PI / 2 - angle2);
52. applyMatrix(1, 0, shear_factor, 1, 0, 0);
53. rect(0, 0, 50, 50);
54. pop();
56. // 案例5
57. push()
58. translate(200, 0);
59. let angle = map(step, 0, 20, 0, TWO_PI);
60. let cos_a = cos(angle);
61. let sin_a = sin(angle);
62. applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
63. rect(0, 0, 50, 50);
64. pop();
65. }
67. new p5();

 

语法

1. applyMatrix(arr)
2. applyMatrix(a, b, c, d, e, f)
3. applyMatrix(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)

参数

arr

一个2*3 / 4*4 的矩阵

a

数字：定义要相乘的 2×3 矩阵的数字。

b

数字：定义要相乘的 2×3 矩阵的数字。

c

数字：定义要相乘的 2×3 矩阵的数字。

d

数字：定义要相乘的 2×3 矩阵的数字。

e

数字：定义要相乘的 2×3 矩阵的数字。

f

数字：定义要相乘的 2×3 矩阵的数字。

g

数字：定义要相乘的 4×4 矩阵的数字。

h

数字：定义要相乘的 4×4 矩阵的数字。

i

数字：定义要相乘的 4×4 矩阵的数字。

j

数字：定义要相乘的 4×4 矩阵的数字。

k

数字：定义要相乘的 4×4 矩阵的数字。

l

数字：定义要相乘的 4×4 矩阵的数字。

m

数字：定义要相乘的 4×4 矩阵的数字。

n

数字：定义要相乘的 4×4 矩阵的数字。

o

数字：定义要相乘的 4×4 矩阵的数字。

p

数字：定义要相乘的 4×4 矩阵的数字。

【社群】P5JS语法手册 - 乐述云享 (aleshu.com)