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

JavaScript Tutorial & paper.js primer

Picture Slide Show - Raster Animation (Setting the Background)

The following code loads .png files from an image file into a JavaScript Array

// Initialize BackGround Images
var backgroundRaster = [];
var numBackgroundImages = 5; // magic number, prefill as needed
var currentBackground = 1;
for (i = 1; i <= numBackgroundImages; i++){
    //var backgroundImageURL = [];
    var url = "images/montana/MontanaBackGround";
    if (i <= 9){
        url += "0";
    }
    url += i;
    url += ".png";
    //backgroundImageURL[i] = url;
    backgroundRaster[i] = new paper.Raster(url, CP);
    backgroundRaster[i].visible = false;
    url = "";
   
}
backgroundRaster[currentBackground].visible = true;


This 'animates' the array (cycles through the difference pictures)

function onFrame(event){
    if (event.count%250 === 0) {
        backgroundRaster[currentBackground].visible = false;
        currentBackground += 1;
        if (currentBackground > numBackgroundImages){
            currentBackground = 1;
        }
        backgroundRaster[currentBackground].visible = true;
    }
}



previous (Drunken Circles)        paper.js tutorial index       next - (Montana-002)



Back to BrettCode Home



Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org

© Copyright 2013 Brett Paufler