Thursday, April 1st, 2010

Open Web Video Puzzle

Category: Canvas, Video

This is a fun one. The Open Video Sliding Puzzle takes a running video (from the public videos project) cuts it up, and builds a sliding puzzle on the fly.


How does it work? Why Canvas and HTML5 video of course:


  1. for (var i=0;i<12;i++){
  2.         var can = document.getElementById('c'+(i+1));
  3.         var ctx = can.getContext('2d');
  4.         pieces_can.push(can);
  5.         pieces_ctx.push(ctx);
  6.     }
  7.     i = setInterval(function(){
  8.         var sWidth = dWidth = 160;
  9.         var sHeight = dHeight = 120;
  10.         dx = dy = 0;
  11.         var source = document.getElementById('puzzle_image');
  12.         for(var i=0;i<12;i++) {
  13.             sx = (i*sWidth)%640;
  14.             sy = ((Math.floor(i/4))*sHeight);
  15.             pieces_ctx[i].drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  16.         }
  17.     }, 30);

The bulk of the code is setting up and playing the puzzle.

Posted by Dion Almaer at 6:10 am

3.8 rating from 18 votes


Comments feed TrackBack URI

I have seen something similar a year ago at Chrome Experiments but with windows, pretty cool:

Comment by MohamedMansour — April 1, 2010

HTML 5 rules.

Comment by WillPeavy — April 1, 2010

This has got to be an April Fool, you can’t do this kind of thing without Flash…

Comment by Skilldrick — April 1, 2010

Thanks for the link!

That demo was made on the last minute on the Yahoo Hack day São Paulo (Brazil), I’ve spent most of the time doing the actual Public Videos API, that the demo uses to request a random Theora clip (sorry Safari users).

To get a new clip simply refresh the page :)

Comment by fczuardi — April 1, 2010

masterful! (you need to unescape < in line 2)

Comment by AngusC — April 1, 2010

Publicvideos looks exciting. But you should make sure the puzzle is solvable. Use legal moves to shuffle.

Comment by bugme — April 1, 2010

Thanks bugme, that is a nice suggestion, as I said earlier, the puzzle was just a hack, I am not really planning to update it much, but I would be glad to accept any pull requests or patch submissions in order to ensure solvability or any other improvement :)

Comment by fczuardi — April 2, 2010

Leave a comment

You must be logged in to post a comment.