Adding a gif to a p5.js “artwork”

Question

I have tried to add a gif in p5.js to my "artwork" (basically a picture with moving elements).

However I encounter the error "Uncaught TypeError: gifimage.position is not a function" even though I think I am doing as instructed in different guides.

I tried this: https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z

Below is the code (the ......... represent the parts which do not affect the error).

var gifimage;

function preload() {
    .........
    gifimage = createImage("gifimage.gif");
}

function setup() {
    createCanvas(1920, 1080);
}

function draw() {
    .........
    if (keyIsPressed === true) {
        gifimage.position(500, 800);
    }
}

Answer 1

Position is not a function of p5.js Image . In order to use position you will need to create a img dom element with createImg

Here I have modified this sketch to show how to change the position of an img by pressing a key.

var gif_createImg;

function preload() {
  gif_createImg = createImg("vegetables.gif");
}

function setup() {
  createCanvas(500, 700);
  background(0);
}

function draw() {
    background(0);


  // updates animation frames by using an html
  // img element, positioning it over top of
  // the canvas.
  if (keyIsPressed){
    gif_createImg.position(50, 50);
  } else {
    gif_createImg.position(100,100);
  }
}

To use the dom functions you will need to include the p5.js lib and the p5.dom.js plugin.

<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.js"></script>