Error on 'Video Pixels' example on P5JS Reference Page


I'm trying to better understand video manipulation, and think that an example in the P5JS Reference Guide can help me visualize what I need. However, this example is throwing an error to the console. i'm getting the JS error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Can someone help me understand why this code isn't working?



  • You should at least mention which are those links? ~:>

  • ::facepalm:: I'm so sorry I omitted that tiny detail. :D Thanks for proofreading!

  • createVideo supports a callback that should probably be used in order to ensure the video asset is loaded before trying to do anything with it; but hasn't been in the demo... That could be the issue ("source width is 0" would suggest the file hasn't loaded) though when I try and amend the test page it still throws an error (though the video does appear for an instant).

  • edited December 2015

    Video doesn't show up due to fingers.hide();, of course. :>
    I did some tweaks here but no good. Seems very buggy to me: :-&

    var fingers;
    function preload() {
      fingers = createVideo(['assets/', 'assets/fingers.webm']);
    function setup() {
      createCanvas(320, 240);
    function draw() {
      const frame = fingers.get();
      if (!frame.loadPixels)  return;
      const step = round(constrain(mouseX>>3, 6, 32));
      var idx, darkness, radius;
      var x, y;
      for (y = 0; y < height; y += step)  for (x = 0; x < width; x += step) {
        idx = y*width + x;
        darkness = (0xff - frame.pixels[idx<<2]) / 0xff;
        radius = step * darkness;
        ellipse(x, y, radius, radius);
  • OK, thanks. Glad to know it's not just me.

  • It's weird: if you wait for the video to load and it returns the correct width; but running and inspecting the object appears to show conflicting property values (in Chrome):

    var fingers;
    function setup() {
      createCanvas(320, 240);
      // specify multiple formats for different browsers
      fingers = createVideo(['assets/',
                             'assets/fingers.webm'], function() {
                               // the Object 'preview' shows correct width
                               // but expand the mediaElement object
                               // and the width and height propeties are still listed as 0
    function draw() {
      var stepSize = round(constrain(mouseX / 8, 6, 32));
      for (var y=0; y<height; y+=stepSize) {
        for (var x=0; x<width; x+=stepSize) {
          var i = y * width + x;
          var darkness = (255 - fingers.pixels[i*4]) / 255;
          var radius = stepSize * darkness;
          ellipse(x, y, radius, radius);

    Odd :/

    Could be a browser bug; but if the behaviour is consistent on all browsers then maybe not... :(|)

  • Yeah. I agree it's odd/buggy. I pulled the code down to a local server, and it ran OK in Chrome and FF (with one of my own webm/mp4 videos). Gremlin in the works somewhere.

  • Possibly the video file then. I'd have to dig out the details, but there's a snippet in video files that includes data on length etc. Some encoders dump this at the end of the file where it's no use to anyone: you have to wait for the full file to load before you can do anything with it...

  • Answer ✓

    +1 on this problem. loadPixels errors out every time. i've tried a variety of video formats. wonder how/why it's working on the demo??

Sign In or Register to comment.