2D Animation/Image Magick

Assume you have a list of files that have file names with the following enumeration:

  image000.png
  image001.png
  image002.png
  ...
  image010.png
  image011.png
  ...

The Image Magck uses images with an alpha numeric order. There you need the prefix "00" for an index lower than 10 and a prefix "0" for images between the frame count 10 and 99.

The following command converts the sequence of images into an animated GIF. This can be used also for image sequences generated with Pencil2D.

 convert -delay 100 -loop 5 -dispose image*.png myanimation.gif

The following command converts the image sequence into an animated GIF named myanimation.gif. Between the single frames the GIF animation a delay time is defined. With -delay 100 the animation waits 100 milliseconds until the next frame of the animation will be displayed. With shorter delay time you can generate a time lapse for the image sequence and with a higher delay time between the frames you can generate a slow motion. The frames can also be generated for with Pencil2D as export format. The result is a decomposed animation with sequence of image extracted frame by frame from the animation. -loop 5 defines the number of repetitions of the animation (here 5 repetitions). -loop 0 repeats the animation infinitely often.

Translated with www.DeepL.com/Translator (free version)

Learning Task

We will create an AppLSAC that will be able to load files into a browser (without connection to remote server) and rename the files with an specific enumeration format according to the given number in the filename.

(OpenSource Analysis) At first we will perform an OpenSource analysis AppLSAC that uses
- the library loadfile4dom.js to upload a list of images into the browser (not server)
- rename the file
  - image0.png into image000.png,
  - image1.png into image001.png,
  - ...
- stores the renamed files into a ZIP file with jszip.js and
- saves the ZIP in the download folder of you browser with the library filesaver.js
(Create LoadSaveZIP Module) First of all we want to create NPM module/Javascript library that is able to load and save ZIP-files within an AppLSAC. What are the methods and attributes required for such a Javascript class. Define the class in UML (Unified Modelling Language).
(Share your Results to other Learners) If you like you can provide the final AppLSAC as link to a GitLab, Bitbucket, GitHub, ... repository here in the learning resource, so that other learner can build on your work and perform new learning task similar to the renaming task.
(Modification of Renaming App) Modify the AppLSAC above in way that that rename the images in the order of the upload and you do not consider any images numbers in the filename. Just the order of loading step by step defines the filename, e.g.
- rename the file
  - firstimage.png into image000.png,
  - mycar1989.png into image001.png,
  - bert19yearsold.png into image002.png,
  - ...
(Animation Sequence) Explain the different approaches for renaming the images and identify the corresponding use-cases for them. E.g.
- the filenames have already an enumeration in the filenames.
- Some images should be skipped,
- ...

Analyse the possibilities to create a GIF animation with a Shell Script and the application of the OpenSource software ImageMagick.

Learning Task

See also