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:

// 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();







previous -- Montana003        paper.js tutorial index       next - Montana005



Back to BrettCode Home



Eddie Takosori's Suki Kamasutri: The Queen of the Galactic Frontier



© Copyright 2013 Brett Paufler