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

54 阅读2分钟

说明

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

范例

function setup() {
createCanvas(500, 100, WEBGL);
frameRate(10);
rectMode(CENTER);
}


function draw() {
let step = frameCount % 20;
background(200);


// 案例1
push()
translate(-250, -50);
applyMatrix(1, 0, 0, 1, 40 + step, 50);
rect(0, 0, 50, 50);
pop()


// 案例2
push()
translate(-100, 0);
applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
rect(0, 0, 50, 50);
pop();


// 案例3
push();
translate(0, 0);
noFill();
rotateY(PI / 6);
stroke(153);
box(35);
let rad = millis() / 1000;
let ct = cos(rad);
let st = sin(rad);
applyMatrix(
ct, 0.0, st, 0.0,
0.0, 1.0, 0.0, 0.0,
-st, 0.0, ct, 0.0,
0.0, 0.0, 0.0, 1.0
);
noFill();
stroke(255);
box(50);
pop();




// 案例4
push();
translate(100, 0);
let angle2 = map(step, 0, 20, -PI / 4, PI / 4);
let shear_factor = 1 / tan(PI / 2 - angle2);
applyMatrix(1, 0, shear_factor, 1, 0, 0);
rect(0, 0, 50, 50);
pop();


// 案例5
push()
translate(200, 0);
let angle = map(step, 0, 20, 0, TWO_PI);
let cos_a = cos(angle);
let sin_a = sin(angle);
applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
rect(0, 0, 50, 50);
pop();
}


new p5();

语法

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

参数

arr

一个23 / 44 的矩阵

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)