0
キャンバスをソース（イメージではなく）として使用しているSeriously.js、特にp5.jsキャンバスを使用しようとしています。 READMEのSeriously.jsの状態でp5.jsのキャンバスにSeriously.jsを使用できますか？
Accept image input from varied sources: video, image, canvas, array, webcam, Three.js
しかし、私は仕事のソースとしてキャンバスを取得できませんでした。
私が試したこと：this live exampleを取り込み、画像の代わりにキャンバスを使用するように修正しました（そして、require.jsのものを取り除いています）。イメージからp5.jsキャンバスに切り替えると、すぐには動作しません。
<!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>
（私はキャンバスがp5sourceCanvasのIDを持っていることを確認しましたsketch.jsで）：ここではHTMLです。
私はこれを実行すると、コンソールは私に次のエラーを与える：
seriously.js:3331 Uncaught Error: Unknown source type
（便宜上hereためSeriously.jsソースコード内の行である）
私もで同じことを試してみましたcanvas要素をHTMLで単純に作成した場合、同じエラーが発生します。
私の質問：これを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);
}
P5コードページのLoadイベントで最もlikeky RANです（それ以外の場合はドキュメントに追加できません）、真剣に電話をかけたときに '＃p5sourceCanvas'はnullになります。 – Kaiido
縮小されたp5.jsのソースコードを見ると、webGLのコンテキストが得られるキャンバスが1つあります。このキャンバスは、DOMに 'defaultCanvas0'というIDで条件付きで追加されています（または、そのIDがすでに使用されている場合は、より高い数値です）。 'P5がインスタンス化された後、またはP5インスタンスをインスタンス化してからP5オブジェクトを使用してキャンバスを取得した後。例えば、 'const myP5 = new P5（）; moblur.source = seriously.source（myP5.canvas/*または "＃" + myP5.canvas.id * /）; '完全な例がなければ、それ以上のことはできません。 – Blindman67
@ Blindman67あなたは['id'メソッド]（https://p5js.org/reference/#/p5.Element/id）を使ってキャンバス要素のカスタムIDを定義することができます。 OPはおそらく 'sketch.js'ファイルでそれを行いました。しかし、とにかく、問題は明らかにp5が真に呼び出す前に初期化されるのを待たないということです。p5コードが頭にあるので、真にコードが呼び出される前に、その要素を本体に追加する方法はありません。 *（\ * p5がMutationObserversを使用していた場合を除いて、よくありませんが）* – Kaiido