p5.js asset-loading functions (loadFont, loadImage) are asynchronous and must be called in preload() or given a callback to avoid undefined references

loadFont, loadImage, loadModel, and loadShader are asynchronous network operations. p5 provides preload() specifically to block sketch startup until all assets finish loading. Calling these functions in setup() or draw() without a callback returns immediately with an unresolved object; the asset is not ready when the draw loop begins. Using a font or image that was loaded outside preload() (or without a callback) causes it to be undefined, and text() silently draws nothing or throws an error. The fix is always: move asset loads into preload(), or pass a callback that runs your setup code after the load completes.

Examples

function preload() { myFont = loadFont('myfont.ttf'); } — safe. function setup() { myFont = loadFont('myfont.ttf'); textFont(myFont); } — unsafe; myFont may not be ready.

Assessment

A sketch calls loadFont() inside setup() and then uses textFont() in draw(). Predict the failure mode and rewrite the loading code correctly.