JavaScript Tutorial & paper.js primer by Brett Paufler - 10-11-13

Raster Animation using paper.js


Pendulum GIF
GIF image file
paper.js Rasters

Animating Rasters

Per graphics above:
    GIF image file is a single animated GIF
    paper.js Raster combines the 20 static png files (the same png files utilized to make the animated GIF) and animates them using the onFrame() method


Here we have an animated GIF and a Raster Animation side by size.  The Raster implementation looks a little clunkier to me, but I'm sure that's just due to the timing variables.  (I guess I set the GIF up better than the animation).  However, as this is just a proof of concept, there's not much point in fine tuning it any better.

The code to implement this is as per below.  However, I should warn that as I am reusing the same functions as from the last few tuturials, the names have little coherent meaning at this point.  imageCapture() presses/pushes a Raster to the screen.  And no button is being pushed for buttonPressOne().  Thus is the nature of reused code.


var bC = 0; // variable to track what image we are on
var rCP = new Point (100, 125); // center to of the canvas, (canvas is 200 by 250 as set in the HTML)

function imageCapture(){  // presses the Raster to the screen
 
    paper.setup(document.getElementById('canvas'));  // the rasters will just dump one on top of the other unless we erase layers
    paper.project.activeLayer.removeChildren();       // png have a transperant layer, so we wouldn't have to do with a gif, jpg, etc.
   
    var thisImage = "images/pen/test" + bC + ".png";  // this increments the image string variable to the next image
    var thisRaster = new paper.Raster(thisImage, rCP); // places the Raster on the canvas
   
    paper.view.draw();  // having erased the view, we must bring it back
   
}  // imageCapture Ends


function buttonPressOne(){       // in total increments bC from 1 to 20

    if (bC <= 19){
        bC += 1;
    } else {
        bC = 1;
    }
   
    imageCapture();      // once incremented, the above imageCapture() function is called
}  // buttonPressOne Ends

function onFrame(event){  // and here's the onFrame(event), same as per the last few tutorials
    if ((event.count + 1)%18 === 0){  // it seems a bit clunky, so the 18 should  maybe be a 16 at this point???
        buttonPressOne();
    }
}


All in all, it's not that difficult.  Certainly, I will need to fine tune the removal of layers and items if I am going to use this in a larger program, but I think it's easy to see how much easier it would be computationally to have twenty instances of this raster series appearing on screen rather than having to do twenty simulaneous calculations.  As I deconstruct games, I am noticing that many/most of the graphics (explosions, movement) are executed with raster series.  Alos, keep in mind tha entire raster series for the pendulum animation only took 85.8KB, not much in this day and age.

I think that's enough on Rasters for now.
Next up, Styles in paper.js... whatever those are.

(And upon thinking on this for another day or so, I realized it would likely to be more practical to load all the rasters in advance and then just cycle down the list changing the visible property to true and then false for each Raster in turn.  Live and learn.  Will likely do it that way next time.)




previous (GIF Creation)        paper.js tutorial index       next (Group)



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 (Master Of & He Who Has Insight Into All)



DYNAMICALLY CREATED IMAGES FOLLOW, THESE ARE NOT PRESENT WHEN THE PAGE INITIALLY LOADS. REFRESH THE PAGE IF YOU DON'T BELIEVE ME.