div要素がキャンバス要素の後ろにあるP5js

Question

要素としてgifを追加しましたが、今はキャンバスにロードされた空洞の脳のイメージの後ろにレイアウトしたいと思います。 gif要素は脳の画像の上に横たわり、脳の画像の後ろに横たえたい。これを行う方法はありますか？ここでは、シンブルhttps://thimbleprojects.org/ejonescc16/63728/へのリンクです。

var brains; 
var coolpup; 
var canvas; 


function preload(){ 

    brains = loadImage('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/kevin%20final/assets/brains.png'); 

    coolpup = createImg('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/Brain/gifs/pup.gif'); 

} 

function setup() { 

    createCanvas(windowWidth,windowHeight); 
    strokeWeight(2); 

    rSlider = createSlider(0, 255, 100); 
    rSlider.position(50, windowHeight-80); 
    gSlider = createSlider(0, 255, 0); 
    gSlider.position(50, windowHeight-60); 
    bSlider = createSlider(0, 255, 255); 
    bSlider.position(50, windowHeight-40); 
} 

function draw() { 
    background(0); 
    r = rSlider.value(); 
    g = gSlider.value(); 
    b = bSlider.value(); 
    imageMode(CENTER); 

    coolpup.position(windowWidth/2-350, windowHeight/2-150); 
    coolpup.size(130,200); 

    image(brains, windowWidth/2, windowHeight/2);//DISPLAYS BRAINS 


    fill(255); 
    textSize(30); 
    text("This is my brain", windowWidth/2-375, windowHeight-100); 

    text("This is my brain while coding", windowWidth/2+65, windowHeight-100); 


} 

Answer 1

私はgifイメージを読み込むためにcreateImgを使用していることに気付きました。 代わりに、このライブラリを使用してgifを表示できます。 https://github.com/antiboredom/p5.gif.js

これは、上にマスクを追加するgifを最初に描画する必要があります。

var brains, coolpup, coding; 
    var canvas; 


    function preload() { 
    brains = loadImage('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/kevin%20final/assets/brains.png'); 
    coolpup = loadGif('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/Brain/gifs/pup.gif'); 
    coding = loadGif('https://media.giphy.com/media/11Yfb7wNfpIEfK/giphy.gif'); 
    } 

    function setup() { 
    createCanvas(windowWidth, windowHeight); 
    strokeWeight(2); 
    imageMode(CENTER); 
    } 

    function draw() { 
    background(0); 
    if (mouseX < width * 0.5) { 
     image(coolpup, mouseX, mouseY); 
    } else { 
     image(coding, mouseX, mouseY); 
    } 
    image(brains, windowWidth/2, windowHeight/2); //DISPLAYS BRAINS 
    } 

私の例では、マウスの中央に添付された画像を表示し、いずれか一つまたはあなたがホバリングキャンバスの半分に応じて、他の画像を描画します。