paper.JS Tutorial - Montana (Picture Raster)

paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 12-3-13

JavaScript Tutorial & paper.js primer

Raster Animation

Picture Slide Show

Montana-004

Preloading Images

Yeah, this isn't really preloading images. It's reloading images repeatedly, which is a handy work around. After the first call for each image, the image is in the browser's cache (in theory, at least). And so, subsequent calls for the same image don't (or shouldn't) take up any bandwidth,

function onFrame(event){

    if (event.count%25 === 0 || event.count < 2 * numBackgroundImages) { // preloads twice and then cycles normally

        // change Background
        if(event.count%100 === 0 || event.count < 2 * numBackgroundImages){ // preloads twice and then cycles normally
            if(backgroundRaster[currentBackground]){
                backgroundRaster[currentBackground].visible = false; // first time will throw an error if not wrapped in an if
            }

            // counter for cycle
            currentBackground += 1;
            if (currentBackground > numBackgroundImages){
            currentBackground = 1;
            }

            //each time through a new Raster Object is made
            initializeRaster(backgroundRaster, numBackgroundImages, "MontanaBackGround", currentBackground);
            backgroundRaster[currentBackground].visible = true;
            backgroundRaster[currentBackground].fitBounds(sSR.bounds);
        }

        // change small
        if(smallRaster[currentSmallRasterOne]){
            smallRaster[currentSmallRasterOne].visible = false;
        }
        currentSmallRasterOne += 1;
        if (currentSmallRasterOne > numSmallRaster){
            currentSmallRasterOne = 1;
        }
        initializeRaster(smallRaster, numSmallRaster, "MontanaLCopy", currentSmallRasterOne); // same images, different name (see below)
        smallRaster[currentSmallRasterOne].visible = true;
        smallRaster[currentSmallRasterOne].fitBounds(smallSSR.bounds);
    }
} // end onFrame

Also, I:

Reduced the image size. Don't know why I didn't think of that before. (To start they were at 10MB, but now they're at a more manageble 1MG or so, which is probably how you'll always see them).
Changed the inset images to match those of the background images for ease of debugging (but with new names so I could insure everything was loading correctly). So, when this goes live, I'll have to remember to change that name call back. (And just as I get done typing this, I'm going to add myself a TODO note.)
And then I added some pointText copy to warn users of a long load time.

// headText creation
var headText = [];
function createHeaderText(){
    for (i = 1; i <= 50; i++){
        //headText[i] = {};
        headText[i] = new PointText(new Point(100, 20 * i - 10));
        headText[i].strokeColor = 'black';
        headText[i].content = "© Copyright Brett Paufler 12-6-13 -- PAGE LOADING -- PAGE LOADING - PAGE LOADING";
    }
}
createHeaderText();