loadImagesOrVideos

Parameters

loadImagesOrVideos(urls: Array<string>, max: number): Array<p5.Image | p5.MediaElement>

• urls

  An array of URLs to load. The array may be empty, and Butter will provide values from the user.

• max

  The maximum number of assets the user can select.

Butter provides the loadImageOrVideo function to load either a p5.Image or a p5.MediaElement video depending on what the user selects.

You might sometimes want to load a variable number of images or videos. Rather than calling loadImageOrVideo many times, Butter provides a loadImagesOrVideos function that lets users select up to a specified maximum number of media. It takes in an array of URLs, which get replaced with URLs that the user picks, and the maximum number of media the user can select. Call the method in preload. In setup and draw, the array it returns will include multiple p5.Image or p5.MediaElement objects that you can use.

let media
function preload() {
  media = loadImagesOrVideos([], 4)
}
function setup() {
  createCanvas(300, 300)
}
function draw() {
  clear()
  media.forEach((asset, i) => {
    image(
      asset,
      map(i, 0, imgs.length-1, 0, width * 0.2), // x
      height * 0.1, // y
      width * 0.8, // width
      height * 0.8, // height
      0, 0, asset.width, asset.height, // source
      CONTAIN
    )
  })
}

Butter will make sure that the array returned by loadImagesOrVideos is never empty. If the user has not selected anything yet, the array will contain a single empty p5.Image. Otherwise, it will contain all the images and videos the user selected.