Функция p5.js resetMatrix()
Опубликовано: 25 Августа, 2022
Функция resetMatrix() используется для замены текущей матрицы единичной матрицей (квадратной матрицей, все значения которой равны нулю, кроме диагональной, которая равна 1). Когда мы вращаем, перемещаем и масштабируем любое графическое изображение с помощью applyMatrix() , то, применяя функцию resetMatrix() , мы можем изменить графику в ее первоначальный вид.
Синтаксис:
resetMatrix()
Ниже приведены примеры, иллюстрирующие функцию resetMatrix().
Шаг 1: Откройте онлайн-редактор https://editor.p5js.org/.
Шаг 2: Напишите следующий код и запустите его, чтобы увидеть результат.
Пример 1:
Javascript
// Set up the functionfunction setup() { // Create canvas createCanvas(800, 400);} function draw() { // Set the background colour background(200); // Set the translate function translate(500, 50); // Set the apply matrix function applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0); // Set the colour to fill the graphics fill("red"); // Set the shape. rect(50, 50, 300, 200, 30); // Now call the reset function resetMatrix(); // Set the colour to fill the graphics fill("green"); // Set the shape rect(50, 50, 300, 200, 30);} |
Выход:
Пример 2:
Javascript
// Set up the functionfunction setup() { // Create canvas createCanvas(800, 600);} function draw() { // Set the function to rotate let step = frameCount % 50; let angle = map(step, 10, 60, 0, PI); let cos_a = cos(angle); let sin_a = sin(angle); // Set the background color background(200); // Set the translate function translate(500, 50); // Set the apply matrix function applyMatrix(cos_a, sin_a, -sin_a, -cos_a, 0, 0); // Set the colour to fill the graphics fill("red"); // Set the shape rect(50, 50, 300, 200, 30); // Now call the reset function resetMatrix(); // Set the colour to fill the graphics fill("green"); // Set the shape rect(50, 50, 300, 200, 30);} |
Выход:
