JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="http://cdn.eyahuska.com/paper-full.min.js"></script>
<canvas resize="true" width="1280" height="720" id="mycanvas"></canvas>
<script type="text/paperscript" canvas="mycanvas">
  var r;
var path;
var preloadAmount = 3;
var cache = [];
var raster;
var autoShowNext = false;

var imagesArray = [{
    source: 'http://lorempixel.com/1920/1080/city/',
    position: view.center,
    size: view.bounds
}, {
    source: 'http://lorempixel.com/1920/1080/sports/',
    position: view.center,
    size: view.bounds
}, {
    source: 'http://lorempixel.com/1920/1080/nature/',
    position: view.center,
    size: view.bounds
}, {
    source: 'http://lorempixel.com/1920/1080/cats/',
    position: view.center,
    size: view.bounds
}, {
    source: 'http://lorempixel.com/1920/1080/technics/',
    position: view.center,
    size: view.bounds
}];

var background = new Raster({
    source: 'http://lorempixel.com/1920/1080/nightlife/',
    position: view.center,
    size: view.bounds
});

background.on('load', function () {
    onResize();
});

function onMouseDown(event) {
    showNext();
}

function showNext(){
    if (cache.length) {
        var img = cache.shift();
        autoShowNext = false;

        raster = new Raster(img.source);
        raster.position = view.center;

        preload();
    } else {
        autoShowNext = true;
    }
}

function preload(){
    var num = Math.floor(Math.random() * 5); // 0...6
    var imagesrc = imagesArray[num];
    var img = new Image;

    img.onload = function(){
        cache.push({source: img, position: view.center, size: view.bounds});

        if (cache.length < preloadAmount) {
            preload();
        }

        if (autoShowNext) {
            showNext();
        }
    }

    img.src = imagesrc.source;
}
    
function onResize(event) {
    background.fitBounds(view.bounds, true);
    if (raster) raster.fitBounds(view.bounds, true);
}
    
preload();
</script>