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

Question

I am trying to use Seriously.js with a canvas as its source (as opposed to an image), specifically a p5.js canvas. In its README, Seriously.js states

Accept image input from varied sources: video, image, canvas, array, webcam, 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). As soon as I switch from the image to the p5.js canvas it does not work anymore. Here is the 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 ).

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)

I also tried the same with a canvas element that I simply created via HTML, it gives the same error.

So, my question: Is there any way to get this to work on a p5.js canvas? 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.

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.
It seems that p5 fires in DOMContentLoaded, so if you wait until the window's load event, you should be fine.

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

  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>

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

Question

1 answers

solution1
3 ACCPTED 2017-09-18 00:32:57

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

Question

1 answers

solution1 3 ACCPTED 2017-09-18 00:32:57

solution1
3 ACCPTED 2017-09-18 00:32:57