P5 Asynchronous Loading Library

A simple Javascript library for P5JS that makes asynchronous loading easy and seamless. You can draw things to the canvas while files are still loading.

Example usage

function setup(){
  
  let filesToLoad = {
    sunsetPicture: "sunset.png", //A global variable called sunsetPicture will be created
    oceanPicture: "ocean.png", //FileLoader autodetects this is an image
    oceanWavesSound: "sounds/ocean.mp3", //FileLoader autodetects this is a sound file
  }
  
  let dumpObject = window; //when set to window, sunsetPicture, oceanPicture, and 
                           //oceanWavesSound will be global variables
  
  let hideAutoFillLogs = false;
  
  myFileLoader = new FileLoader(filesToLoad, dumpObject, hideAutoFillLogs)
  
}

function onLoadComplete(){
  console.log("All files have finished loading")
  console.log("Sunset picture width:" + sunsetPicture.width )
  console.log("Sunset picture height:" + sunsetPicture.height )
  oceanWavesSound.play();
}

function draw(){
  background(0)
  
  if(myFileLoader.complete){
    image(sunsetPicture, 0, 0)
    image(oceanPicture, 200, 0)
  }
  if(!myFileLoader.complete){
    fill(255);
    text("Loading...", 100, 100)
    text("Progress: " + myFileLoader.progress + "/" + myFileLoader.completion, 100, 200)
  }
  
}

How to Use

Syntax

In your setup function, write:

myFileLoader = new FileLoader(filesToLoad, [dumpObject], [hideAutoFillLogs])

Parameters

filesToLoad

Object where each property is a file to load. Each property can either be a string containing the filepath or an array of settings for loading the file:

filesToLoad = {
  myFile: "filepath_here",
  myFile2: ["filepath_here", loadFunctionToUse, successCallback, failCallback],
  //everything in the above array is optional (except for the filepath) and can be in any order
  myFileExample: ["assets/data/weather.html", loadStrings, weatherLoaded, weatherFailedToLoad]
  
}

If the fileLoader is not told which of p5's load functions to use (e.g. loadImage, loadSound, loadJSON) then it will guess based on the file extension (see this list). If the file extension is unfamiliar, it will use loadBytes.

dumpObject (optional)

The object in which you would like the loaded images/sounds/etc to be stored. Default is window (making the images/sounds/etc global variables).

hideAutoFillLogs (optional)

Boolean. When true, FileLoader will not log a message to the console when it autodetects file types for you. Default is false.

Other Features

• If you write a function called onLoadComplete, it will be triggered as soon as the files finish loading (see the example usage above).
• myFileLoader.complete: A boolean which stores whether or not all files have been loaded (or at least attempted to load)
• myFileLoader.progress: A number storing how many files have loaded (or at least attempted to load) so far
• myFileLoader.completion: A number storing how many files there are to load in total
• myFileLoader.successCount: A number storing how many files have successfully loaded
• myFileLoader.failCount: A number storing how many files have failed to load

Sound Element Loader

If you want to load your sound files as plain HTML audio elements (instead of P5 Sound objects), create a SoundElementLoader instead of a FileLoader. The arguments are exactly the same as with the FileLoader (except there is no third argument because it logs nothing to the console).

let mySoundElementLoader = new SoundElementLoader( filesToLoadObject, [dumpObject] )