Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<doctype html>
  <html>
    <head>
<script type="text/javascript">
​
var video;
var copy;
var copycanvas;
var draw;
​
var SOURCERECT = {x:0,y:0,w:0,h:0};
var PAINTRECT  = {x:0,y:0,w:1000,h:640};
​
function init(){
    video = document.getElementById('sourcevid');
    copycanvas = document.getElementById('sourcecopy');
    copy = copycanvas.getContext('2d');
    var outputcanvas = document.getElementById('output');
    draw = outputcanvas.getContext('2d');
    setInterval("processFrame()", 33);
}
​
var RAD = Math.PI/180;
var randomJump = false;
var debug = false;
var degree = 180;
​
function processFrame(){
    if(!isNaN(video.duration)){
        if(SOURCERECT.w == 0){
            SOURCERECT = {x:0,y:0,w:video.videoWidth,h:video.videoHeight};
        }
        //this is to keep my sanity while developing
        if(randomJump){
            randomJump = false;
            video.currentTime = Math.random()*video.duration;
        }
        //loop
        if(video.currentTime == video.duration){
            video.currentTime = 0;
        }
    }
    var debugStr = "";
    copy.drawImage(video, 0, 0);
    draw.clearRect(PAINTRECT.x, PAINTRECT.y, PAINTRECT.w, PAINTRECT.h);
    
    var centerx = PAINTRECT.w/2;
    var centery = PAINTRECT.h/2-50;
    var radius = SOURCERECT.w/2;
    
    degree += 1;
    degree %= 360;
    
    var angle = degree*RAD;
    var prepx = Math.cos(angle);
    var prepz = Math.sin(angle);
    
    
    for(var i=0; i<SOURCERECT.w; i+=4){
        var dist = radius-i;
        var x = prepx*dist;
        var y = 0;
        var z = prepz*dist;
        var height = SOURCERECT.h+(z*0.5);
        
        draw.save();
        if(degree < 90 || degree > 270){
            draw.translate(PAINTRECT.w, 0);
            draw.scale(-1, 1);
            x *= -1;
        }
        var _x = Math.round(x+centerx);
        var _y = y+centery;
        draw.drawImage(copycanvas, i, 0, 4, SOURCERECT.h, _x, _y-(height/2), 4, height);
        draw.restore();
        
    }
}
</script>
</head>
​
<body onload="init()" style="margin:0px;">
  Example from : http://www.craftymind.com/factory/html5video/CanvasVideo3D.html
    <div><br/><center>3D manipulation of HTML5 video, best viewed in webkit based browsers. <a href="http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space">Return to Craftymind Article</a><br/>Due to popular request, the ogg video is now 640 x 360, don't hold me responsible for crashing your browser ;)</center><br/></div>
  
    <div style="display:none">
        <video id="sourcevid" autoplay="true" loop="true">
            <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4" />
            <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.ogv" type="video/ogg"/>
        </video>
        <canvas id="sourcecopy" width="640" height="360"></canvas>
    </div>
  
    <div>
        <center><canvas id="output" width="1000" height="640" style="border: solid 5px #666666"></canvas><br/>You may need to reload the page if video isn't streaming properly. Video courtesy of <a href="http://www.bigbuckbunny.org/">Big Buck Bunny</a></center>
    <br/><center><a href="http://web.me.com/ellestevenson/music/Digistore.html">You should listen to this new artist, seriously</a></center>
    </div>
    <div id="trace"></div>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers