Skip to content

Instantly share code, notes, and snippets.

@vstarck

vstarck/maestros.demo_video.html

Created May 28, 2012 23:19
Show Gist options
  • Save vstarck/2821622 to your computer and use it in GitHub Desktop.
Save vstarck/2821622 to your computer and use it in GitHub Desktop.
Download ZIP
maestros.demo_video.html
Raw
maestros.demo_video.html
<!DOCTYPE html>
<html>
<head>
<title>Animaciones en Canvas - Utilizando videos</title>
</head>
<body>
<video loop controls id="video">
<source src="cat.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="cat.ogv" type='video/ogg; codecs="theora, vorbis"' />
Tu browser es muy viejo :(
</video>
<canvas width="286" height="200" id="buffer" style="display: none"></canvas>
<canvas width="286" height="200" id="result" style=""></canvas>
<div>
<button onclick="Demo.setActive('original')">Original</button>
<button onclick="Demo.setActive('grayscale')">Escala de grises</button>
<button onclick="Demo.setActive('treshold')">Blanco y negro</button>
<button onclick="Demo.setActive('warhol')">Psicodelia</button>
<button onclick="Demo.setActive('negate')">Negar</button>
<button onclick="Demo.setActive('mirror-x')">Espejo (x)</button>
<button onclick="Demo.setActive('mirror-y')">Espejo (y)</button>
<button onclick="Demo.setActive('mirror-xy')">Espejo (xy)</button>
</div>
<script type="text/javascript">
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var Demo = {
active: null,
filters: {},
origin: document.getElementById('video'),
result: {
canvas: document.getElementById('result'),
context: document.getElementById('result').getContext('2d')
},
buffer: {
canvas: document.getElementById('buffer'),
context: document.getElementById('buffer').getContext('2d')
},
render: function() {
var imageData, width, height;
width = this.buffer.canvas.width;
height = this.buffer.canvas.height;
this.buffer.context.drawImage(this.origin, 0, 0, width, height);
imageData = this.buffer.context.getImageData(0, 0, width, height);
this.result.context.putImageData(
this.active.handler(imageData, width, height),
0,
0
);
},
addFilter: function(name, handler) {
this.filters[name] = handler;
if(!this.active) {
this.setActive(name);
}
return this;
},
setActive: function(name) {
this.active = {
name: name,
handler: this.filters[name]
};
Demo.render();
}
};
Demo.addFilter('original', function(imageData, width, height) {
return imageData;
});
Demo.addFilter('grayscale', function(imageData, width, height) {
var x, y, sum, data, color;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
sum = data[(y * width + x) * 4 + 0] + data[(y * width + x) * 4 + 1] + data[(y * width + x) * 4 + 2];
data[(y * width + x) * 4 + 0] =
data[(y * width + x) * 4 + 1] =
data[(y * width + x) * 4 + 2] = sum / 3;
}
}
return imageData;
});
Demo.addFilter('treshold', function(imageData, width, height) {
var x, y, sum, data, color;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
sum = data[(y * width + x) * 4 + 0] + data[(y * width + x) * 4 + 1] + data[(y * width + x) * 4 + 2];
if((sum / 3) > 100) {
color = 255;
} else {
color = 0;
}
data[(y * width + x) * 4 + 0] =
data[(y * width + x) * 4 + 1] =
data[(y * width + x) * 4 + 2] = color;
}
}
return imageData;
});
Demo.addFilter('warhol', function(imageData, width, height) {
var x, y, sum, data, color, TL;
TL = 550;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
sum = data[(y * width + x) * 4 + 0] + data[(y * width + x) * 4 + 1] + data[(y * width + x) * 4 + 2];
if(sum > TL) {
color = [255, 0, 0];
} else if(sum > TL * 0.6) {
color = [0, 255, 0];
} else if(sum > TL * 0.25) {
color = [0, 0, 255];
} else {
color = [252, 255, 0]
}
data[(y * width + x) * 4 + 0] = color[0];
data[(y * width + x) * 4 + 1] = color[1];
data[(y * width + x) * 4 + 2] = color[2];
}
}
return imageData;
});
Demo.addFilter('negate', function(imageData, width, height) {
var x, y, sum, data;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
data[(y * width + x) * 4 + 0] = 255 - data[(y * width + x) * 4 + 0];
data[(y * width + x) * 4 + 1] = 255 - data[(y * width + x) * 4 + 1];
data[(y * width + x) * 4 + 2] = 255 - data[(y * width + x) * 4 + 2];
}
}
return imageData;
});
Demo.addFilter('mirror-x', function(imageData, width, height) {
var x, y, sum, data;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
data[(y * width + (width - x)) * 4 + 0] = data[(y * width + x) * 4 + 0];
data[(y * width + (width - x)) * 4 + 1] = data[(y * width + x) * 4 + 1];
data[(y * width + (width - x)) * 4 + 2] = data[(y * width + x) * 4 + 2];
}
}
return imageData;
});
Demo.addFilter('mirror-y', function(imageData, width, height) {
var x, y, sum, data;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
data[((height - y) * width + x) * 4 + 0] = data[(y * width + x) * 4 + 0];
data[((height - y) * width + x) * 4 + 1] = data[(y * width + x) * 4 + 1];
data[((height - y) * width + x) * 4 + 2] = data[(y * width + x) * 4 + 2];
}
}
return imageData;
});
Demo.addFilter('mirror-xy', function(imageData, width, height) {
var x, y, sum, data;
data = imageData.data;
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
data[((height - y) * width + x) * 4 + 0] = data[(y * width + x) * 4 + 0];
data[((height - y) * width + x) * 4 + 1] = data[(y * width + x) * 4 + 1];
data[((height - y) * width + x) * 4 + 2] = data[(y * width + x) * 4 + 2];
data[(y * width + (width - x)) * 4 + 0] = data[(y * width + x) * 4 + 0];
data[(y * width + (width - x)) * 4 + 1] = data[(y * width + x) * 4 + 1];
data[(y * width + (width - x)) * 4 + 2] = data[(y * width + x) * 4 + 2];
}
}
return imageData;
});
document.getElementById('video').addEventListener('play', function() {
Demo.render();
requestAnimFrame(function render() {
Demo.render();
requestAnimFrame(render);
});
}, false);
window.onload = function() {
Demo.render();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment