how to display GIF in the background?

Berlina

I would like to create a disco light effect on a dance gif. So the gif is on the bottom layer, then a rectangle is flashing on top according to framerate. But somehow the gif is alway on the top, even though I place it before the rectangle. Could someone help me review the code?

var img;  
function preload() {   
img = createImg("dancegif.gif");
}

function setup(){
    createCanvas(window.innerWidth,window.innerHeight); 
}

function draw(){
    background(255);

  img.position(0,0);

    // flashing effect 
    noStroke();
    if(frameCount % 7 < 3 ){
      noFill(); //pic 33%  12 
    } else if(frameCount % 7 > random(3,4) ){
        fill(255);//white 33% 56 
    } else{
        fill(0);//black 34% 
    }
    rect(0,0,window.innerWidth,window.innerHeight);

}

GoToLoop

http://p5js.org/reference/#/p5/loadImage
http://p5js.org/reference/#/p5/image

Berlina

Have tried your instruction in varies ways but both sample of img/load img are not working.

GoToLoop

Just saying it didn't work w/o describing what exactly went wrong isn't very helpful. [-(

1 of the issues w/ createImg() is that its origin coords is the webpage itself rather than the sketch's canvas. :|

You can look up older posts about it below:
https://forum.Processing.org/two/discussions/tagged?Tag=createimg()

But i guess using some specific library for ".gif" can make things much easier for ya: :D

1. http://p5js.SketchPad.cc/sp/pad/view/ro.COx$0Iy6rWpzsc/latest
2. https://GitHub.com/antiboredom/p5.gif.js
3. https://forum.Processing.org/two/discussions/tagged?Tag=loadgif()