Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created November 11, 2014 04:00
Show Gist options
  • Save naeluh/a5a1bcb8aa8240b744c1 to your computer and use it in GitHub Desktop.
Save naeluh/a5a1bcb8aa8240b744c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<style id="jsbin-css">
body {
margin:0 auto
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow:hidden;
color:#fff;
}
canvas {
-ms-touch-action:none;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#loading , #loadingMore{
position:relative;
top:0;
left:0;
width:40%;
color:#fff;
margin:0 auto;
font-size:12px;
}
#instructions {
position:relative;
margin:0 auto;
background:#000;
width:80%;
height:200px;
font-size:11px;
line-height:10px;
}
#loading p , #loadingMore p{
float:left;
margin-right:9%;
}
#contain {
position:absolute;
margin:0 auto;
background:#000;
width:100%;
height:100%;
z-index:9999;
}
#ok {
font-size:12px;
width:82px;
height:10px;
background:#fff;
color:#000;
cursor:pointer;
padding:9px;
text-align:center;
}
#ok:hover {
background:#aaa;
}
</style>
</head>
<body>
<div id="contain">
<div id="instructions" style="display:none;">
<p><u>GIF PAINTING</u></p>
<p>This Version is so Beta...</p>
<p>So stop by frequently to check for updates!!!</p>
<p id="gifs"></p>
<div style="clear:both;"></div>
<div id="version"></div>
<div id="ok">Ok got it!</div>
</div>
<div id="loading" style="display:none;">
<p style="float:left;margin-right:2%;">Loading Gifs....</p>
</div>
<div id="loadingMore" style="display:none;">
<p style="float:left;margin-right:2%;">Loading More Gifs....</p>
</div>
</div>
<div id="testbox"></div>
<script src="http://yastatic.net/modernizr/2.7.1/modernizr.min.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.min.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/anime.min.js"></script>
<script id="jsbin-javascript">
window.mobilecheck = function() {
var check = false;
(function(a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|android|ipad|playbook|silk|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,
4))) {
check = true;
}
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
var ajaxlength = [];
var value = isNaN(value) ? 10 : value;
var loadNum = isNaN(loadNum) ? 0 : loadNum;
var click = isNaN(click) ? 0 : click;
var imgFinsihed = isNaN(imgFinsihed) ? 0 : imgFinsihed;
var animationFrame = new AnimationFrame();
var ct = [];
var ct2 = [];
var g = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
var ok = document.getElementById('ok');
var v = document.getElementById('version');
var imgur = function() {
loadNum++;
//console.log(loadNum);
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
if (token) {
authorization = "Bearer " + token;
} else {
authorization = "Client-ID " + clientId;
}
$.ajax({
url: "https://api.imgur.com/3/gallery/random/random/page=" + Math.floor(Math.random() * 50),
method: "GET",
headers: {
Authorization: authorization,
Accept: "application/json"
},
crossDomain: true,
data: {
image: localStorage.dataBase64,
type: "base64"
},
beforeSend: function() {
if (loadNum >= 2) {
$("#loadingMore").css("display", "block");
$("#contain").css("display", "block");
} else {
$("#loading").css("display", "block");
}
},
success: function(result) {
$.each(result.data, function(idx, image) {
if ((result.data[idx].animated !== false) && (result.data[idx].is_album !== true) && (result.data[idx].type === 'image/gif') && (result.data[idx].size < 2E6)) {
var newimage = GIF(image.link);
newimage.render();
g.push(newimage);
recursiveLoad(newimage);
}
});
}
});
};
imgur();
ok.addEventListener('click', function() {
$("#contain").fadeOut(1E2);
$("#instructions").fadeOut(1E2);
init();
});
function recursiveLoad(img) {
setTimeout(function() {
var colorA = "#" + Math.random().toString(16).slice(2, 8);
if (img.rendered === true) {
done(img, colorA);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image, color) {
trueArr.push(image.src);
//console.log(loadNum);
imgFinsihed++;
if (loadNum >= 2) {
$("#loadingMore").append('<p style="color:' + color + ';">' + imgFinsihed + '</>');
} else {
$("#loading").append('<p style="color:' + color + ';">' + imgFinsihed + '</>');
}
if (g.length === trueArr.length) {
if (loadNum >= 2) {
$("#loadingMore").fadeOut(1E2);
$("#contain").fadeOut(1E2);
init();
} else {
if (mobilecheck()) {
v.innerHTML = "<p>MOBILE:</p><p>Tap and Drag: Loads New Gif from the Internet and Paints Gif</p>";
} else {
v.innerHTML = "<p>DESKTOP:</p><p>Click and Release: Loads New Gif from the Internet</p><p>Mouse Move: Paints Gif!</p>";
}
$("#loading").fadeOut(1E2);
$("#gifs").append('Number of gifs this session: ' + g.length);
$("#instructions").fadeIn(1E2);
//$("#contain").fadeOut(1E2);
animloop();
}
}
}
function calculateVelocities(pos) {
return pos.reduce(function(out, pos, index, posArr) {
if (index > 0) {
var prevIndex = index - 1;
var dx = pos.x - posArr[prevIndex].x;
var dy = pos.y - posArr[prevIndex].y;
out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
}
return out;
}, []);
}
function calculateAccelerations(vels) {
return vels.reduce(function(out, vel, index, velsArr) {
if (index > 0) {
var prevIndex = index - 1;
out.push(velsArr[prevIndex] - vel);
}
return out;
}, []);
}
function average(arr) {
if (arr.length > 0) {
return arr.reduce(function(sum, val) {
return sum + val;
}, 0) / arr.length;
}
return 0;
}
function createCanvas(arrayOne, arrayTwo) {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
arrayOne.push(context);
if (arrayTwo) {
arrayTwo.push(canvas);
}
}
function create(e) {
click++;
//console.log(click);
//console.log(g.length);
if (click === imgFinsihed) {
//g.length = 0;
//trueArr.length = 0;
click = 0;
imgFinsihed = 0;
$('#loadingMore').html('<p style="float:left;margin-right:2%;">Loading More Gifs....</p>');
document.removeEventListener('touchstart', create);
document.removeEventListener('touchmove', drawMobi);
window.removeEventListener('mousedown', create);
window.removeEventListener('mousemove', drawDesk);
imgur();
} else {
createCanvas(ct, canarr);
createCanvas(ct2);
}
e.preventDefault();
}
function drawMobi(e) {
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.touches[0].clientX, e.touches[0].clientY, 34.463445365634563434534254154, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
function drawDesk(e) {
pos.unshift({
x: e.clientX,
y: e.clientY,
t: performance.now()
});
pos.length = Math.min(pos.length, 30);
var vels = calculateVelocities(pos);
var accels = calculateAccelerations(vels);
var vel = average(vels);
var accel = average(accels);
if (accel >= 0) {
r = value++;
} else {
r = value--;
}
if (r > 100) {
r = value -= 100;
}
if (r < 5) {
r = value += 100;
}
var ctx2 = ct2[(Number(ct2.length) - 1)];
var can = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
can = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.clientX, e.clientY, r, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
function init() {
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
document.addEventListener('touchstart', create);
document.addEventListener('touchmove', drawMobi);
isTouch = true;
} else {
window.addEventListener('mousedown', create);
window.addEventListener('mousemove', drawDesk);
isTouch = false;
}
}
function animloop() {
animationFrame.request(animloop);
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var gif = g[gifNum];
var ctx = ct[gifNum];
var ctx2 = ct2[gifNum];
var can = canarr[gifNum];
if (ct.length > 0 && ct2.length > 0 && canarr.length > 0 && g.length > 0 && ctx !== undefined) {
if (gif.rendered === true && gif.loaded === true) {
ctx2.fill();
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-over';
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, window.innerWidth, window.innerHeight);
ctx.drawImage(can, 0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-atop';
}
}
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
</head>
<body>
<div id="contain">
<div id="instructions" style="display:none;">
<p><u>GIF PAINTING</u></p>
<p>This Version is so Beta...</p>
<p>So stop by frequently to check for updates!!!</p>
<p id="gifs"></p>
<div style="clear:both;"></div>
<div id="version"></div>
<div id="ok">Ok got it!</div>
</div>
<div id="loading" style="display:none;">
<p style="float:left;margin-right:2%;">Loading Gifs....</p>
</div>
<div id="loadingMore" style="display:none;">
<p style="float:left;margin-right:2%;">Loading More Gifs....</p>
</div>
</div>
<div id="testbox"></div>
<script src="http://yastatic.net/modernizr/2.7.1/modernizr.min.js"><\/script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.min.js"><\/script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/anime.min.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
margin:0 auto
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow:hidden;
color:#fff;
}
canvas {
-ms-touch-action:none;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#loading , #loadingMore{
position:relative;
top:0;
left:0;
width:40%;
color:#fff;
margin:0 auto;
font-size:12px;
}
#instructions {
position:relative;
margin:0 auto;
background:#000;
width:80%;
height:200px;
font-size:11px;
line-height:10px;
}
#loading p , #loadingMore p{
float:left;
margin-right:9%;
}
#contain {
position:absolute;
margin:0 auto;
background:#000;
width:100%;
height:100%;
z-index:9999;
}
#ok {
font-size:12px;
width:82px;
height:10px;
background:#fff;
color:#000;
cursor:pointer;
padding:9px;
text-align:center;
}
#ok:hover {
background:#aaa;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> window.mobilecheck = function() {
var check = false;
(function(a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|android|ipad|playbook|silk|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,
4))) {
check = true;
}
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
var ajaxlength = [];
var value = isNaN(value) ? 10 : value;
var loadNum = isNaN(loadNum) ? 0 : loadNum;
var click = isNaN(click) ? 0 : click;
var imgFinsihed = isNaN(imgFinsihed) ? 0 : imgFinsihed;
var animationFrame = new AnimationFrame();
var ct = [];
var ct2 = [];
var g = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
var ok = document.getElementById('ok');
var v = document.getElementById('version');
var imgur = function() {
loadNum++;
//console.log(loadNum);
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
if (token) {
authorization = "Bearer " + token;
} else {
authorization = "Client-ID " + clientId;
}
$.ajax({
url: "https://api.imgur.com/3/gallery/random/random/page=" + Math.floor(Math.random() * 50),
method: "GET",
headers: {
Authorization: authorization,
Accept: "application/json"
},
crossDomain: true,
data: {
image: localStorage.dataBase64,
type: "base64"
},
beforeSend: function() {
if (loadNum >= 2) {
$("#loadingMore").css("display", "block");
$("#contain").css("display", "block");
} else {
$("#loading").css("display", "block");
}
},
success: function(result) {
$.each(result.data, function(idx, image) {
if ((result.data[idx].animated !== false) && (result.data[idx].is_album !== true) && (result.data[idx].type === 'image/gif') && (result.data[idx].size < 2E6)) {
var newimage = GIF(image.link);
newimage.render();
g.push(newimage);
recursiveLoad(newimage);
}
});
}
});
};
imgur();
ok.addEventListener('click', function() {
$("#contain").fadeOut(1E2);
$("#instructions").fadeOut(1E2);
init();
});
function recursiveLoad(img) {
setTimeout(function() {
var colorA = "#" + Math.random().toString(16).slice(2, 8);
if (img.rendered === true) {
done(img, colorA);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image, color) {
trueArr.push(image.src);
//console.log(loadNum);
imgFinsihed++;
if (loadNum >= 2) {
$("#loadingMore").append('<p style="color:' + color + ';">' + imgFinsihed + '</>');
} else {
$("#loading").append('<p style="color:' + color + ';">' + imgFinsihed + '</>');
}
if (g.length === trueArr.length) {
if (loadNum >= 2) {
$("#loadingMore").fadeOut(1E2);
$("#contain").fadeOut(1E2);
init();
} else {
if (mobilecheck()) {
v.innerHTML = "<p>MOBILE:</p><p>Tap and Drag: Loads New Gif from the Internet and Paints Gif</p>";
} else {
v.innerHTML = "<p>DESKTOP:</p><p>Click and Release: Loads New Gif from the Internet</p><p>Mouse Move: Paints Gif!</p>";
}
$("#loading").fadeOut(1E2);
$("#gifs").append('Number of gifs this session: ' + g.length);
$("#instructions").fadeIn(1E2);
//$("#contain").fadeOut(1E2);
animloop();
}
}
}
function calculateVelocities(pos) {
return pos.reduce(function(out, pos, index, posArr) {
if (index > 0) {
var prevIndex = index - 1;
var dx = pos.x - posArr[prevIndex].x;
var dy = pos.y - posArr[prevIndex].y;
out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
}
return out;
}, []);
}
function calculateAccelerations(vels) {
return vels.reduce(function(out, vel, index, velsArr) {
if (index > 0) {
var prevIndex = index - 1;
out.push(velsArr[prevIndex] - vel);
}
return out;
}, []);
}
function average(arr) {
if (arr.length > 0) {
return arr.reduce(function(sum, val) {
return sum + val;
}, 0) / arr.length;
}
return 0;
}
function createCanvas(arrayOne, arrayTwo) {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
arrayOne.push(context);
if (arrayTwo) {
arrayTwo.push(canvas);
}
}
function create(e) {
click++;
//console.log(click);
//console.log(g.length);
if (click === imgFinsihed) {
//g.length = 0;
//trueArr.length = 0;
click = 0;
imgFinsihed = 0;
$('#loadingMore').html('<p style="float:left;margin-right:2%;">Loading More Gifs....</p>');
document.removeEventListener('touchstart', create);
document.removeEventListener('touchmove', drawMobi);
window.removeEventListener('mousedown', create);
window.removeEventListener('mousemove', drawDesk);
imgur();
} else {
createCanvas(ct, canarr);
createCanvas(ct2);
}
e.preventDefault();
}
function drawMobi(e) {
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.touches[0].clientX, e.touches[0].clientY, 34.463445365634563434534254154, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
function drawDesk(e) {
pos.unshift({
x: e.clientX,
y: e.clientY,
t: performance.now()
});
pos.length = Math.min(pos.length, 30);
var vels = calculateVelocities(pos);
var accels = calculateAccelerations(vels);
var vel = average(vels);
var accel = average(accels);
if (accel >= 0) {
r = value++;
} else {
r = value--;
}
if (r > 100) {
r = value -= 100;
}
if (r < 5) {
r = value += 100;
}
var ctx2 = ct2[(Number(ct2.length) - 1)];
var can = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
can = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.clientX, e.clientY, r, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
function init() {
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
document.addEventListener('touchstart', create);
document.addEventListener('touchmove', drawMobi);
isTouch = true;
} else {
window.addEventListener('mousedown', create);
window.addEventListener('mousemove', drawDesk);
isTouch = false;
}
}
function animloop() {
animationFrame.request(animloop);
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var gif = g[gifNum];
var ctx = ct[gifNum];
var ctx2 = ct2[gifNum];
var can = canarr[gifNum];
if (ct.length > 0 && ct2.length > 0 && canarr.length > 0 && g.length > 0 && ctx !== undefined) {
if (gif.rendered === true && gif.loaded === true) {
ctx2.fill();
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-over';
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, window.innerWidth, window.innerHeight);
ctx.drawImage(can, 0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-atop';
}
}
}
}</script></body>
</html>
Raw
jsbin.qukap.css
body {
margin:0 auto
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow:hidden;
color:#fff;
}
canvas {
-ms-touch-action:none;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#loading , #loadingMore{
position:relative;
top:0;
left:0;
width:40%;
color:#fff;
margin:0 auto;
font-size:12px;
}
#instructions {
position:relative;
margin:0 auto;
background:#000;
width:80%;
height:200px;
font-size:11px;
line-height:10px;
}
#loading p , #loadingMore p{
float:left;
margin-right:9%;
}
#contain {
position:absolute;
margin:0 auto;
background:#000;
width:100%;
height:100%;
z-index:9999;
}
#ok {
font-size:12px;
width:82px;
height:10px;
background:#fff;
color:#000;
cursor:pointer;
padding:9px;
text-align:center;
}
#ok:hover {
background:#aaa;
}
Raw
jsbin.qukap.js
window.mobilecheck = function() {
var check = false;
(function(a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|android|ipad|playbook|silk|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,
4))) {
check = true;
}
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
var ajaxlength = [];
var value = isNaN(value) ? 10 : value;
var loadNum = isNaN(loadNum) ? 0 : loadNum;
var click = isNaN(click) ? 0 : click;
var imgFinsihed = isNaN(imgFinsihed) ? 0 : imgFinsihed;
var animationFrame = new AnimationFrame();
var ct = [];
var ct2 = [];
var g = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
var ok = document.getElementById('ok');
var v = document.getElementById('version');
var imgur = function() {
loadNum++;
//console.log(loadNum);
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
if (token) {
authorization = "Bearer " + token;
} else {
authorization = "Client-ID " + clientId;
}
$.ajax({
url: "https://api.imgur.com/3/gallery/random/random/page=" + Math.floor(Math.random() * 50),
method: "GET",
headers: {
Authorization: authorization,
Accept: "application/json"
},
crossDomain: true,
data: {
image: localStorage.dataBase64,
type: "base64"
},
beforeSend: function() {
if (loadNum >= 2) {
$("#loadingMore").css("display", "block");
$("#contain").css("display", "block");
} else {
$("#loading").css("display", "block");
}
},
success: function(result) {
$.each(result.data, function(idx, image) {
if ((result.data[idx].animated !== false) && (result.data[idx].is_album !== true) && (result.data[idx].type === 'image/gif') && (result.data[idx].size < 2E6)) {
var newimage = GIF(image.link);
newimage.render();
g.push(newimage);
recursiveLoad(newimage);
}
});
}
});
};
imgur();
ok.addEventListener('click', function() {
$("#contain").fadeOut(1E2);
$("#instructions").fadeOut(1E2);
init();
});
function recursiveLoad(img) {
setTimeout(function() {
var colorA = "#" + Math.random().toString(16).slice(2, 8);
if (img.rendered === true) {
done(img, colorA);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image, color) {
trueArr.push(image.src);
//console.log(loadNum);
imgFinsihed++;
if (loadNum >= 2) {
$("#loadingMore").append('<p style="color:' + color + ';">' + imgFinsihed + '</>');
} else {
$("#loading").append('<p style="color:' + color + ';">' + imgFinsihed + '</>');
}
if (g.length === trueArr.length) {
if (loadNum >= 2) {
$("#loadingMore").fadeOut(1E2);
$("#contain").fadeOut(1E2);
init();
} else {
if (mobilecheck()) {
v.innerHTML = "<p>MOBILE:</p><p>Tap and Drag: Loads New Gif from the Internet and Paints Gif</p>";
} else {
v.innerHTML = "<p>DESKTOP:</p><p>Click and Release: Loads New Gif from the Internet</p><p>Mouse Move: Paints Gif!</p>";
}
$("#loading").fadeOut(1E2);
$("#gifs").append('Number of gifs this session: ' + g.length);
$("#instructions").fadeIn(1E2);
//$("#contain").fadeOut(1E2);
animloop();
}
}
}
function calculateVelocities(pos) {
return pos.reduce(function(out, pos, index, posArr) {
if (index > 0) {
var prevIndex = index - 1;
var dx = pos.x - posArr[prevIndex].x;
var dy = pos.y - posArr[prevIndex].y;
out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
}
return out;
}, []);
}
function calculateAccelerations(vels) {
return vels.reduce(function(out, vel, index, velsArr) {
if (index > 0) {
var prevIndex = index - 1;
out.push(velsArr[prevIndex] - vel);
}
return out;
}, []);
}
function average(arr) {
if (arr.length > 0) {
return arr.reduce(function(sum, val) {
return sum + val;
}, 0) / arr.length;
}
return 0;
}
function createCanvas(arrayOne, arrayTwo) {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
arrayOne.push(context);
if (arrayTwo) {
arrayTwo.push(canvas);
}
}
function create(e) {
click++;
//console.log(click);
//console.log(g.length);
if (click === imgFinsihed) {
//g.length = 0;
//trueArr.length = 0;
click = 0;
imgFinsihed = 0;
$('#loadingMore').html('<p style="float:left;margin-right:2%;">Loading More Gifs....</p>');
document.removeEventListener('touchstart', create);
document.removeEventListener('touchmove', drawMobi);
window.removeEventListener('mousedown', create);
window.removeEventListener('mousemove', drawDesk);
imgur();
} else {
createCanvas(ct, canarr);
createCanvas(ct2);
}
e.preventDefault();
}
function drawMobi(e) {
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.touches[0].clientX, e.touches[0].clientY, 34.463445365634563434534254154, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
function drawDesk(e) {
pos.unshift({
x: e.clientX,
y: e.clientY,
t: performance.now()
});
pos.length = Math.min(pos.length, 30);
var vels = calculateVelocities(pos);
var accels = calculateAccelerations(vels);
var vel = average(vels);
var accel = average(accels);
if (accel >= 0) {
r = value++;
} else {
r = value--;
}
if (r > 100) {
r = value -= 100;
}
if (r < 5) {
r = value += 100;
}
var ctx2 = ct2[(Number(ct2.length) - 1)];
var can = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
can = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.clientX, e.clientY, r, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
function init() {
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
document.addEventListener('touchstart', create);
document.addEventListener('touchmove', drawMobi);
isTouch = true;
} else {
window.addEventListener('mousedown', create);
window.addEventListener('mousemove', drawDesk);
isTouch = false;
}
}
function animloop() {
animationFrame.request(animloop);
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var gif = g[gifNum];
var ctx = ct[gifNum];
var ctx2 = ct2[gifNum];
var can = canarr[gifNum];
if (ct.length > 0 && ct2.length > 0 && canarr.length > 0 && g.length > 0 && ctx !== undefined) {
if (gif.rendered === true && gif.loaded === true) {
ctx2.fill();
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-over';
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, window.innerWidth, window.innerHeight);
ctx.drawImage(can, 0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-atop';
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment