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