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

JavaScript Tutorial & paper.js primer

Raster Animation

Picture Slide Show

Montana-002



Center the Rasters


I used Kompozer to center the pictures, using the following HTML code.

<div style="text-align: center;"><canvas id="canvas" resize=""></canvas>

I thought I was going to need to resize the canvas downward, but after centering, the images look more or less how I want, so why bother (and likely will get more versatility from differing browsers if I don't, so there are reasons against setting a static size).


Raster Initialization as a Function


This is a function (trial, will need to be refined) for use in initializing the Rasters.


// Initialize Small Rasters
var smallRaster = [];
var numSmallRaster = 18;  // a magic number to be set manually
var currentSmallRasterOne = 1;
function initializeRaster(holdingArray, numRasters, imageName){

    for (i = 1; i <= numRasters; i++){
   
        // to += .png builds up the url variable
        var url = "images/montana/";
        url += imageName;
       
            // end "O" or "OO" as needed
            if (i <= 9){
                url += "00";
            } else if (i <= 99){
                url += "0";
            }
           
        url += i;
        url += ".png";  // url variable completed
       
        holdingArray[i] = new paper.Raster(url, CP);
        holdingArray[i].size.width = 25;
        //holdingArray[i].size.height = 100;
        holdingArray[i].visible = false;
        url = "";
   
    } // end for
} // end initializeRaster Function

// call the function, to initialize small Rasters
initializeRaster(smallRaster, numSmallRaster, "MontanaSmall");

Resizing the Raster

I didn't even notice in the previous tutorial that the pictures were getting cut off.  They're still distorted with the code below, but it's closer to what I want.  Note: how sizes are relative to the view.size.


function onFrame(event){

// missing code...
    
        backgroundRaster[currentBackground].visible = true;
        backgroundRaster[currentBackground].size = view.size;
        smallRaster[currentSmallRasterOne].visible = true;
        smallRaster[currentSmallRasterOne].size = view.size/10;
}

So, next time, I expect to work on positioning the smallRaster away from the center.
And work out some way to preserve the aspect ratio.


previous (Montana-001)        paper.js tutorial index       next - (Montana-003)



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