Static p5_sys::global::applyMatrix[][src]

pub static applyMatrix: ApplyMatrixInternalType
Expand description

Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia.

The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form:

The transformation matrix used when applyMatrix is called

Examples

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  background(200);
  // Equivalent to translate(x, y);
  applyMatrix(1, 0, 0, 1, 40 + step, 50);
  rect(0, 0, 50, 50);
}
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  background(200);
  translate(50, 50);
  // Equivalent to scale(x, y);
  applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
  rect(0, 0, 50, 50);
}
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  let angle = map(step, 0, 20, 0, TWO_PI);
  let cos_a = cos(angle);
  let sin_a = sin(angle);
  background(200);
  translate(50, 50);
  // Equivalent to rotate(angle);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
}
function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  let angle = map(step, 0, 20, -PI / 4, PI / 4);
  background(200);
  translate(50, 50);
  // equivalent to shearX(angle);
  let shear_factor = 1 / tan(PI / 2 - angle);
  applyMatrix(1, 0, shear_factor, 1, 0, 0);
  rect(0, 0, 50, 50);
}
function setup() {
  createCanvas(100, 100, WEBGL);
  noFill();
}

function draw() {
  background(200);
  rotateY(PI / 6);
  stroke(153);
  box(35);
  let rad = millis() / 1000;
  // Set rotation angles
  let ct = cos(rad);
  let st = sin(rad);
  // Matrix for rotation around the Y axis
  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(50);
}

Parameters

a numbers which define the 2x3 matrix to be multiplied

b numbers which define the 2x3 matrix to be multiplied

c numbers which define the 2x3 matrix to be multiplied

d numbers which define the 2x3 matrix to be multiplied

e numbers which define the 2x3 matrix to be multiplied

f numbers which define the 2x3 matrix to be multiplied