Skip to content
Image animation GIF maker
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
README.md
gif.js
gif.worker.js
index.html
popet.jpg

README.md

Popet

Image animation GIF maker

Popet began with the idea of animating loops by distorting an image-mapped mesh. In many ways, it's a continuation of ideas I began exploring with Boopy.

The puppet mesh skin can be interactively distorted using a small set of "bones". To create this, I employed a single vertex shader in WebGL that calculates the transform based on distance from each handle. There are 4 handles, which is pretty handy for the GLSL 'vec4' variables. Starting position, offset, and rotation for each handle is passed into the vertex shader where it's applied to each point in the mesh and then weighted according to distance/falloff.

For the UI, a second Canvas element is drawn on top of the WebGL Canvas, and motion of each point is stored as an array of position values, and is constantly both read and written at each frame change. This follows the circular buffer idea used to represent delay/loop effects in audio programming. One of the beauties of circular buffer loops is that each loop can have different start/end points based on timing of gestures.

GIF export is done using GIF.js

You can’t perform that action at this time.