Thursday, April 1st, 2010
Open Web Video Puzzle
<>p>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:
JAVASCRIPT:
-
-
for (var i=0;i<12;i++){
-
var can = document.getElementById('c'+(i+1));
-
var ctx = can.getContext('2d');
-
pieces_can.push(can);
-
pieces_ctx.push(ctx);
-
}
-
i = setInterval(function(){
-
var sWidth = dWidth = 160;
-
var sHeight = dHeight = 120;
-
dx = dy = 0;
-
var source = document.getElementById('puzzle_image');
-
for(var i=0;i<12;i++) {
-
sx = (i*sWidth)%640;
-
sy = ((Math.floor(i/4))*sHeight);
-
pieces_ctx[i].drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-
}
-
}, 30);
-
The bulk of the code is setting up and playing the puzzle.
Related Content:
3.8 rating from 17 votes
I have seen something similar a year ago at Chrome Experiments but with windows, pretty cool: http://www.chromeexperiments.com/detail/video-picture-puzzle/
HTML 5 rules.
This has got to be an April Fool, you can’t do this kind of thing without Flash…
.
</irony>
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 :)
masterful! (you need to unescape < in line 2)
Publicvideos looks exciting. But you should make sure the puzzle is solvable. Use legal moves to shuffle.
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 :)