createVideos

Parameters

createVideos(urls: Array<string>, max: number): Array<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 images the user can select.

In p5.js, you can call createVideo(url) in setup or preload to create a single p5.MediaElement object that you can draw to the canvas. In Butter, the URL parameter is ignored. A media field is added in the sidebar for the component so that users can change the video that gets loaded.

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

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

Butter will make sure that the array returned by createVideos 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 videos the user selected.