Question

我正在尝试使用Seriously.js将画布作为其源（而不是图像），特别是p5.js画布。在README中，Seriously.js陈述

接受来自不同来源的图像输入：视频，图像，画布，数组，网络摄像头，Three.js

但是，我还没有设法将画布作为工作源。

我尝试了什么：我使用this live example并修改它以使用画布而不是图像（并删除require.js的东西）。一旦我从图像切换到p5.js画布，它就不再起作用了。这是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中，我确保画布的ID为p5sourceCanvas）。

当我运行它时，控制台给出了以下错误：

seriously.js:3331 Uncaught Error: Unknown source type

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

我也尝试使用我只是通过HTML创建的canvas元素，它也会出现同样的错误。

所以，我的问题：有没有办法让这个在p5.js画布上工作？或者我是否误解了文档中的术语画布？或者这是一个错误？

编辑：有关进一步说明，请参阅整个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中触发，所以如果你等到窗口的加载事件，你应该没问题。

另外，虽然我不太了解Seriously.js，但您似乎需要认真地调用画布＃source＆＃39; s update()以便认真了解它必须重新渲染它。一种方法是将属性附加到CanvasElement，您将尝试从p5 draw循环中调用：

＆＃13;

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

＆＃13;

	img {
			display: none;
		}

		#controls {
			display: inline-block;
			vertical-align: top;
		}

		#controls input {
			width: 400px;
		}

＆＃13;

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

＆＃13;

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

1 个答案: