Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created October 11, 2014 07:46
Show Gist options
  • Save naeluh/02fb5849553bf90e576c to your computer and use it in GitHub Desktop.
Save naeluh/02fb5849553bf90e576c to your computer and use it in GitHub Desktop.
Download ZIP
gifpainting latest mobile semi working still too slow wip // source http://jsbin.com/garota/30
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://yastatic.net/jquery/1.11.1/jquery.min.js"></script>
<meta name="description" content="gifpainting latest mobile semi working still too slow wip" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
<title></title>
<style id="jsbin-css">
body {
margin: 0 auto;
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow: hidden;
}
canvas {
position:absolute;
top:0px;
left:0px;
overflow: hidden;
}
#loading {
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 30%;
height: 100%;
color: #fff;
/* padding: 5%; */
margin: 0 auto;
}
#loading p {
float:left;
margin-right:9%;
}
#contain {
position: absolute;
margin: 0 auto;
background: #000;
width: 100%;
height: 100%;
line-height: 10px;
}
</style>
</head>
<body>
<div id="contain">
<div id="loading" style="display:none;">
<p style="float:left;margin-right:2%;">Loading....</p>
</div>
</div>
<div id="testbox"></div>
<div id="gifs" style="display:block;"></div>
<div id="rate"></div>
<script src="http://yastatic.net/modernizr/2.7.1/modernizr.min.js"></script>
<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">
/* working version there are alot of issues the amount of gifs that can be shown is few and is slow and the brush/mouse suck still*/
var value = isNaN(value) ? 10 : value;
var animationFrame = new AnimationFrame();
var ct = [];
var ct2 = [];
var g = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
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() {
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);
$("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
if (g.length === trueArr.length) {
$("#loading").fadeOut(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) {
createCanvas(ct, canarr);
createCanvas(ct2, canarr2);
}
function drawMobi(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)];
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, r, 0, Math.PI * 2, false);
//ctx2.arc(e.pageX/2, e.pageY/2, r, 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)];
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.clientX, e.clientY, r, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
if (Modernizr.touch) {
console.log('touch');
document.addEventListener('touchstart', create);
document.addEventListener('touchmove', drawMobi);
} else {
window.addEventListener('mousedown', create);
window.addEventListener('mousemove', drawDesk);
}
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';
}
}
}
}
/*this sucks below no resize damn and your still slow*/
/*
function resize(){
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var can = canarr[gifNum];
var can2 = canarr2[gifNum];
can.width = window.innerWidth;
can.height = window.innerHeight;
can2.width = window.innerWidth;
can2.height = window.innerHeight;
}
}
window.addEventListener('resize',resize);
window.addEventListener('orientaionChange',resize);
*/
</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;
}
canvas {
position:absolute;
top:0px;
left:0px;
overflow: hidden;
}
#loading {
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 30%;
height: 100%;
color: #fff;
/* padding: 5%; */
margin: 0 auto;
}
#loading p {
float:left;
margin-right:9%;
}
#contain {
position: absolute;
margin: 0 auto;
background: #000;
width: 100%;
height: 100%;
line-height: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/* working version there are alot of issues the amount of gifs that can be shown is few and is slow and the brush/mouse suck still*/
var value = isNaN(value) ? 10 : value;
var animationFrame = new AnimationFrame();
var ct = [];
var ct2 = [];
var g = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
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() {
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);
$("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
if (g.length === trueArr.length) {
$("#loading").fadeOut(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) {
createCanvas(ct, canarr);
createCanvas(ct2, canarr2);
}
function drawMobi(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)];
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, r, 0, Math.PI * 2, false);
//ctx2.arc(e.pageX/2, e.pageY/2, r, 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)];
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.clientX, e.clientY, r, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
if (Modernizr.touch) {
console.log('touch');
document.addEventListener('touchstart', create);
document.addEventListener('touchmove', drawMobi);
} else {
window.addEventListener('mousedown', create);
window.addEventListener('mousemove', drawDesk);
}
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';
}
}
}
}
/*this sucks below no resize damn and your still slow*/
/*
function resize(){
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var can = canarr[gifNum];
var can2 = canarr2[gifNum];
can.width = window.innerWidth;
can.height = window.innerHeight;
can2.width = window.innerWidth;
can2.height = window.innerHeight;
}
}
window.addEventListener('resize',resize);
window.addEventListener('orientaionChange',resize);
*/</script></body>
</html>
Raw
jsbin.garota.css
body {
margin: 0 auto;
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow: hidden;
}
canvas {
position:absolute;
top:0px;
left:0px;
overflow: hidden;
}
#loading {
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 30%;
height: 100%;
color: #fff;
/* padding: 5%; */
margin: 0 auto;
}
#loading p {
float:left;
margin-right:9%;
}
#contain {
position: absolute;
margin: 0 auto;
background: #000;
width: 100%;
height: 100%;
line-height: 10px;
}
Raw
jsbin.garota.js
/* working version there are alot of issues the amount of gifs that can be shown is few and is slow and the brush/mouse suck still*/
var value = isNaN(value) ? 10 : value;
var animationFrame = new AnimationFrame();
var ct = [];
var ct2 = [];
var g = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
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() {
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);
$("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
if (g.length === trueArr.length) {
$("#loading").fadeOut(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) {
createCanvas(ct, canarr);
createCanvas(ct2, canarr2);
}
function drawMobi(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)];
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, r, 0, Math.PI * 2, false);
//ctx2.arc(e.pageX/2, e.pageY/2, r, 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)];
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.clientX, e.clientY, r, 0, Math.PI * 2, false);
ctx2.fillStyle = "rgba(0,0,0,0.5)";
}
e.preventDefault();
}
if (Modernizr.touch) {
console.log('touch');
document.addEventListener('touchstart', create);
document.addEventListener('touchmove', drawMobi);
} else {
window.addEventListener('mousedown', create);
window.addEventListener('mousemove', drawDesk);
}
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';
}
}
}
}
/*this sucks below no resize damn and your still slow*/
/*
function resize(){
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var can = canarr[gifNum];
var can2 = canarr2[gifNum];
can.width = window.innerWidth;
can.height = window.innerHeight;
can2.width = window.innerWidth;
can2.height = window.innerHeight;
}
}
window.addEventListener('resize',resize);
window.addEventListener('orientaionChange',resize);
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment