gistfile1.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 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');

    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) && (result.data[idx].type === 'image/gif') && (result.data[idx].size < 2E6)) {
                    var newimage = GIF(image.link);
                    newimage.render();
                    g.push (newimage);
                    recursiveLoad(newimage);
                }
            });
        }
    });
 
    ok.addEventListener('click',function(){
      $("#contain").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);
     $("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
     if (g.length === trueArr.length) {
        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) {
     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';
         }
       }
     }
   }