p5.js función de precarga()

La función preload() en p5.js se usa para cargar archivos de forma asincrónica antes de la función setup(). Se ejecuta exactamente una vez cuando se carga el boceto.

La mayoría de los usuarios no utilizan la función de precarga() ya que la misma tarea se puede realizar en la función de configuración(). Sin embargo, es bueno separar código similar en nuestro programa para mejorar su escalabilidad y modularidad. En general, la función preload() se usa para cargar cosas como imágenes, modelos 3D, fuentes, etc. en el boceto. El texto «cargando…» se muestra durante la carga de los recursos.

Sintaxis:

preload() {
   // All loading calls here
}

Parámetros: Esta función no acepta ningún parámetro.

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

Ejemplo 1:

let gfg_img;
function preload() {
  
  // Loading the image
  gfg_img = loadImage('/gfg.png');
}
  
function setup() {
  createCanvas(400, 400);
}
  
function draw() {
  
  // Set background color to green
  background('green');
  
  // Show loaded image on screen at (100, 100)
  image(gfg_img, 100, 100);
}

Producción:

Ejemplo 2:

let cylinder;
function preload() {
  
  // Loading a cylinder model
  cylinder = loadModel('/cylinder.stl', true);
}
  
function setup() {
  createCanvas(400, 400, WEBGL);
  noLoop();
}
  
function draw() {
  
  // Set background color to green
  background('green');
  
  // Display and rotate the model
  rotateX(90);
  model(cylinder);
}

Producción: