我可以在 p5.js canvas 上使用 Seriously.js 吗？

Question

我正在尝试将 Seriously.js 与 canvas 作为其来源（而不是图像）一起使用，特别是 p5.js canvas。在其自述文件中，Seriously.js 声明

Accept image input from varied sources: video, image, canvas, array, webcam, Three.js

但是，我还没有设法让 canvas 作为工作源。

我尝试了什么：我采用 this live example 并将其修改为使用 canvas 而不是图像（并摆脱了 require.js 东西）。一旦我从图像切换到 p5.js canvas 它就不再起作用了。这是 HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Seriously.js Directional Motion Blur Example</title>

  <script src="libraries/seriously.js"></script>
  <script src="libraries/effects/seriously.directionblur.js"></script>

  <script src="libraries/p5.js"></script>
  <script src="sketch.js" type="text/javascript"></script>

  <style type="text/css">

    #controls {
      display: inline-block;
      vertical-align: top;
    }

    #controls input {
      width: 400px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="640" height="619"></canvas>
  <div id="controls">
    <div><label for="amount">Blur</label><input type="range" id="amount" min="0" max="1" step="0.001" value="0.1"/></div>
    <div><label for="angle">Angle</label><input type="range" id="angle" min="0" max="6.2831853072" step="0.001" value="0"/></div>
  </div>
  <script type="text/javascript">
      var seriously = new Seriously();

      var target = seriously.target('#canvas');
      var moblur = seriously.effect('directionblur');
      moblur.source = seriously.source('#p5sourceCanvas');

      moblur.amount = '#amount';
      moblur.angle = '#angle';

      target.source = moblur;
      seriously.go();
  </script>
</body>
</html>

（在 sketch.js 中，我确保 canvas 的 ID 为 p5sourceCanvas）。

当我运行这个时，控制台给我以下错误：

seriously.js:3331 Uncaught Error: Unknown source type

（为了方便 here 是 Seriously.js 源代码中的行）

我也尝试了通过 HTML 创建的 canvas 元素，它给出了同样的错误。

所以，我的问题是：有什么方法可以让它在 p5.js canvas 上运行吗？还是我误解了文档中的 canvas 一词？或者这是一个错误？

编辑：为了进一步说明，这里是整个 p5.js 草图。

function setup() {
  sourceCanvas = createCanvas(640, 619);
  sourceCanvas.id('p5sourceCanvas');
}

function draw() {
  background(255, 0, 0);
  ellipse(random(width), random(height), 40, 40);
}

Answer 1

是的，你可以，但是你必须在 p5.js 代码执行后才执行你的 Seriously 代码。
似乎 p5 在 DOMContentLoaded 中触发，所以如果你等到 window 的加载事件，你应该没问题。

此外，虽然我不太了解 Seriously.js，但您似乎需要认真地致电 canvas#source 的 update()，以便认真地知道它必须重新渲染它。一种方法是将属性附加到您的 CanvasElement，您将尝试从 p5 draw 循环中调用它：

 function apply() {
   // declare our variables
   var seriously, // the main object that holds the entire composition
    moblur,
    target; // a wrapper object for our target canvas

   seriously = new Seriously();
   target = seriously.target('#canvas');
   moblur = seriously.effect('directionblur');
      // attach it to the DOM element
   moblur.source = p5sourceCanvas._seriouslyObj = seriously.source('#p5sourceCanvas');

   moblur.amount = '#amount';
   moblur.angle = '#angle';

   target.source = moblur;
   seriously.go();
  }
// only when the page has loaded
window.addEventListener('load', apply);

 img {
   display: none;
  }

  #controls {
   display: inline-block;
   vertical-align: top;
  }

  #controls input {
   width: 400px;
  }

<script src="https://cdn.rawgit.com/brianchirls/Seriously.js/513d2b86/seriously.js"></script>
<script src="https://cdn.rawgit.com/brianchirls/Seriously.js/513d2b86/effects/seriously.directionblur.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
<canvas id="canvas" width="640" height="619"></canvas>
 <div id="controls">
  <div><label for="amount">Blur</label><input type="range" id="amount" min="0" max="1" step="0.001" value="0.05"/></div>
  <div><label for="angle">Angle</label><input type="range" id="angle" min="0" max="6.2831853072" step="0.001" value="0"/></div>
 </div>
  <script>function setup() {
  sourceCanvas = createCanvas(640, 619);
  sourceCanvas.id('p5sourceCanvas');
}

function draw() {
  background(255, 0, 0);
  ellipse(random(width), random(height), 40, 40);
  // if seriously has been attached, call its update method
  sourceCanvas.elt._seriouslyObj && sourceCanvas.elt._seriouslyObj.update();
}
</script>

我可以在 p5.js canvas 上使用 Seriously.js 吗？

Can I use Seriously.js on a p5.js canvas?

javascript

canvas

p5.js