Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created September 27, 2014 06:40
Show Gist options
  • Save naeluh/5a3856725eea67ac6218 to your computer and use it in GitHub Desktop.
Save naeluh/5a3856725eea67ac6218 to your computer and use it in GitHub Desktop.
Download ZIP
gif painting wip NSFW // source http://jsbin.com/xodeta/5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta name="description" content="gif painting wip NSFW" />
<meta charset="utf-8">
<title></title>
<style id="jsbin-css">
canvas {
position:absolute;
top:0px;
left:0px;
}
#loading {
position:absolute;
top:0px;
left:0px;
background:#000;
width:100%;
height:100%;
color:#fff;
}
</style>
</head>
<body>
<div id="loading" style="display:block;">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 = [];
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);
loadStupid();
$("#gifs").html(g.length);
}
});
}
});
function loadStupid() {
console.log(10000 * (Number(g.length)));
setTimeout(function () {
$("#loading").fadeOut(1E3);
}, 10000 * (Number(g.length)));
}
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) {
//$("#loading").fadeOut(1E3);
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="gif painting wip NSFW" />
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="loading" style="display:block;">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">canvas {
position:absolute;
top:0px;
left:0px;
}
#loading {
position:absolute;
top:0px;
left:0px;
background:#000;
width:100%;
height:100%;
color:#fff;
}</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 = [];
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);
loadStupid();
$("#gifs").html(g.length);
}
});
}
});
function loadStupid() {
console.log(10000 * (Number(g.length)));
setTimeout(function () {
$("#loading").fadeOut(1E3);
}, 10000 * (Number(g.length)));
}
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) {
//$("#loading").fadeOut(1E3);
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.xodeta.css
canvas {
position:absolute;
top:0px;
left:0px;
}
#loading {
position:absolute;
top:0px;
left:0px;
background:#000;
width:100%;
height:100%;
color:#fff;
}
Raw
jsbin.xodeta.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 = [];
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);
loadStupid();
$("#gifs").html(g.length);
}
});
}
});
function loadStupid() {
console.log(10000 * (Number(g.length)));
setTimeout(function () {
$("#loading").fadeOut(1E3);
}, 10000 * (Number(g.length)));
}
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) {
//$("#loading").fadeOut(1E3);
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