P5.js 的 preload() 函数

在 P5.js 中，preload() 函数是用来在页面加载之前就载入素材（如图片、字体文件、音频文件等）的函数。使用这个函数的好处在于可以避免素材加载不及时导致的页面闪烁问题，提高了程序的用户体验。

preload() 函数的语法

preload() 函数是 P5.js 中自带的一个函数，其语法如下：

function preload() {
  // 载入素材的代码
}

一般而言，将素材文件的路径和名称放在相应代码中。如果有多个文件需要加载，可以使用数组形式载入：

let img1, img2;

function preload() {
  img1 = loadImage('path/image1.jpg');
  img2 = loadImage('path/image2.jpg');
}

利用 preload() 函数加载素材

图片加载

在 P5.js 中，我们可以使用 loadImage() 函数来载入图片素材，载入后可以调用 image() 函数来显示图片。下面是一个利用 preload() 函数载入图片的示例：

let img1, img2;

function preload() {
  img1 = loadImage('path/image1.jpg');
  img2 = loadImage('path/image2.jpg');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  image(img1, 0, 0);
  image(img2, 50, 50);
}

在这个例子中，图片 img1 和 img2 在 preload() 函数中被加载，然后在 draw() 函数中调用 image() 函数进行显示。

字体文件加载

在 P5.js 中，也可以使用 loadFont() 函数来载入字体文件，载入后可以应用于 text() 函数显示文本。下面是一个利用 preload() 函数载入字体文件的示例：

let customFont;

function preload() {
  customFont = loadFont('path/customFont.otf');
}

function setup() {
  createCanvas(400, 400);
  textFont(customFont);
  textSize(32);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(220);
  fill(0);
  text('Hello, World!', width/2, height/2);
}

在这个例子中，字体文件 customFont.otf 在 preload() 函数中被加载，然后在 setup() 函数中应用于 textFont() 函数，最终应用于 text() 函数显示文本。

音频文件加载

在 P5.js 中，可以使用 loadSound() 函数来载入音频文件，载入后可以调用 play()、stop()、pause() 等函数来控制播放。下面是一个利用 preload() 函数载入音频文件的示例：

let sound;

function preload() {
  sound = loadSound('path/sound.wav');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed() {
  sound.play();
}

在这个例子中，音频文件 sound.wav 在 preload() 函数中被加载，然后在 mousePressed() 函数中调用 play() 函数进行播放。

注意事项

• preload() 函数只会执行一次，主要用于初始化素材，后续不会再次执行。如果需要重新加载素材，需要重新刷新页面。

• 确保素材路径和名称正确，否则会导致加载失败。

• 如果需要在素材加载完成后执行一些操作，可以使用 loaded() 函数，该函数会在素材加载完成后自动调用。例如：

  let img1, img2;
  
  function preload() {
    img1 = loadImage('path/image1.jpg', loaded);
    img2 = loadImage('path/image2.jpg', loaded);
  }
  
  function loaded() {
    console.log('素材加载完成');
  }
  

总结

P5.js 的 preload() 函数是一个非常有用的函数，可以在页面加载前载入素材，避免了页面闪烁的问题，提高了用户体验。我们可以利用 loadImage() 函数加载图片素材、利用 loadFont() 函数加载字体文件、利用 loadSound() 函数加载音频文件，从而更好地应用 image()、text()、play() 等函数。在使用时需要注意路径和名称的正确性；如果需要在素材加载完成后执行操作，可以使用 loaded() 函数。