Source code for `poverass` and `guarl_raid` glitch gifs

anim_1.gif

anim_2.gif

anim_3.gif

anim_4.gif

index.html

phantom.js

processing-1.4.1.min.js

sunset.jpg

In order to make a GIF, I use the following workflow:

1. Run HTTPServer

In the working directory of my project, I run an HTTP server to serve all the static files to a web browser. I do this by running:

$ python -m SimpleHTTPServer

after cding to the right directory in the terminal.

1. Make GIF.

The second thing I do to make a GIF is use phantomJS and gifsicle to render page frames. I use the following one-liner to render GIFs:

$ rm -f out*.gif;phantomjs phantom.js; gifsicle --loop --colors 128 --delay 11 out*.gif > anim.gif

In a nutshell, this one-liner:

• removes all previously rendered frames (anything named out*.gif)
• runs the phantomjs headless web browser to render this folder using the recording script defined in phantom.js and renders sequentially numbered out*.gif frames into the working dir.
• takes the outputted gif frames and wraps them all up into an animated gif with gifsicle.

note The file phantom.js handles configuration for the process phantomjs (they're different! see the .?). Stuff like setting up the headless web browser's screen size, url location, etc. are all handled in that file.

note 2: I use different colors and delay parameters for gifsicle with different GIFs. Not sure what I used for this iteration unfortunately, but this is a good guess. :-p

A kind of neat side-effect of using this approach is that you can go straight to http://localhost:8000/anim.gif in order to preview the finished GIF you've just made in step 2 as long as you keep the HTTP server running.

---

This is a basic walkthrough for now. I'm going to try and create a basic repo structure later for my future sketches, including a Makefile, etc.

In the meantime, please check out this gist! I'll try to remember to add in the source image I have for poverass (I took it with my iPhone rather than downloading it).