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

Making a GIF out of a paper.js Animation


paper.js canvas
Pendulum GIF Black
PNG to GIF via InfanView
Pendulum GIF
PNG to GIF via Paint


onFrame() Image Creation

The following code is probably a lot messier than it needs to be.  But once again, it's throwaway code, so I'm not going to spend the effort to refactor.  Whatever the case, this code spits out an image to the screen every 18 micro seconds or so.  Logically, I code it in reverse order (from the bottom up).  But this is the way it needs to be written so it fires correctly in the file (top down).


var bC = 0; // counting variable

function imageCapture(){  // the function that spits the image to the screen
                                        // these images are dynamically added to the screen at runTime

    var thisImage = new Image();  // probably could declare this in the next line
    thisImage = document.getElementById('canvas').toDataURL("image/png"); // and we saw this in the previous tuturila
   

    // this is commented out, but if it fires, a pop up offering to save this file appears
    // unfortunately, the file won't save
    // more on this later
    //thisImage = document.getElementById('canvas').toDataURL("image/png").replace("image/png", "image/octet-stream");
    //window.location.href = thisImage;
     
    var imgTarString = 'newImage' + bC.toString();  // incrementally changes the string name
   
    var imageTarget = document.getElementById(imgTarString);  // determines target for the image
    imageTarget.src = thisImage;       // places the image in the HTML

}  // imageCapture Ends

function buttonPressOne(){  // admittadly, this is poor programming
    if (bC < 20){                   // as it could be included elsewhere (say in the onFrame method
        imageCapture();          // all this does is insure that the imageCapture() function only fires 20 times
    }
    bC += 1;
}  // buttonPressOne Ends

function onFrame(event){       // this is our onFrame() function
    animateObjects();             // this function animates the pendulum, covered the Pendulum Tutorial
    if ((event.count + 1)%18 === 0){  // this times the imageCapture so it only occurs every 18 onFrame(event.count) cycles
        buttonPressOne();
    }
}

So, when I say I code these things in reverse order, what I mean is that I fill in the onFrame(event) first, call a dummy function, then fill out that dummy function (in this case buttonPressOne, which in turn calls imageCapture).


With the above JavaScript in place, as the page is loaded, twenty images are added to the bottom of the DOM, in precreated tags.
<img id="newImage0">
<img id="newImage1">
<img id="newImage2">
etc., and so on.

jQuery could create the tags dynamically.  But I don't want to learn another library just for this.

Image Capture

I did not find any easy way to download the pictures.  Appearently (or so I gather), all the mass picture download tools look for an image file.  Since these images are dynamically created, there is no file, and all the mass download utilities that I tried failed.  So, I saved the pictures one by one.  Thus, although I could have made the GIF a lot smoother, that would have entailed hand saving more files, so guess what?  I opted for a choppy GIF.

Anyway, after hand saving the files, I had to hand convert the png files to gif files one by one in MS Paint (open, save as gif, save, OK, OK).  InfarView would do it bulk, but it turned the background black.  This last was interesting in its own right in that it made it much clearer as to the pattern the blue gear was taking; but as it blacked out all the complicated graphics, it was ultimately not what I was looking for.

Once I had reformated all the images into static gifs, I loaded those into
UnFREEz - GIF Making FreeWare
(c) WhitSoft Developement
http://www.whitsoftdev.com
which does all the work of transforming a set of stationary GIFs into a dynamic animated GIF.

So, long story short, I have my gif and I have a proceedure for making gifs in the future, but it's highly unsatisfactory (and involves a lot of mouse clicking).  At some point I'm going to have to revisit this, but for now, it's good enough.  If nothing else, I know exporting my work as a GIF is possible.  And if it's possible, it's also possible to automate it using JavaScript (or more likely Python).

Anyhow, from there, I'm going to show how the single static gif images that I downloaded (all twenty of them) can be looped together as raster objects from within paper.js.  It's not a GIF, but from a web perspective, it will be functionally the same.  And should highligh how static images can be used to create the illusion of movement.



(NOTE:  IF YOU WANT, SCROLL DOWN TO SEE THE IMAGES THAT WERE CREATED DYNAMICALLY AT RUNTIME AND USED TO MAKE THE GIFs AT THE BOTTOM OF THIS WEB PAGE.)



previous (Saving Image Output)        paper.js tutorial index      next (RasterAnimation)



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.