<div id="container">
<h1>Warholiser!</h1>
<div id="message"></div>
<video loop id="video"></video>
<div id="warhols">
<canvas id="mycanvas"></canvas>
</div>
<div id="warholdiv">
<canvas id="red"></canvas>
<canvas id="green"></canvas>
<br>
<canvas id="blue"></canvas>
<canvas id="yellow"></canvas>
</div>
</div>
<body>
<script>
var video = document.getElementById('video'),
webmvideo = "http://shinydemos.com/media/warholiser/wsh.webm",
mp4video = "http://shinydemos.com/media/warholiser/wsh.mp4",
options = {audio: false, video:true},
red = document.getElementById('red'),
green = document.getElementById('green'),
blue = document.getElementById('blue'),
yellow = document.getElementById('yellow'),
canvasWidth = red.width,
canvasHeight = red.height,
redCtx = red.getContext('2d'),
greenCtx = green.getContext('2d'),
yellowCtx = yellow.getContext('2d'),
blueCtx = blue.getContext('2d');
//"inlining" what used to be a for loop
red.addEventListener('click', newImg);
green.addEventListener('click', newImg);
blue.addEventListener('click', newImg);
yellow.addEventListener('click', newImg);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if (navigator.getUserMedia){
navigator.getUserMedia(options, v_success, v_error);
} else {
not_supported();
}
function not_supported() {
video.innerHTML = "<source src=\""+webmvideo+"\" type=\"video\/webm\" ><\/source> <source src=\""+mp4video+"\" type=\"video\/mp4\" ><\/source>";
video.muted= true;
setInterval(copyVideoToCanvas, 100);
}
function v_success(stream) {
if (video.mozCaptureStream) { // Needed to check for Firefox
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
video.play();
setInterval(copyVideoToCanvas, 100);
}
function v_error(error) {
console.log("Error! Error code is:"+error.code);
video.innerHTML = "<source src=\""+webmvideo+"\" type=\"video\/webm\" ><\/source> <source src=\""+mp4video+"\" type=\"video\/mp4\" ><\/source>";
video.muted= true;
setInterval(copyVideoToCanvas, 100);
}
function copyVideoToCanvas() {
makeImage(red, redCtx);
makeImage(green, greenCtx);
makeImage(yellow, yellowCtx);
makeImage(blue, blueCtx);
}
function newImg() {
var datauri = this.toDataURL("image/png");
window.open(datauri);
}
function makeImage(canvas, ctx) {
var imgdata, pixels, final;
ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
imgdata = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
pixels = imgdata.data;
// Loop over each pixel and invert the color.
for (var i = 0, n = pixels.length; i < n; i += 4) {
final = pixels[i] * 0.21 + pixels[i+1] * 0.71 + pixels[i+2] * 0.07 ;
if (final > 50){
final = 255;
} else {
final = 0;
}
pixels[i] = pixels[i+1] = pixels[i+2] = final;
pixels[i+3] = 255;
switch (canvas.id) {
case 'red': pixels[i] += 255; break;
case 'green': pixels[i+1] +=255; break;
case 'yellow': pixels[i] += 255; pixels[i+1] +=255; break;
case 'blue': pixels[i+2] +=255; break;
}
}
// Draw the ImageData at the given (x,y) coordinates.
ctx.putImageData(imgdata, 0, 0);
}
</script>
@-o-viewport {
width: device-width;
height: device-height;
}
@font-face {
font-family: 'DanielRegular';
src: url('../fonts/daniel-webfont.eot');
src: url('../fonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/daniel-webfont.woff') format('woff'),
url('../fonts/daniel-webfont.ttf') format('truetype'),
url('../fonts/daniel-webfont.svg#DanielRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Daniel font from http://www.fontsquirrel.com/fonts/Daniel
License: http://www.fontsquirrel.com/license/Daniel */
body{
background-color: #999;
background-image: url('https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/warholiser/images/back2.png');
font-family: "DanielRegular";
margin: 0;
padding: 0;
height: 100%;
color: #fff;
}
#container{
background-color: #3c3c3c;
width: 610px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-left: 1px solid #333;
border-right: 1px solid #333;
height: 100%;
text-align: center;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
box-shadow: 1px 12px 10px #222;
border-radius: 5px;
opacity: 0.8;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
video{
visibility: unhidden;
display: yes ;
}
canvas{
width: 300px;
height: 180px;
box-shadow: 1px 1px 2px #000;
-o-transition-property: -o-transform, box-shadow;
-o-transition-timing-function: ease;
-o-transition-duration: 0.4s;
-webkit-transition-property: -webkit-transform, box-shadow;
-webkit-transition-timing-function: ease;
-webkit-transition-duration: 0.4s;
-moz-transition-property: -moz-transform, box-shadow;
-moz-transition-timing-function: ease;
-moz-transition-duration: 0.4s;
-ms-transition-property: -ms-transform, box-shadow;
-ms-transition-timing-function: ease;
-ms-transition-duration: 0.4s;
transition-property: transform, box-shadow;
transition-timing-function: ease;
transition-duration: 0.4s;
}
#red:hover{
-o-transform: rotate(10deg) scale(1.1) translate(20px, 15px);
-webkit-transform: rotate(10deg) scale(1.1) translate(20px, 15px);
-moz-transform: rotate(10deg) scale(1.1) translate(20px, 15px);
-ms-transform: rotate(10deg) scale(1.1) translate(20px, 15px);
transform: rotate(10deg) scale(1.1) translate(20px, 15px);
box-shadow: 3px 3px 3px #000;
}
#green:hover{
-o-transform: rotate(10deg) scale(1.1) translate(-20px, 15px);
-webkit-transform: rotate(10deg) scale(1.1) translate(-20px, 15px);
-moz-transform: rotate(10deg) scale(1.1) translate(-20px, 15px);
-ms-transform: rotate(10deg) scale(1.1) translate(-20px, 15px);
transform: rotate(10deg) scale(1.1) translate(-20px, 15px);
box-shadow: 3px 3px 3px #000;
}
#blue:hover{
-o-transform: rotate(10deg) scale(1.1) translate(20px, -15px);
-webkit-transform: rotate(10deg) scale(1.1) translate(20px, -15px);
-moz-transform: rotate(10deg) scale(1.1) translate(20px, -15px);
-ms-transform: rotate(10deg) scale(1.1) translate(20px, -15px);
transform: rotate(10deg) scale(1.1) translate(20px, -15px);
box-shadow: 3px 3px 3px #000;
}
#yellow:hover{
-o-transform: rotate(10deg) scale(1.1) translate(-20px,-15px);
-webkit-transform: rotate(10deg) scale(1.1) translate(-20px,-15px);
-moz-transform: rotate(10deg) scale(1.1) translate(-20px,-15px);
-ms-transform: rotate(10deg) scale(1.1) translate(-20px,-15px);
transform: rotate(10deg) scale(1.1) translate(-20px,-15px);
box-shadow: 3px 3px 3px #000;
}
#warholdiv{
margin-bottom: 10px;
}
#mycanvas{
visibility: unhidden;
display: yes;
}
h1{
font-family: 'DanielRegular';
font-size: 1.8em;
}
code{
font-size: 0.9em;
}
/* Small phones like HTC Tatoo, Nokia E63 */
@media (min-width: 240px) {
#container{
width: 200px;
}
canvas{
width: 80px;
height: 40px;
}
h1{
font-size: 0.8em;
}
}
/* Relatively larger screen phones like HTC Hero */
@media (min-width: 320px) {
#container{
width: 300px;
}
canvas{
width: 125px;
height: 75px;
}
h1{
font-size: 1.2em;
}
}
/* Large screen smartphones like HTC Incredible S, Motorola Droid X, etc */
@media (min-width: 480px) {
#container{
width: 420px;
}
canvas{
width: 200px;
height: 120px;
}
h1{
font-size: 1.6em;
}
}
/*For everything else 800px width and larger including some phones, tablets, desktops etc*/
@media (min-width: 800px) {
#container{
width: 610px;
}
canvas{
width: 300px;
height: 180px;
}
h1{
font-size: 2.5em;
}
}