Agamemnus version

by nhulea

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
<div id="loading" style="display:block;">Loading...</div>

CSS

canvas {
    position:absolute;
    top:0px;
    left:0px;
}
#loading {
    position:absolute;
    top:0px;
    left:0px;
}

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); 
                }
            });
        }
    });

    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 =...