JavaScript Tutorial & paper.js primer by Brett Paufler -
10-9-13
Making a GIF out of a paper.js Animation
paper.js
canvas
PNG to GIF via InfanView
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.)
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)
