p5.js | RectMode() Función – Barcelona Geeks

La función rectMode() en p5.js se usa para cambiar la forma en que se interpretan los parámetros dados a la función rect() . Esto modifica la ubicación desde donde se dibuja el rectángulo.

A esta función se le pueden dar cuatro modos:

ESQUINA: este modo interpreta los dos primeros parámetros como la esquina superior izquierda de la forma. Los parámetros tercero y cuarto son su ancho y alto. Es el modo predeterminado.
ESQUINAS: este modo interpreta los primeros dos parámetros como la esquina superior izquierda y los otros dos parámetros como la ubicación de la esquina opuesta.
CENTRO: Este modo interpreta los dos primeros parámetros como el punto central de la forma. Los parámetros tercero y cuarto especifican el ancho y la altura de la forma.
RADIO: Este modo interpreta los dos primeros parámetros como el punto central de la forma. Los parámetros tercero y cuarto especifican la mitad del ancho y alto de la forma.

Sintaxis:

rectMode( mode )

Parámetros: Esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación.

modo: Es una constante que define qué modo usar. Puede tener los valores de ESQUINA, ESQUINAS, CENTRO o RADIO.

Los siguientes ejemplos ilustran la función rectMode() en p5.js:

Ejemplo:

let currMode;
  
function setup() {
  createCanvas(500, 400);
  textSize(16);
  
  // Define all the rectModes()
  let rectModes = [CORNER, CORNERS, CENTER, RADIUS];
  let index = 0;
  currMode = rectModes[index];
  
  // Define a button to switch between the modes
  let closeBtn = createButton("Change rectMode");
  closeBtn.position(220, 40);
  closeBtn.mouseClicked(() => {
    if (index < rectModes.length - 1) index++;
    else index = 0;
    currMode = rectModes[index];
  });
}
  
function draw() {
  clear();
  text("Click on the button to"+
       " change the rectMode()", 20, 20);
  fill("green");
  
  // Draw the first rectangle with default mode
  rectMode(CORNER);
  rect(100, 100, 100, 100);
  
  fill("red");
  
  // Set the rectMode according to the defined mode
  rectMode(currMode);
  
  // Draw the second rectangle according to the
  // selected rectMode() and different dimensions
  rect(100, 100, 50, 50);
  
  // Draw circles to demonstrate corners of
  // the first rectangle
  circle(100, 100, 10);
  circle(200, 100, 10);
  circle(100, 200, 10);
  circle(200, 200, 10);
  
  fill("black");
  text("Current Mode: " + currMode, 20, 250);
  
  // Show details of parameter according to selected mode
  switch (currMode) {
    case CORNER:
      text("1st Parameter: upper-left"+
           " corner x coord", 20, 280);
      text("2nd Parameter: upper-left"+
           " corner y coord", 20, 300);
      text("3rd Parameter: width", 20, 320);
      text("4th Parameter: height", 20, 340);
      break;
    case CORNERS:
      text("1st Parameter: upper-left corner"+
           " x coord", 20, 280);
      text("2nd Parameter: upper-left corner"+
           " y coord", 20, 300);
      text("3rd Parameter: opposite corner x", 20, 320);
      text("4th Parameter: opposite corner y", 20, 340);
      break;
    case CENTER:
      text("1st Parameter: shape's center"+
           " point x coord", 20, 280);
      text("2nd Parameter: shape's center"+
           " point y coord", 20, 300);
      text("3rd Parameter: width", 20, 320);
      text("4th Parameter: height", 20, 340);
      break;
    case RADIUS:
      text("1st Parameter: shape's center"+
           " point x coord", 20, 280);
      text("2nd Parameter: shape's center"+
           " point y coord", 20, 300);
      text("3rd Parameter: half of shape's"+
           " width", 20, 320);
      text("4th Parameter: half of shape's"+
           " height", 20, 340);
      break;
    default:
      break;
  }
}

Producción:

rectMode-allModes