P5js, имеющий элемент div за элементом холста

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

Я заметил, что вы использовали createImg для загрузки изображения в формате gif. Вы можете использовать эту библиотеку для отображения 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 
    } 

Моего пример показывает изображение, прикрепленное к центру мыши и рисует либо одно или другое изображение, в зависимости от того, какой половины холста вы парить.