éclatement de Vidéo en HTML5

Pour jouer avec des vidéos dans un espace 3D il n’est pas nécessaire d’employer WebGL.
Craftymind présente ses essais avec l’appel drawImage() de l’API Canvas du HTML5:

Pour l’effet en live:
c’est là.

Voir un extrait du code:

copy.drawImage(video, 0, 0);
draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

for(var i=0; i var tile = tiles[i];
if(tile.force > 0.0001){
//expand
tile.moveX *= tile.force;
tile.moveY *= tile.force;
tile.moveRotation *= tile.force;
tile.currentX += tile.moveX;
tile.currentY += tile.moveY;
tile.rotation += tile.moveRotation;
tile.rotation %= 360;
tile.force *= 0.9;
if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
tile.moveX *= -1;
}
if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
tile.moveY *= -1;
}

Comments are closed.