JavaScript Tutorial & paper.js primer by Brett Paufler -
10-11-13
Raster Animation using paper.js
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.)
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)
