p5, поместите анимированный GIF в фон - PullRequest
Новая
       28

p5, поместите анимированный GIF в фон

0 голосов
/ 03 апреля 2019

Я хочу нарисовать анимированное GIF-изображение с помощью p5. Начиная с этого эскиза: https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z

Чтобы показать мою проблему, я добавил эллипс в положение мыши в эскизе. Когда мышь перемещается над статическим изображением, эллипс находится сверху изображения. Но когда мышь перемещается над анимированным изображением, изображение все еще находится перед эллипсом. 

/**
 * demonstrates how to load a GIF image using
 * createImg to create an <img> on the page
 * and to use that to update animation
 * (and illustrates how p5's loadImage loads only
 * one frame otherwise).
 */

var gif_loadImg, gif_createImg;

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

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

function draw() {
  // loads only first frame
  image(gif_loadImg, 50, 50);

  // updates animation frames by using an html
  // img element, positioning it over top of
  // the canvas.
  gif_createImg.position(50, 350);
  ellipse(mouseX, mouseY, 50,50);
}

Подводя итог: я хотел бы отодвинуть анимированный GIF на задний план. Я пробовал что-то вроде этого: 

background(gif_createImg.position(50, 350));

Но это работает не так, как статическое изображение. У кого-нибудь есть предложение? Может быть, дополнительная библиотека, которая может справиться с этим? Заранее спасибо!

...