loadImageOrVideo

← All Butter documentation

Parameters

loadImageOrVideo(url: string): p5.Image | p5.MediaElement

• url

  A URL to load. The URL may be empty, and Butter will provide a value from the user.

In p5.js, you can call loadImage(url) in preload to load a p5.Image object, or you can call createVideo(url) to load a p5.MediaElement. Both can be drawn to the canvas with the image(media, x, y) function.

In Butter, if you just want to draw the media to the canvas regardless of whether it is an image or a video, you can use loadImageOrVideo. It will return a p5.Image if the user selects an image, or a p5.MediaElement if the user selects a video.

let media
function preload() {
  media = loadImageOrVideo('')
}
function setup() {
  createCanvas(300, 300)
}
function draw() {
  clear()
  image(
    media,
    0, 0, width, height,
    0, 0, media.width, media.height,
    CONTAIN
  )
}