Función p5.js applyMatrix()

La función applyMatrix() en p5.js se usa para multiplicar la array dada como los parámetros con la array actual. Esto se puede utilizar para realizar operaciones de traslación, escala, corte y rotación al mismo tiempo. Esta es una operación poderosa y se puede usar para manipular fácilmente objetos en la escena.

Sintaxis:

applyMatrix(a, b, c, d, e, f)

Parámetros: este método tiene seis parámetros, como se mencionó anteriormente y se describe a continuación:

• a: Es un número que define la array de 2×3 a multiplicar.
• b: Es un número que define la array de 2×3 a multiplicar.
• c: Es un número que define la array de 2×3 a multiplicar.
• d: Es un número que define la array de 2×3 a multiplicar.
• e: Es un número que define la array de 2×3 a multiplicar.
• f: Es un número que define la array de 2×3 a multiplicar.

Los siguientes ejemplos demuestran la función applyMatrix() en p5.js:

Ejemplo 1: En este ejemplo, la array se usa para rotar un rectángulo en algún ángulo.

function setup() {
  createCanvas(800, 600);
}
  
function draw() {
  
  let step = frameCount % 50;
  
  // Calculate the angle and the 
  // sin and cos values
  let angle = map(step, 10, 60, 0, PI);
  let cos_a = cos(angle);
  let sin_a = sin(angle);
  
  // Set the background colour
  background(200);
  
  // Translate the elements
  translate(500, 50);
  
  // Use applyMatrix() to multiply using
  // the given values
  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);
}

Producción:

Ejemplo 2: En este ejemplo, la array se usa para traducir las imágenes 2D.

function setup() {
    
  // Create canvas
  createCanvas(800, 600);
    
  // Set the frame rate
  frameRate(20);
}
  
function draw() {
    
  let step1 = frameCount % 15;
  let step2 = frameCount % 50;
  
  fill('lightgreen');
  background(200);
    
  // Apply matrix transform equivalent
  // to translate(x, y)
  applyMatrix(1, 0, 0, 1, 300 + step1, 50);
    
  // Set a shape to be used
  ellipse(56, 46, 185, 185);
    
  fill('red');
    
  // Apply matrix transform equivalent
  // to translate(x, y)
  applyMatrix(1, 0, 0, 1, 100 + step2, 50);
    
  // Set the shape to be used
  rect(30, 20, 50, 50);
}

Producción:

Ejemplo 3: En este ejemplo, la array se usa para escalar las imágenes 2D.

function setup() {
  // Create canvas
  createCanvas(800, 600, WEBGL);
  
  // Set the frame rate
  frameRate(20);
}
  
function draw() {
  let step1 = frameCount % 10;
  let step2 = frameCount % 20;
  
  fill("lightgreen");
  background(200);
  
  // Apply matrix transformation 
  // equivalent to translate(x, y)
  applyMatrix(1 / step1, 0, 0, 1 / step1, 0, 0);
  
  // Set the shape to be used
  ellipse(185, 185, 185, 185);
  
  fill("red");
  
  // Apply matrix transformation 
  // equivalent to scale(x, y)
  applyMatrix(1 / step2, 0, 0, 1 / step2, 0, 1 / step2);
  
  // Set the shape to be used
  rect(30, 20, 100, 100);
}

Producción:

Ejemplo 4: En este ejemplo, la array se usa para rotar el gráfico.

function setup() {
  createCanvas(400, 400, WEBGL);
  noFill();
}
  
function draw() {
  background(200);
  
  // Rotate the box
  rotateX(PI / 2);
  rotateY(PI / 8);
  
  stroke(153);
  box(35);
  
  let rad = millis() / 500;
  
  // Set rotation angle
  let ct = cos(rad);
  let st = sin(rad);
  
  // Apply matrix for rotation 
  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);
  
  stroke(255);
  box(100);
}

Producción: