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-005

Adding Secondary Pictures on Top of First Using Group & path.clipped = true;

The following adds the various rectangles and ellipses, both of which are required to align the pictures properly.
The Rectangle will be used to size the Rasters.
The Ellipse will be used to clip the Rasters (to the shape desired, a.k.a. used as a clipMask).

var hEllipse = [];
var hBox = [];
var vEllipse = [];
var vBox = [];

The following are more or less 'Magic Numbers' the ratios of my raw Image files (to avoid distortion)
// 1000 wide, 750 tall for background
var hRatio = 0.75;
var vRatio = 1.3;

// finds the screen size (view size of user)
var w = view.size.width;
var h = view.size.height;

// resets w or h so picture fits screen (customizes view for each viewer)
if(w/h > vRatio){
    w = h * vRatio;
} else {
    h = w * hRatio;
}

// lots of magic numbers in this -- it's what works
// by trial and error, based on screen feedback
function drawPictureEllipse(){
    for(i=1; i<=4; i++){
        var holdObject = {
            center: [CP.x + w*(i-3)/4, (CP.y+w/4*hRatio)],
            size: [w/4, w/4*hRatio],
            strokeColor: 'black',
            strokeWidth: 5
        };
        hEllipse[i] = new Path.Ellipse(holdObject); // object above, inserted here, avoids repeated code
        hBox[i] = new Path.Rectangle(holdObject);

        holdObject = {
            center: [CP.x + w*(i-3)/4 + w/32, (CP.y-w/2*hRatio)],
            size: [w/4*hRatio, w/4],
            strokeColor: 'black',
            strokeWidth: 5
        };
        vEllipse[i] = new Path.Ellipse(holdObject);
        vBox[i] = new Path.Rectangle(holdObject);

    }// end for
} // end drawPictureEllipse
drawPictureEllipse(); // function is imediately called, so no error when Ellipses are reference in onFrame() function below
                                // for code to function, Ellipses only need to be drawn once
                                // repeated draws are only for debugging (so they can be seen easily now)

Group & .clipped used to size & place a picture

function onFrame(){

... lots of missing code...

        // backgroundRaster is redrawn

        ... then


        initializeRaster(smallRaster, "MontanaLCopy", currentSmallRasterOne);
        smallRaster[currentSmallRasterOne].visible = true;
        smallRaster[currentSmallRasterOne].fitBounds(hBox[cycleNumOne].bounds); // fitBounds sizes picture

        //TODO need to pull out into a function
        // save for the multi Line cycle
        var groupOne = new Group(hEllipse[cycleNumOne]);
        groupOne.clipped = true;
        groupOne.addChild(smallRaster[currentSmallRasterOne]); // these three lines shape the Rasster

        cycleNumOne += 1;
        if(cycleNumOne > 4){
            cycleNumOne = 1;
        }

        // TODO Kill Ellipse
        drawPictureEllipse(); // when this is commented out, Ellipses will no longer appear
    }// end code to draw smallRaster
} // end onFrame

I'll draw this out into a function call next (maybe... or maybe not if I decide to close shop on this project in the next coding session or two).
Play a bit with the images (have more than one on screen at once).
Add a Large 'Montana' pointText object (fontSize = 1/10 view.screen.height or so).

And that might be it for this project.
I mean, twirling pictures and funky transistion might be nice (from a show off perspective), but I'm not convinced they'll add anything to the display. So, I'll likely skip.

previous -- Montana004 paper.js tutorial index next - Montana006

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