paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 9-10-13

JavaScript Tutorial & paper.js primer

Rasters Revisited - Creating the Rasters


Below is a lot of repetative code, but it was easier than doing a for loop.  This is just a lot of plug and chug to find the right spot on the screen for the various rasters.

// Raster Variable Creation
var evilCatSmall = "images/evilCatSmall.png";
var thisRaster = [];
var tempPoint = new Point(CP);
thisRaster[0] = new Raster(evilCatSmall, tempPoint);
tempPoint.y -= 100;
thisRaster[1] = new Raster(evilCatSmall, tempPoint);
tempPoint.y -= 100;
thisRaster[2] = new Raster(evilCatSmall, tempPoint);
tempPoint = CP;
tempPoint.y += 100;
tempPoint.x -= 100;
thisRaster[3] = new Raster(evilCatSmall, tempPoint);
tempPoint.x += 200;
thisRaster[4] = new Raster(evilCatSmall, tempPoint);

And then, at this time, I added a data property to keep track of the blinking raster:
thisRaster[2].data = true;

Take my word on this.  If you arbitrarily add a property to a paper.js Object, it's going to come back and bite you.
thisRaster[2].blinkOn = true; //WRONG WAY TO DO IT
This will fail: eventually, if not right away.

onFrame() Raster Utilization


As follows is the complete onFrame() code for this page.  I didn't feel there was any need to refactor these as functions, as I never plan on doing anything further with this code.  And so, refactoring would be a complete waste of time.  (Polishing garbage still yields garbage.)

var scaleFactor = 1.025;
var upDown = -1;  // controls blinking and expanding raster

function onFrame(event){

    thisRaster[3].rotate(1);  // the two rasters that rotate were simple to code
    thisRaster[4].rotate(-1.5);  // + for one direction, - for the other
   
    var C = event.count; // because sometimes things just work better this way
 
    if (C%25 === 0){  // every 25 turns, this fires
       
        if (upDown === 1){  // every/other time, this portion fires
            upDown = -1; // toggles the control switch (upDown)
            thisRaster[2].visible = false; // toggles raster
            scaleFactor = 1 / 1.025; // scale factor is reverse of below
        } else if (upDown === -1){  // other/every, this portion fires
            upDown = 1;
            scaleFactor = 1.025; // scale factor is reverse of above
            if (thisRaster[2].data === true){  // .data variable was created to control, visible toggle
                thisRaster[2].visible = true;  // if .data is not true, .visible never happens
            }
        }
    }  // and here we have a bunch of closing brackets which I never bothered to label
        // it's throwaway code, so no bother, but perhaps this illustrates the importance of doing so
       // hard to know it's not the entire function that is closing at this point
  
    thisRaster[0].scale(scaleFactor);  // center raster increases or decreases as appropriate
   
    updateFeedbackPointText(event); // and all the feedback boxes fire
   
}  // function actually closes here


PointText Feedback

I have little to say about these, but that they are there.  And as much can be learned from them as anything else on the page.


From a computer resource point of view, rasters are likely very economical for high level graphics -- say, rather than refiguring the radius of twenty circles or the complex wave modelling a fire, wave, or clouds, a repeating series of pictures (rasters) are likely more computationally effective: compute once, save as pictures, load as needed.  And so, to this end, the next goal of mine is to ouput an image from the canvas into a reusable resource (i.e. a raster, better known as a gif, jpg, or png).




previous (Rasters)        paper.js tutorial index       next - (imageOutput)



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