p5.js | función escala()

La función scale() en p5.js se usa para aumentar o disminuir el tamaño de una forma o modelo expandiendo o contrayendo sus vértices. Los valores de escala se especifican como porcentajes decimales, es decir, un valor de escala de «2,0» aumentaría las dimensiones de la forma en un 200 %. De manera similar, un negativo de «-2.0» disminuiría las dimensiones de la forma en un 200%

Los objetos siempre escalan desde su origen relativo al sistema de coordenadas. El parámetro z de esta función solo está disponible en el modo WebGL para escalar en el eje z.

Como scale()es una transformación, cada transformación que ocurre después de una llamada multiplica el efecto. Si scale()se llama dentro del draw()bucle, la transformación se restablece cuando el bucle comienza de nuevo.

Sintaxis:

scale( s, [y], [z] )

O

scale( scales )

Parámetros: esta función acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación.

• s: Es un p5.Vector, Número o array de Números que definen el porcentaje para escalar el objeto. Si se dan múltiples argumentos, denota el porcentaje para escalar el objeto en la dirección x.
• y: es un número que denota el porcentaje para escalar el objeto en la dirección y. Es un parámetro opcional.
• z: es un número que denota el porcentaje para escalar el objeto en la dirección z. Es un parámetro opcional.
• escalas: es un p5.Vector o array de números que especifican porcentajes por eje para escalar el objeto.

El siguiente programa ilustra la función scale() en p5.js:

Ejemplo 1:

function setup() {
  createCanvas(500, 400);
  textSize(16);
  
  scaleXslider = createSlider(-3, 3, 1, 0.1);
  scaleXslider.position(30, 30);
  
  scaleYslider = createSlider(-3, 3, 1, 0.1);
  scaleYslider.position(30, 50);
}
  
function draw() {
  clear();
  text("Move the sliders to change the scale value", 20, 20);
  fill("red");
  rect(150, 150, 100, 100);
  
  // Get the scale parameters
  let scaleXValue = scaleXslider.value();
  let scaleYValue = scaleYslider.value();
  
  text("Scale x value: " + scaleXValue, 20, 350);
  text("Scale y value: " + scaleYValue, 20, 370);
  
  // Set the scale according to properties
  scale(scaleXValue, scaleYValue);
  
  fill("green");
  rect(150, 150, 100, 100);
}

Producción:

Ejemplo 2:

function preload() {
  ballObj = loadModel("models/ball.obj", true);
}
  
function setup() {
  createCanvas(500, 300, WEBGL);
  
  scaleXslider = createSlider(-3, 3, 0.5, 0.1);
  scaleXslider.position(30, 30);
  
  scaleYslider = createSlider(-3, 3, 0.5, 0.1);
  scaleYslider.position(30, 50);
  
  scaleZslider = createSlider(-3, 3, 0.5, 0.1);
  scaleZslider.position(30, 70);
  
  debugMode();
}
  
function draw() {
  clear();
  noStroke();
  lights();
  orbitControl();
  
  // Get the scale parameters
  let scaleXValue = scaleXslider.value();
  let scaleYValue = scaleYslider.value();
  let scaleZValue = scaleZslider.value();
  
  // Set the scale according to properties
  scale(scaleXValue, scaleYValue, scaleZValue);
  
  fill("green")
  model(ballObj);
}

Producción:

Referencia: https://p5js.org/reference/#/p5/scale