imgur api paper working random image no drawing private

this is the fully working example without drawing but has preloading and click through viewbounds limited to a single page of images to do: add extra pages on empty

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/papernew.js"></script>
<canvas resize="true" id="mycanvas"></canvas>
<script type="text/paperscript" canvas="mycanvas">
    var r;
    var path;
    var preloadAmount = 5;
    var cache = [];
    var imgurcache = [];
    var resultcache = [];
    var rArray = [];
    var raster;
    var background;
    var value = 1;
    var imagesrc;
    var imagesrcs;
    var autoShowNext = false;

    function extractToken(hash) {
        var match = hash.match(/access_token=(\w+)/);
        return !!match && match[1];
    }
    var num = Math.floor(Math.random() * 10); // 0...6
    var token = extractToken(document.location.hash);
    var clientId = 'b144351ffb05838';
    var auth;
    if (token) authorization = 'Bearer ' + token;
    else authorization = 'Client-ID ' + clientId;
    $.ajax({
        url: 'https://api.imgur.com/3/gallery/random/random/page=' + num,
        method: 'GET',
        headers: {
            Authorization: authorization,
            Accept: 'application/json'
        },
        data: {
            image: localStorage.dataBase64,
            type: 'base64'
        },
        success: handleData
    });

    function handleData(result) {
        $.each(result.data, function(idx, image) {
            if (result.data[idx].animated === false) {
                if (result.data[idx].is_album === false) {
                    var rimgur = image.link;
                    imgurcache.push({
                        source: rimgur,
                        position: view.center,
                        size: view.bounds
                    });


                }
            }

        });
        preload();
        background = new Raster(imgurcache[0].source);
        background.position = view.center;
        background.size = view.bounds;
        background.on('load', function() {
            onResize();
        });
        console.log(background);
    }


    function onMouseDown(event) {
        showNext();
    }

   ...

CSS

canvas {
    width:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}