p5.js | Función imageMode()

La función imageMode() se utiliza para establecer el modo de imagen de una imagen. El modo de imagen define la posición de la imagen en el lienzo, cambiando la forma en que se interpretan los parámetros dados a la función image() .

Sintaxis:

imageMode( mode )

Parámetros: Esta función acepta un modo de parámetro único que define el modo a utilizar. Puede tener los siguientes valores:

ESQUINA: este modo interpreta los parámetros segundo y tercero dados a image() como la esquina superior izquierda de la imagen.
ESQUINAS: este modo interpreta los parámetros segundo y tercero dados a image() como la esquina superior izquierda y los parámetros cuarto y quinto como la esquina inferior derecha de la imagen.
CENTRO: Este modo interpreta los parámetros segundo y tercero dados a image() como el punto central de la imagen. Además, si se especifican los parámetros cuarto y quinto, se utilizan como ancho y alto de la imagen.

El siguiente ejemplo ilustra la función imageMode() en p5.js:

Ejemplo:

function preload() {
  img = loadImage('sample-image.png');
}
  
function setup() {
  imageModes = [
    CORNER,
    CORNERS,
    CENTER
  ];
  i = 0;
  currMode = imageModes[i];
  
  createCanvas(600, 400);
  textSize(22);
  
  // Create a button for the switching
  // the imageMode
  switchBtn = createButton("Change imageMode");
  switchBtn.position(30, 400)
  switchBtn.mousePressed(switchMode);
}
  
function draw() {
  clear();
  text("Click on the button change the current"+
                           " imageMode", 20, 20);
  text("Current imageMode: " + currMode, 20, 40);
  
  // Creating a rectangle to demonstrate
  // the location of the image
  rect(150, 150, 200, 200);
  
  // Setting the imageMode
  imageMode(currMode);
  
  // Drawing the image
  image(img, 150, 150, 200, 200);
}
  
function switchMode() {
  // Change the current imageMode
  if (i < imageModes.length - 1)
    i++;
  else
    i = 0;
  currMode = imageModes[i];
}

Producción: