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

Question

I am trying to use Seriously.js with a canvas as its source (as opposed to an image), specifically a p5.js canvas. 我正在尝试将Severiously.js与画布作为源（而不是图像）一起使用，特别是p5.js画布。 In its README, Seriously.js states 在其自述文件中，Severlyly.js声明

Accept image input from varied sources: video, image, canvas, array, webcam, Three.js 接受来自各种来源的图像输入：视频，图像，画布，数组，网络摄像头，Three.js

However, I have not managed to get a canvas as the source to work. 但是，我还没有设法将画布用作工作源。

What I tried: I took this live example and modified it to use a canvas instead of the image (and getting rid of the require.js thing). 我尝试的方法：我采用了这个实时示例，并将其修改为使用画布而不是图像（并摆脱了require.js问题）。 As soon as I switch from the image to the p5.js canvas it does not work anymore. 从图像切换到p5.js画布后，它不再起作用。 Here is the HTML: 这是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>

(In the sketch.js I made sure that the canvas has the id of p5sourceCanvas ). （在sketch.js我确保画布的ID为p5sourceCanvas ）。

When I run this, the console gives me the following error: 当我运行此命令时，控制台显示以下错误：

seriously.js:3331 Uncaught Error: Unknown source type

(for convenience here is the line in the Seriously.js source code) （为方便起见，这是Severlyly.js源代码中的行）

I also tried the same with a canvas element that I simply created via HTML, it gives the same error. 我还尝试了通过HTML简单创建的canvas元素的操作，它给出了相同的错误。

So, my question: Is there any way to get this to work on a p5.js canvas? 所以，我的问题是：有什么办法可以使它在p5.js画布上工作？ Or am I misunderstanding the term canvas in the docs? 还是我误解了文档中的“画布”一词？ Or is it a bug? 还是一个错误？

Edit: For further clarification here is the entire p5.js sketch. 编辑：为进一步澄清，这里是整个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

Yes you can, but you will have to execute your Seriously code only after the p5.js one has executed. 是的，可以，但是只有在执行了p5.js之后，才必须执行认真的代码。
It seems that p5 fires in DOMContentLoaded, so if you wait until the window's load event, you should be fine. 似乎p5在DOMContentLoaded中触发，所以如果您等到窗口的load事件，就可以了。

Also, while I don't really know Seriously.js, it seems that you need to call the canvas Seriously# source 's update() in order for Seriously to know it has to re-render it. 另外，尽管我并不真正了解Severlyly.js，但似乎您需要调用画布Severlyly＃ source的update() ，以便Seriously知道它必须重新呈现。 One way to do so, is to attach a property to your CanvasElement, that you will try to call from within the p5 draw loop : 一种方法是将属性附加到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画布上使用Seriously.js吗？

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-09-18 00:32:57

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-09-18 00:32:57

解决方案1
3 已采纳 2017-09-18 00:32:57