Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created October 4, 2014 04:28
Show Gist options
  • Save naeluh/91b28cf09074a48dfddb to your computer and use it in GitHub Desktop.
Save naeluh/91b28cf09074a48dfddb to your computer and use it in GitHub Desktop.
Download ZIP
gifpainting loading working needs to be more robust NOW NEED TO SOLVE EVENTLISTENER ISSUE // source http://jsbin.com/dexec/22
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta name="description" content="gifpainting loading working needs to be more robust NOW NEED TO SOLVE EVENTLISTENER ISSUE" />
<meta charset="utf-8">
<title></title>
<style id="jsbin-css">
html{
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}
canvas {
position:absolute;
top:0px;
left:0px;
}
#loading {
position:absolute;
top:0px;
left:0px;
background:#000;
width:100%;
height:100%;
color:#fff;
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
margin:5%;
padding:5%;
}
</style>
</head>
<body>
<div id="loading" style="display:none;">Loading...</div>
<div id="gifs" style="display:block;"></div>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script id="jsbin-javascript">
var ajaxlength = [];
var value = isNaN(value) ? 0 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var cvs = document.getElementById("mycanvas");
var animationFrame = new AnimationFrame(120);
var ct = [];
var ct2 = [];
var g = [];
var gifLoad = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
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 () {$("#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)) {
var newimage = GIF(image.link);
newimage.render();
g.push (newimage);
$("#gifs").html(g.length);
recursiveLoad(newimage);
}
});
}
});
function recursiveLoad(img) {
setTimeout(function () {
if (img.rendered === true) {
done(img);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image) {
trueArr.push(image.src);
console.log(trueArr.length);
$("#loading").append('<p style="margin:5%;font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;">'+trueArr.length+'</>');
if(g.length === trueArr.length){
$("#loading").fadeOut(2E3);
animloop();
}
}
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);
}
}
window.addEventListener('mousemove', function(e) {
for (var i = 0; i < g.length; i++) {
var ctxNum2 = i % ct2.length;
var ctx2 = ct2[ctxNum2];
if (ct2.length <= 0) continue;
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.arc(e.pageX, e.pageY, 50, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
window.addEventListener('mousedown', function(e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
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) {
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';
}
}
}
}
//animloop();
</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 name="description" content="gifpainting loading working needs to be more robust NOW NEED TO SOLVE EVENTLISTENER ISSUE" />
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="loading" style="display:none;">Loading...</div>
<div id="gifs" style="display:block;"></div>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"><\/script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html{
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}
canvas {
position:absolute;
top:0px;
left:0px;
}
#loading {
position:absolute;
top:0px;
left:0px;
background:#000;
width:100%;
height:100%;
color:#fff;
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
margin:5%;
padding:5%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> var ajaxlength = [];
var value = isNaN(value) ? 0 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var cvs = document.getElementById("mycanvas");
var animationFrame = new AnimationFrame(120);
var ct = [];
var ct2 = [];
var g = [];
var gifLoad = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
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 () {$("#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)) {
var newimage = GIF(image.link);
newimage.render();
g.push (newimage);
$("#gifs").html(g.length);
recursiveLoad(newimage);
}
});
}
});
function recursiveLoad(img) {
setTimeout(function () {
if (img.rendered === true) {
done(img);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image) {
trueArr.push(image.src);
console.log(trueArr.length);
$("#loading").append('<p style="margin:5%;font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;">'+trueArr.length+'</>');
if(g.length === trueArr.length){
$("#loading").fadeOut(2E3);
animloop();
}
}
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);
}
}
window.addEventListener('mousemove', function(e) {
for (var i = 0; i < g.length; i++) {
var ctxNum2 = i % ct2.length;
var ctx2 = ct2[ctxNum2];
if (ct2.length <= 0) continue;
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.arc(e.pageX, e.pageY, 50, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
window.addEventListener('mousedown', function(e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
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) {
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';
}
}
}
}
//animloop();
</script></body>
</html>
Raw
jsbin.dexec.css
html{
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}
canvas {
position:absolute;
top:0px;
left:0px;
}
#loading {
position:absolute;
top:0px;
left:0px;
background:#000;
width:100%;
height:100%;
color:#fff;
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
margin:5%;
padding:5%;
}
Raw
jsbin.dexec.js
var ajaxlength = [];
var value = isNaN(value) ? 0 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var cvs = document.getElementById("mycanvas");
var animationFrame = new AnimationFrame(120);
var ct = [];
var ct2 = [];
var g = [];
var gifLoad = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
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 () {$("#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)) {
var newimage = GIF(image.link);
newimage.render();
g.push (newimage);
$("#gifs").html(g.length);
recursiveLoad(newimage);
}
});
}
});
function recursiveLoad(img) {
setTimeout(function () {
if (img.rendered === true) {
done(img);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image) {
trueArr.push(image.src);
console.log(trueArr.length);
$("#loading").append('<p style="margin:5%;font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;">'+trueArr.length+'</>');
if(g.length === trueArr.length){
$("#loading").fadeOut(2E3);
animloop();
}
}
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);
}
}
window.addEventListener('mousemove', function(e) {
for (var i = 0; i < g.length; i++) {
var ctxNum2 = i % ct2.length;
var ctx2 = ct2[ctxNum2];
if (ct2.length <= 0) continue;
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.arc(e.pageX, e.pageY, 50, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
window.addEventListener('mousedown', function(e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
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) {
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';
}
}
}
}
//animloop();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment