Draw a Circle Animated Gif

In my endeavours to build a GIF decoder for SerenityOS I soon realised the need for a suite of exam GIFs to have reference targets to aim for in my implementation. Initially this involved me browsing r/gifs and the occasional Google Putter, however information technology's quite difficult to find contemporary GIFs that exhibit some of the more obscure GIF functionality. It wasn't long before a few edge cases and bugs cropped upward as people discovered GIFs with as-even so unimplemented features, and as I fixed one, another would pause. I needed a meliorate manner.

Enter ImageMagick, an extremely powerful open up-source platform for creating, converting, manipulating, inspecting, and visualising over 200 image file formats. Information technology turns out that nosotros can use ImageMagick's command-line interface to conjure blithe GIFs out of thin air. Using this we can programmatically and systematically generate a suite of GIFs that exhibit all different kinds of GIF features: perfect for testing a decoder.

Yous can discover the GIF test suite on GitHub¹. The rest of this mail will requite an overview of the ImageMagick command-line interface, driven by examples of GIF generation from the test suite. Each example tin be run and modified interactively in the browser using a WebAssembly build of ImageMagick.

Annotation: the command-line examples use ImageMagick vii which consolidates all functionality into a single magick command. All of the examples should also piece of work with ImageMagick 6, only you will likely need to use catechumen instead of magick.

ImageMagick control format

An ImageMagick command is a pipeline of settings and operations that are successively practical to input images to generate an output paradigm. The ordering of command-line parameters is therefore important as they specify this pipeline. A command consists of the following types of parameter:

• At to the lowest degree 1 input prototype. This could be an image loaded from file, a frame of an existing GIF, or an image that is "built in" to ImageMagick.
• Optional epitome operators. These are one-off operations that build upwards or transform an prototype. They include diverse cartoon commands and image transforms.
• Optional image settings. These apply to subsequent processing operations unless reset. For GIFs, this includes settings such equally the animation frame delay and frame disposal mode.
• Optional epitome stack commands. These manipulate the prepare of images that operators employ to.
• Optional output image filename.

Let's explore these via some examples.

Static GIF

The following simple command draws a stake dark-green circle on a night green background, and saves the output as a static GIF:

          magick -size 100x100 ninety:DarkSeaGreen \   -fill up PaleGreen -depict "circle fifty,50 15,25" \   "static_nontransparent.gif"                  

Output

Breaking it down:

• [Setting]: -size 100x100 – set the size of the image to 100x100 pixels.
• [Input image]: xc:DarkSeaGreen – built-in prototype² of solid DarkSeaGreen color.
• [Setting]: -fill PaleGreen – sets the fill colour for subsequent drawing operations to PaleGreen.
• [Operator]: -describe "circle 50,50 15,25" – draws a circle centred at (50,50) whose circumference intersects point (xv,25). This is filled to PaleGreen colour as per the previous setting.
• [Output image filename]: static_nontransparent.gif – write the output to the specified file.

Bones animated GIF

To create an animated GIF, new frames can be added using the -folio operator:

          magick -filibuster 100 \   -size 100x100 xc:transparent \   -fill DarkSeaGreen -draw "circle l,50 xv,25" \   -dispose previous \   -page +ten+ten -size 30x30 xc:LightSalmon \   -page +30+30 -size 40x40 ninety:SkyBlue \   -page +60+threescore -size 30x30 xc:Khaki \   -loop 0 \   "animated_transparent_restoreprev_loop.gif"                  

Output

Breaking down the differences from the previous example:

• [Setting]: -delay 100 – sets the delay between showing 1 frame and the next to 100 ticks. Past default a tick is 1/100th of a second, therefore this will issue in a 1Hz frame rate.
• [Setting]: -dispose previous – specifies that the background upon which a frame is fatigued should be redrawn when the frame is disposed (i.eastward. when the side by side frame is shown).
• [Setting]: -page +10+10 – specifies a new subimage be placed at showtime (x,10) pixels from the top-left corner of the image.
• [Setting]: -size 30x30 – sets the size of this subimage to 30x30 pixels.
• [Input prototype]: xc:LightSalmon – congenital-in prototype² of LightSalmon colour.
• [Setting]: -loop 0 – specifies that the GIF should loop indefinitely.

Epitome stacks

If you play effectually with the above example you may notice that performing any cartoon commands on the subimages will actually depict to both the starting time frame, but also to whatsoever subimages that accept already been specified. This is because ImageMagick applies operators to all images in its current image stack. We can open and shut image stacks using parentheses in order to control which gear up of images to utilize drawing commands to:

Note: in Bash, the parentheses must be escaped with a backslash. This may not be necessary in other shells.

          magick -dispose none -delay 100 \   -size 100x100 xc:transparent \   -fill DarkSeaGreen -draw "circle 50,l 15,25" \   -page +ten+ten \( -size 30x30 ninety:transparent -fill LightSalmon -depict "circumvolve 15,15 5,5" \) \   -page +20+20 \( -size 40x40 ninety:transparent -make full SkyBlue -draw "circumvolve 20,20 10,v" \) \   -page +thirty+30 \( -size 30x30 xc:transparent -make full Khaki -draw "circle 15,15 5,5" \) \   -loop 0 \   "animated_transparent_frame_restoreprev_loop.gif"                  

Output

Breaking down the differences from the blithe GIF case:

• [Setting]: -dispose none – overlay subsequent frames on top of each other.
• [Setting]: -page +10+x – as before, specifies a new subimage be placed at offset (x,x) pixels from the top-left corner of the image.
• [Epitome stack]: \( – opens a new stack of images. Subsequent drawing commands will simply bear upon subimages defined within this new stack.
• [Setting]: -size 30x30 – as before, sets the size of this subimage to 30x30 pixels.
• [Operator]: -draw "circumvolve fifteen,xv 5,5" – draws a circle centred at (15,xv) whose circumference intersects betoken (5,5).
• [Paradigm stack]: \) – closes the stack. Subsequent drawing commands will no longer affect the subimages defined within the stack that has simply closed.

ImageMagick settings applicable to GIFs

Some of the settings that are of particular interest for a GIF test suite include:

• -dispose: this specifies what happens to a GIF frame later on it is disposed (i.east. the frame that follows information technology is displayed). Options here include none, background, previous. Different disposal modes can be applied to unlike frames.
• -interlace: creates an interlaced GIF³.
• -loop: specifies how many times the GIF should loop (0 means indefinitely).
• -delay: sets the delay between showing i frame and the next to 100 ticks. By default a tick is one/100th of a second.

Other useful ImageMagick commands

• magick place --verbose <file> will output all sorts of details about an paradigm file. For GIFs this will include all of the settings for each frame, whether it's interlaced, etc.
• magick +adjoin <input.gif> <output.png> volition output a PNG for each frame of the input GIF.
• magick +abut -coalesce <input.gif> <output.png> will output a PNG for each frame of the input GIF. Each is the cumulative consequence of the GIF animation up to that frame (i.eastward. what you would run across as yous watched the GIF play).

Endeavor it yourself

Step through an ImageMagick control in your browser using the command-runner below.

Note: the initial magick command is not required, nor should you specify an output file.

References

The ImageMagick documentation is very thorough and highly recommended if you want to swoop into this bailiwick in more detail. Particularly relevant pages include:

• Command-line processing: provides a more than detailed anatomy of the ImageMagick command-line.
• Animation basics: particularly useful for understanding GIF disposal modes.

---

1. It'due south forked from the original that tin can exist found in SerenityOS. ↩︎

2. The xc prefix stands for "X Abiding". ↩︎

3. Old versions of ImageMagick have a bug that ignore the -interlace setting. This was fixed on 11th Oct 2020. ↩︎

mcdonaldthaut1972.blogspot.com

Source: https://peterdn.com/post/2020/10/25/using-imagemagick-to-create-a-gif-test-suite/

Share this post