Preloading (p5.js)

In p5.js there is a third function besides setup() and draw() that becomes important when working with assets like images, fonts or other data. It is called preload().
The preload() function is invoked before setup() and ensures that the required data is available before the sketch starts to play.

function preload(){
…
}
function setup(){
…
}
function draw(){
…
}

All functions that load something should be called within preload()

let data; // this could be a text file, an image, a font, etc.

function preload(){
   data = loadImage('assets/filename.jpg')
   //data = loadFont('assets/filename.ttf');
   //data = loadStrings(('assets/filename.txt'))
   //data = loadModel('assets/filename.obj');
   //data = loadSound('assets/filename.mp3');
}

---

Language Comparison

Processing	p5.js
–	preload()