Gif Pack #1

Between projects I often make little animations. Sometimes they’re made as a result of learning new software and sometimes I make them to test out an idea or technique.

I’ve decided that I’ll start a regular thing on this here blog – hopefully monthly – where I share some of those gifs and other little animations.

The ideas for the above gifs came from self-portrait I made for the first issue of This and That zine.

I really liked the texture I had used on the face and decided to make some random animations (similar to the ones I did for Improviz) and use the same texture. I did some post processing using Natron (e.g. the pixealation and desaturation).

Blender Animation Workshop – July 25th

On Saturday July 25th I’ll be delivering an online a Blender workshop for Access Space!

The three-hour workshop (13:00 – 16:00) will go through a few basics of using Blender but will mainly focus on making abstract glitchy looping gifs, like the ones that I made for Improviz.

Tickets are £15 and can be purchased directly from Access Space.

Gifhouseparty

Join artist and occasional musician Antonio Roberts (aka @hellocatfood) for a live audio visual party for all of the gifs stuck at home. Want to join in? Send a picture or gif of you dancing (against a green screen or solid colour) to antonio@hellocatfood.com.

Blender Animations Workshop with Antonio Roberts

Blender is a popular free and open source 3D modeling program used by professionals and amateurs for 2D/3D animation, making assets for games, video editing, motion graphics, compositing and more.
Before the workshop please download Blender version 2.8 on your computers (free!)
This workshop, led by Antonio Roberts, will act as an introduction to the software and its features. In this workshop you will be introduced to basic concepts of animation and navigating 3D space, eventually progressing to more advanced concepts and techniques. By the end you will have the skills to create abstract and glitchy looping animations.

Topic: Blender 3D Animations with Antonio Roberts
Time: Apr 9, 2020 01:00 PM Eastern Time (US and Canada)
Join Zoom Meeting
//duke.zoom.us/j/501181926
Meeting ID: 501 181 926
One tap mobile
+13126266799,,501181926# US (Chicago)
+16468769923,,501181926# US (New York)
Dial by your location
+1 312 626 6799 US (Chicago)
+1 646 876 9923 US (New York)
+1 669 900 6833 US (San Jose)
+1 253 215 8782 US
+1 301 715 8592 US
+1 346 248 7799 US (Houston)
+1 408 638 0968 US (San Jose)
Meeting ID: 501 181 926
Find your local number: //duke.zoom.us/u/adLN5qtUWE
Join by SIP
501181926@zoomcrc.com
Join by H.323
162.255.37.11 (US West)
162.255.36.11 (US East)
221.122.88.195 (China)
115.114.131.7 (India Mumbai)
115.114.115.7 (India Hyderabad)
213.19.144.110 (EMEA)
103.122.166.55 (Australia)
209.9.211.110 (Hong Kong)
64.211.144.160 (Brazil)
69.174.57.160 (Canada)
207.226.132.110 (Japan)
Meeting ID: 501 181 926

About the instructor:
Antonio Roberts is an artist and curator based in Birmingham, UK. His practices explore what ownership and authorship mean in an age impacted by digital technology.
Examples of Antonio’s work can be seen here:

Improviz gifs

Seamlessly loop Wave Modifier in Blender

Seamless animation

For the Improviz gifs one of the requirements that Rumblesan set is that the gifs loop seamlessly. That is, one would not be able to tell where the gifs beings and ends. In Blender making an animation seamless is pretty easy. There’s lots of examples out there but for completion here’s my simple take on it.

With the default cube selected press I and then press on Location. This inserts a keyframe for the location (this menu can also be accessed in Object > Animation > Insert Keyframe). On the Timeline at the bottom move the animation 20 frames. Then, move the cube to somewhere else.

Now press I to insert a keyframe for the location. Ta da! You now have an animation! To make it loop we need to repeat the first keyframe. On the Timeline go forward another 20 frames (so you’re now on frame 40). In the Timeline select the first keyframe. Press Shift + D to duplicate it and then move it to frame 40.

Set the end of your animation to be frame 40. Now when you press play (space bar) the animation loops seamlessly!

As an aside if you’re interested in animation check out Eadweard Muybridge. And if you’re into Pure Data check out this tutorial I made in 2017.

Seamlessly loop Wave Modifier

So, that’s one easy way to make a seamless looping animation. However, Rumblesan was more interested in are gifs that warp and morph. This is one example he sent me.

via GIPHY

In Blender one really useful modifier for making these animations is the Wave modifier. In fact, looking through all of the gifs in 2020 by that artist (Vince McKelvie) it looks like he makes extensive use of this modifier. I love how simple it is to get distorted objects without much effort.

The one thing I’ve always found difficult is making the looping of the waves seamless. I haven’t seen many tutorials on achieving this, and those that I have found rely a bit on guesswork, which isn’t ideal. So, I set out to understand this modifier. After a lot of trial and error and “maths” I finally consulted the documentation and started to figure it out! The documentation on this modifier is quite good but here’s my alternative explanation which may help those who think in a similar way to me.

To get your wave lasting a specific duration, first you need to know how long you want your animation to last. For this example I set mine to 50 frames.

You then need to decide on the Width of the waves. The smaller the number the more ripples you’ll have on your object. This value is relative to the object. So, if you set it to 0.10 you’ll have 10 ripples through your object. If you set it to 1 you’ll have one ripple. I’ve set mine to 0.25.

For the Speed you need to do a bit of maths. Copy the value of Width (0.25) and in the Speed argument enter: (0.25*2)/50. Replace 0.25 with whatever value you set for Width and 50 with however long your wave animation lasts before it loops. Another way to represent this would be:

Speed = ($width*2)/$animationlength

The animation loops however the waves don’t affect the whole object. This is because we need to add a negative offset so that the wave starts before the animation is visible. This is where we need more maths! Enter this into the Offset value:

((1/0.25)*50)*-1

The first part, 1/025, is to work out how many times we’d need to repeat the Width before the whole object has ripples throughout it. We multiply by 50 as that is the animation duration. Then, we multiply by -1 to get the inverse, which because the offset. Another way to represent this would be:

Offset = ((1/$width)*$animationlength)*-1

And now the whole object has waves through it and loops seamlessly!

Ta da!

Since I originally made the gifs I have found that there are alternative methods for achieving a wavy object which rely on the displacement node and Displacement modifier or the Lattice or Cast modifier. These solutions have much more documentation but I’m glad I spent the time figuring out the Wave modifier.

Addictions and Habits

Bcc:, Decoy Magazine’s monthly e-mail subscription programme, ended in 2019. I had made an exclusive artwork for it back in 2018 that was only available to people who subscribed to it, and then in September 2019 at the IRL exhibition at Vivid Projects. If y’all didn’t catch that show here’s my work below:

When you identify something toxic in your life you recoil from it, only to be drawn back in again and again. Addictions and Habits is inspired by how technologies built on the idea of enriching our lives have only amplified our anxieties and made us more physically and emotionally vulnerable

Here’s the really nice essay from Lauren Marsden which accompanied the release of the artwork:

This month, we are very honoured to be featuring UK-based artist and curator Antonio Roberts. With an extensive body of work that entangles glitch, appropriation, sculpture, screens, digitalia, and interaction, he is well suited for the task of questioning and confronting the limitations of copyright law and the corporate appropriation of cultural aesthetics and technologies. Here, with Addictions and Habits, we can imagine either side of the issue. For one, the hand of the creator that opens itself freely to the gesture of sharing, remixing, re-circulating (ad infinitum), and then, perhaps, the other hand—the one that closes the deal, signs the cheque, gives a comforting pat on the back, or plucks an idea out of the ether to secure its containment and regulation. Within this paradox, we enjoy the exuberance of Antonio’s work and see a space for liberation among his many fragments and shatters.

Thanks to Lauren Marsden for including me in Bcc: 🙂

Bitrates/GIFbites

Bitrates is the first New Media Art exhibition in the city of Shiraz in Iran, curated and organized by artists Morehshin Allahyari and Mani Nilchiani, hosted by Dar-ol-Hokoomeh Project at Shiraz Artist House. With a vision to create a space dedicated to emerging artistic practices, workshops, talks, presentations and exhibitions, Dar-ol-Hokoomeh Project (co-founded by Mohsen hazrati and Milad Forouzandeh) seeks to expose the creative community and general public to the potentials of new technologies and New Media theory and practice.

In their curation process, Morehshin and Mani have selected artists that each use variety of digital tools, material, and software in their works to present a specific category and technological aesthetics of new media art; from artgame, creative coding, experimental 3D animation to glitch art and animated GIF. The significance of the term “Bit Rate” is two fold: On the one hand, every digital art work at one point or the other needs to navigate the bottleneck of “bits”. Ideas turn into bits, bits are streamed over a network, to a screen, or to a tangible output such as a 3D printer to form an experience. While simultaneously, as a generation who sought their exposure to the world outside through slow, clunky dial-up modems, our interaction with the world at large was at the mercy of “bit rate”. بیت بر ثانیه (Bitrates) draws attention to these ideas through the presentation of the work that engages and explores technology and internet as a medium.

Featuring: Morehshin Allahyari, Benjamin Bacon, Andrew Blanton, Alex Myers, Brenna Murphy, Ramsey Nasser, Mani Nilchiani, Daniel Rourke, Alfredo Salzar-Caro, Angela Washko.

A lecture and Q&A session will be held with Morehshin Allahyari and Mani Nilchiani at Daralhokoomeh on Sunday May 25th, 6:30 PM.///Website: http://daralhokoomeh.com/

——————————————————————————

***GIFbites is one of the projects of Bitrates exhibition (organized by Daniel Rourke). For the opening of Bitrates, a selected version of this project will be displayed in the gallery, followed by a complete showcase of all the GIFs for the GIFbites exhibition, opening on May 30th (more information coming soon!) .

///Website: http://gifbites.com/exhibition——————————————————————————

NARGIFSUS – No Fucks Given

NARGIFSUS, the closing eent for Carla Gannis’ second solo show, took plcae on 19th March at TRANSFER in New York. It featured works by 58 artists each responding to the them of selfies. As of 20th all of the gifs are now online 🙂 Below you can see my gif, No Fucks Given:

nofucksgiven

For NARGIFSUS artist Carla Gannis and curator Tina Sauerländer invited 50+ international artists to present animated GIF “Selfie-Self Portraits” that provide a broad range of artistic perspectives on contemporary selfie culture and self-display. This online exhibition (released March 20, 2016) follows the NARGIFSUS SCREENING at TRANSFER Gallery, Brooklyn, New York, on the occasion of the closing event of Carla Gannis’s solo show A Subject Self-Defined on March 19, 2016.

The Selfie Drawings by Carla Gannis, which are the prelude to the works in the show at TRANSFER, were part of the group show Porn to Pizza—Domestic Clichés curated by Tina Sauerländer at DAM Gallery in Berlin in 2015. The topic of the exhibition, the change of private and personal comfort zones in the Digital Age, complements Gannis’s The Selfie Drawings that deal with contemporary states of analog-virtual hybridity and identity performance.

NARGIFSUS - No Fucks Given

NARGIFSUS - No Fucks Given

Open Source Giffing

On 13th August I delivered a How to Gif workshop at the mac (Midlands At Centre) as part of Future Curious. Prior to this I went a little bit of a Twitter rant about the lack of software dedicated to making animated gifs, espeically within the open source software world.

Gifs are difficult

In this recent rant I talked about some of my fears regarding the delivery of this workshop. Although gifs are everywhere and we consume them every day, they can be quite difficult to make. What I think is sometimes overlooked is that gifs are basically just like any other animation, but saved as a gif.

gthsb_surge_1

Sure, this sentence does overlook the technical limitations of gifs – 256 colours and limited alpha settings – and the cultural significance of the file format, but it’s no surprise – or maybe it is a surprise – to learn that lots of popular gifs that aren’t grabbed from movies will have been made using 3D modelling software (Maya, 3DS Max), compositing software (After Effects), animation software (Toon Boom, Anime Studio) or even video editing software (Adobe Premier, Final Cut). These software can take many months to grasp the basics of and many years to master.

So, a basic gif making workshop really would be basic unless everyone participating already had knowledge of common animation techniques and use of software.

Software sucks

Speaking of software and tools, the biggest concern I had about this workshop was what tools to use. The aforementioned software are probably the defacto tools of many popular gif artists. The main problem I see with these software is not their complexity – this gets easier over time – but how difficult it is to access them. To put another way, these software cost money. A lot of money.

The computers in the mac computer studio had some of this software already installed but would the personal computers of the participants? What’s the point in teaching someone how to use Photoshop or Maya when they would have to commit to paying $10 per month or $800 respectively to be able to implement what they were taught?

There needs to be free software for making gifs that are accessible to many. Fortunately these do exist, but each has its own flaws.

What I want

What I wanted to teach in this workshop, and indeed what I generally want when making gifs is to be able to mix several sources into one gif. This can be mixing together two existing gifs, adding text or subtitles, putting a gif against a background or something very similar. When put into a list my preferred gif editor should be able to:

  • open gifs
  • allow me to change the canvas size
  • treat the gif animation as one whole object but still allow me to edit each frame
  • import multiple gifs and maintain editability of each
  • allow me to translate, scale, rotate and generally modify each gif
  • change the speed of each gif
  • have an option to make the duration of one gif match another

These requirements are potentially very unreasonable. I would not suggest at all that these would be easy to implement. When looking at existing photo editing and video editing software one might think that this would almost be standard. However, as I mentioned before, animation isn’t easy and so building software to do it won’t be easy either.

With those requirements in mind, how do existing open source software measure-up?

Blender

blender-ui
Without a doubt the most popular and most used open source 3D modelling and animation program. Aside from having a learning curve resembling a hockey stick, one hurdle in creating and editing animated gifs in Blender is that it doesn’t support animated gifs.

If one wants to load in a gif they would have to render each frame to a separate file and then import that image sequence onto an object/flat plane in Blender. Although this would seem like a simple solution one thing that does get lost is the frame rate information. Y’see, in animated gifs each frame can have a different duration. When importing an image sequence into Blender you just get one frame rate. This may not be such an issue as it’s rare for me to see such gifs, but, like many things, it would be nice to just support animated gifs natively.

With that aside, Blender can achieve many of the other tasks on the list and so much more.

It’s quite funny, and a bit unfortunate, that almost any “media” problem in open source software – video editing, post processing, and now event 2D animation – can tackled using Blender.

Synfig

synfig-ui
Perhaps the only competent open source 2D animation software. It too has a learning curve akin to a hockey stick but doesn’t have multiple interfaces or that pesky third dimension to worry about.

Like Blender, Synfig doesn’t have native support for animated gifs and requires a user to convert their gif to individual frames. This same approach is needed if a user wants to import a video.

Unlike Blender you can’t change the speed of imported image sequences/gifs. I’ve reported a bug about this. Of course, in the case of gifs native support would be better, but that solution could also work.

Synfig can do almost all of what is on the list, as can Blender. But, unlike Blender, Synfig can be a huge pain to use. I’m a big fan of precise measurements (thank you based Inkscape) and so not being able to change the coordinates system, having no alignment tool and other small details makes Synfig a bit annoying to use. Then there’s the crashes…

With that said, unless you want to tackle the behemoth that is Blender then for 2D this is the best solution.

GIMP

gimp-ui
There’s no doubt that if you ask anyone on the internet if GIMP can make animated gifs they will give you resounding “YES“. What they fail to mention is that, in most cases, you need to have made the animation beforehand. What you’ll achieve in GIMP is basically compiling individual frames into a gif.

Unlike it’s proprietary brother-from-another-mother Photoshop, GIMP has no native interface for making animations. (I won’t even entertain GIMP GAP as an option until it can be easily installed on all platforms and doesn’t suck.) This means that if you want to, for example, add text to a layer you have to manually do it for each frame. There are some plugins to help you do this but the thing to take away from this is that it’s a destructive process, meaning that once the text, image or paint mark is placed on a layer it can’t be moved or manipulated.

There’s also the lack of support for things like keyframes and tweening. However, I won’t call this a fault of GIMP as it is image editing software, not animation software.

Imagemagick

In a similar vein to GIMP, it’s easy to make animations in Imagemagick, just as long as you’ve done of the animating work already. It takes nothing more than running convert input_images-*.png output_gif.gif to make an animated gif. However, this assumes that you already have the animation ready.

As it is command-line software, editing animations becomes a combination of guess-work and knowing precise details of your files. If you want to do batch processing and create algorithmic animations, as I have done with things like the JPG Glitch Pattern Generator – then Imagemagick is great. For a GUI animation editor look elsewhere.

Web tools

There are a plethora of tools on the web for creating animated gifs. The majority of these either let you convert a series of pictures into a gif (yawn) or convert a section of a video into a gif. Two tools, Piskel and GIFPaint allow you to do frame-by-frame animation, which can be handy for those who want to animate on the go, but not so handy for those of us who can’t – or won’t – draw.

None, however, let me import multiple gifs and merge them into one. One near-exception is ANIMATED GIF MASHUP by Evan Roth. If the gifs you wish to use are already online you can paste the urls, specify an x/y position and have yourself a gif party! This was use by Roth in a workshop where participants made this awesome video:

One downside to this tool is its lack of export functionality. In order to save this as a gif, or indeed a video, a user has to rely on screen capture software. This software is easily found on all platforms, but by doing this there is no way to find a common loop point for all of the gifs and so users may find their animations don’t seamlessly loop.

Gif them a break

With all of this written I am actually a happy user of these software. With regards to the workshop, I had no doubt that participants would have had no trouble converting a gif or video into individual frames or pasting urls. It’s not like we’re in 1993 anymore, people know how to use computers. By critiquing these software I want to address what I feel are barriers to entry, the biggest barrier being actual native gif support.

Gifs in Pure Data

Every so often on my travels across the information superhighway I come across a Pure Data user asking if animated gif files can be read in Pure Data. Technically speaking they have always been able to be read in Pure Data, but not always in a way that a user usually wants. Using the [pix_image] object a user can read almost any image file format. On Linux this is dependent on ImageMagick, so whatever it can read can (theorectically) be displayed in Pure Data/GEM. The problem arises because [pix_image] doesn’t display animated gifs as animations, only the first frame.

There are several solutions to this problem. For these examples I’m going to use the following two gifs:

box

frame

Click through each image to get the full-sized original versions.

[pix_multiimage]

If you separate the gif into its individual frames you can use [pix_multiimage] to display each frame in succession.

multiimage
Click to download the PD patch.

Benefits

The benefits of using [pix_multiimage] to simulate an animated gif are that you can display high quality images with an alpha channel at whatever frame rate you choose. Simulating stutter effects or reversing is as easy as using a [counter] or random number generator.

Drawbacks

The problems with this approach are that [pix_multiimage] needs to be told how many frames to cycle through, and not all gif animations have the same amount of frames. [pix_image] and even [pix_data] do not report information about the amount of frames in an animation, so that value cannot be passed to [pix_multiimage]. Assuming that you separate your gifs to their individual frames, an abstraction can be built that can detect how many images there are in a directory and then send that value to [pix_multiimage] but that is a lot of effort to go through!

Convert gif to video

The technique that perhaps most PD users have used is to convert the gif into a video file and use [pix_film] to play it. I used the following script to convert a folder full of gifs into mp4 files, with all transparent pixels converted to green pixels:

With the gif now converted to a video you can use [pix_film] to play a video as you normally would.

gifchroma
Click to download the PD patch.

Benefits

So far I have only tested playing animated gifs in Pure Data using Gmerlin on Ubuntu. Without knowing if the same would work on Windows or Mac OSX, using video files is the safest option for all users.

Drawbacks

Any sort of file conversion will reduce the quality of the output, and this method is no exception. The videos aren’t very sharp, especially at the borders of the green pixels.

Making the green pixels transparent using [pix_chromakey] or [pix_alpha] requires fine-tuning to ensure that other colours aren’t made transparent. This isn’t always 100% reliable and can have a few glitchy artifacts.

Using gifs directly with [pix_film]

Another approach is to use [pix_film]. “Hold on” I hear you say, “[pix_film] can only be used to play films! How dare you suggest that it can be used to play image file formats. Balderdash!”. Well, don’t beleive the hype! As a Linux user, I can only comment on this working on Linux. If anyone can get the following methods to work in any other OS please get in touch and I’ll add it here.

When you play media file formats in Pure Data on Linux you’re actually using external programs and libraries to play them. So, you’ll use ffmpeg/libav to play videos and Imagemagick to display images. There’s also another program you can use, Gmerlin. Install it by executing sudo apt-get install gmerlin. Pure Data/GEM has some weird behaviour whereby the delay amount of a gif needs to be explicitly set to a value 1 or above in order for an animated gif to be played. This can be achieved on a folder full of gifs by executing mogrify -delay 1 *.gif.

And now you can easily open an animated gif in Pure Data the same way you would a video file.

gifvideo
Click to download the PD patch.

Benefits

Gifs, unlike (most) video file formats can have an alpha channel. Another benefit is that you don’t need to deal with converting files. No longer will you have to worry about whether an mp4 is faster or more effecient than an mp4, or what codec to use. Gifs will just be gifs.

Drawbacks

If the original format of your source file is a gif, then perhaps it is more efficient to keep it as a gif. If it was a video file, would it be beneficial to convert it to a gif? Not always. Even if you could achieve a smaller file size or have PD use less processor power by using a gif, the quality of the video output would be reduced due to gifs only allowing 256 colours.

It’s pronounced “gifs”

There are perhaps other benefits and drawbacks to each approach that I haven’t written about or haven’t even thought about. One such example of both is processor usage of each method. I suspect using gifs is actually less efficient, but I don’t have a good method of testing this. Perhaps one of y’all could!

pdroll