Función p5.js resetMatrix()

La función resetMatrix() se usa para reemplazar la array actual con la array identidad (la array cuadrada cuyos valores son cero excepto la diagonal que es 1). Cuando estamos rotando, traduciendo y escalando cualquier imagen gráfica usando applyMatrix()   , al aplicar la función resetMatrix() podemos cambiar los gráficos a su forma original.

Sintaxis:

resetMatrix()

A continuación se muestran los ejemplos para ilustrar la función resetMatrix().

Paso 1: Abra el editor web en línea https://editor.p5js.org/.

Paso 2: escriba el siguiente código y ejecútelo para ver el resultado.

Ejemplo 1:

// Set up the function
function 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);
}

Producción:

Ejemplo 2:

// Set up the function
function 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);
}

Producción: