将 gif 添加到 p5.js “艺术品”

【问题标题】：Adding a gif to a p5.js "artwork"将 gif 添加到 p5.js “艺术品”
【发布时间】：2019-09-24 20:48:25
【问题描述】：

我尝试将 p5.js 中的 gif 添加到我的“艺术品”（基本上是带有移动元素的图片）。

但是我遇到了错误“Uncaught TypeError: gifimage.position is not a function”，即使我认为我按照不同指南中的指示进行操作。

我试过这个：https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z

下面是代码（......代表不影响错误的部分）。

var gifimage;

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

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

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

【问题讨论】：

你在哪里调用你的preload函数？

标签： javascript gif p5.js

【解决方案1】：

位置不是 p5.js Image 的函数。为了使用位置，您需要使用 createImg 创建一个 img dom 元素

这里我修改了这个sketch 来展示如何通过按键来改变img 的位置。

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);
  }
}

要使用 dom 函数，您需要包含 p5.js 库和 p5.dom.js 插件。

<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>

【讨论】：