Skip to content

Fragmenter User Manual

Warning

This manual in its current form was done for the pre-2022 versions of Fragmenter. Since then there was a complete redesign of the user interface. Until the manual is updated to the new version, this manual is still useful to get familiar with the tools Fragmenter offers (as there is a lot of similarity between the icons of the old and the new GUI). Also, in the new 2022+ versions you can hover on any item to see a tooltip popup, which is very useful in understanding which GUI element does what.

Introduction

This manual explains how to use the Fragmenter - animated loop machine.

Fragmenter allows you to create moving images. For more info see the Fragmenter homepage.

Experimenting with Fragmenter is the most effective way to learn to use it and thus strongly recommended.

If you find errors or something missing from this manual, please tell us about it by sending it to longtitlepro at gmail dot com.

Basic mechanics

In Fragmenter you always have a current project that consists of multiple layers, each having some number of frames. When a layer is not paused, it keeps playing its frames. There are different types of layers, for the most central one, the loop layer, the frames are played in loops.

The uniqueness of Fragmenter lies in the fact that not only the last frame but some number of preceding frames are also visible, this is called the tail of the animation, the number of frames visible is called the tail length. Also, when you draw, Fragmenter draws the bits of your stroke on the frame of the layer which just appeared last. These two things together allow you to create animations in real-time (that is, do live animation) in a way that is impossible to do with other tools. What you can achieve in real-time is hard to re-create with other tools even if you do not require to do it real-time.

GUI overview

In the following we give a detailed overview of the GUI (graphical user interface) and all the functions of Fragmenter.

The GUI can be divided into the following major blocks:

  • Drawing tools allow you to change how you draw (brush size, etc.).
  • Layers: you have multiple layers to draw on. Different types of layers have different behavior.
  • Animation tools allow you to change attributes of layers, and so modify your animation.
  • Library: the library gives access to the data stored on the machine (fragmenter files, background images, etc.)
  • Settings Menu: here you can change additional settings, get help, etc..

GUI element types

The type of elements of the GUI are the following:

  • Buttons, that are clickable to trigger some event, sometimes they can be used to trigger a secondary event as well.
  • Switches, that may have two or more states. Note that switches always show their active state (in contrast to various other apps where the switch shows the state you can switch to by clicking on it, that is, exactly the opposite state that Fragmenter shows).
  • Sliders, that allow you to change some variable linearly.

Interaction

  • click (that is, a left mouse button click, which is the same as a touch with a finger or pen, if you have a tablet/touchscreen) on the drawing area will draw.

  • ALT+click on the drawing area will activate the color picker, explained later in section Colors.

  • Pressing SHIFT activates the symmetry center editing mode on the drawing area, explained later in section Symmetry.

  • GUI elements respond to a click. For some GUI elements, a right-click (that is, a right mouse button click) triggers a different event. CTRL+click also emulates such a right-click, which may be more convenient when you use a tablet pen. Holding your finger on a GUI element for a longer time also emulates a right-click. This is needed when you use a touchscreen with no keyboard, mouse or pen available.

Drawing tools

The drawing tools affect the current color and the current brush. You can undo your strokes. You can also set the symmetry according to which your strokes are cloned when drawing.

Color

There is a color palette img containing 9 color slots and there is a slot showing the background color img. The current color slot is denoted by a brighter square. Clicking on a non-actual slot will make it the current color slot. The pen color is the same as the color of the current color slot.

Clicking on the background color img will set the current pen color as the background color.

Clicking again on the current color slot will open the RGB color chooser img where you can set the red, green and blue components of the color by having separate color sliders for each of them. Moving the color sliders by right-clicking or by pressing CTRL while clicking, moves all three sliders at the same time. Note that changing the color will immediately change also the pen color. When you are done, click on the color tick img to finish changing the color of this slot.

Right-click the color tick img to reset the color of this slot to the default color.

There is a color picker img, click on it to activate color-picker mode. Clicking on the drawing area will set the color of the current color slot to the color of the pixel under the cursor. Note that after clicking, you can keep the button pressed and then moving around the drawing will keep the picked color updated until you release the button. Note that you can also directly ALT+click on the drawing area instead of clicking first on the color picker button.

Brush

There are various brushes you can use. Clicking on any of them makes it the current brush, which is used when drawing on the drawing area. There is a

  • img simple opaque brush,

  • img others with increasingly sparse texture

  • img and finally some extra brushes.

There is a brush size slider img which allows you to change the size/thickness of the pen.

Left to the brush size slider there is a switch which allows you to switch between constant thickness img and variable thickness img. When you set constant thickness, the size of your pen will remain constant. When you set variable thickness, the size of your pen will change over time, depending on how fast you draw. It can also depend on the pressure you apply to the pen, if you have a capable device then you can turn on this pressure sensitive mode in the Settings Menu.

Undo

Click on the undo button img to undo the last stroke that you have drawn on the active layer.

Symmetry

Main symmetry center

With the symmetry centers visibility switch you can turn on/off (img/img) the visibility of the symmetry center(s). By default the main symmetry center (its sign is a big diamond-like shape) is in the middle of the drawing area. Reflections and rotations are computed with respect to the main symmetry center. Right-clicking the symmetry centers visibility switch will reset the main symmetry center to the middle of the drawing area (see later for moving it around the drawing area).

The reflection switch and the rotation switch set the symmetries that are applied to the stroke you are drawing.

The reflection switch can be set into three modes:

  • img no reflection
  • img horizontal reflection
  • img vertical reflection

No reflection means no reflection, while in horizontal and vertical reflection mode what you draw is also mirrored on the respective axis going through the main symmetry center.

The rotation switch can be set into several modes:

  • img no rotational symmetry
  • ...
  • img 32 rotated copies

Setting it to x rotational copies (where x can be 1, 2, 3, 4, 6, 8, 16 or 32) will draw x rotated copies of what you draw, evenly distributed around the main symmetry center.

Combining reflections and rotational symmetries gives you a wide range of possibilities to easily achieve stunning animated mandalas/kaleidoscopes.

Secondary symmetry centers

You can also have secondary symmetry centers (their sign is a smaller diamond-like shape). If there is at least one secondary symmetry center, then the stroke you draw (or multiple strokes, if some reflectional/rotational symmetry is set) is drawn in one additional copy for each of the secondary symmetry centers, translated with the vector between the main symmetry center and this secondary symmetry center.

Adding, removing and moving symmetry centers

Having the SHIFT key pressed will activate the symmetry center editing mode and show the symmetry centers even if their visibility is switched off.

  • SHIFT+clicking on a (main or secondary) symmetry center will grab it and then while keeping the button pressed, you can move it around the drawing area.
  • SHIFT+clicking on the drawing area where there is no symmetry center will add a new secondary symmetry center, which can also be moved around while keeping the button pressed.
  • SHIFT+Right-clicking on a secondary symmetry center will remove it.
  • SHIFT+Right-clicking on the main symmetry center will remove all secondary symmetry centers.

  • Right-clicking the symmetry centers visibility switch will reset the main symmetry center to the middle of the drawing area.

Layers

There are at most 6 concurrent layers of four types: static, loop, finite and infinite. As different layer types are better for different things, you are allowed to combine them as you like. You can change them through the context menu.

You can choose which layer is active by clicking on its button. You always draw on and work with the active layer.

Each layer have color coded buttons showing their icon, color code and name:

  • img Static layer - it has only a single frame and thus it cannot be animated. It is perfect to create background drawings.

  • img Loop layer - it rewinds to the beginning when it reaches its last frame and is playing again from the first frame. This is the most convenient and important layer type when it comes to live animation.

  • img Finite layer - it plays once and stops when reached the last frame. It needs to be rewound manually. On a finite layer you can even create traditional animations with the unique tools of Fragmenter.

  • img Infinite layer - it plays once and when it reaches its last frame it keeps extending it with additional frames. It is good if you want to make a live drawing that keeps changing over time without recurring parts.
    Note that initially an infinite layer has only one (empty) frame and even when it is not paused, it does not start to extend its length until something is drawn on it.
    Both on a finite and on an infinite layer, if you set the tail length so that all previous frames are visible, it can be used to make animations of drawings that gradually appear (these are also called whiteboard animations).

  • img Empty layer slot - it is also possible to have no layer on a layer slot.

  • img Master menu - left to the icons of the layers there is the button of the img master menu, clicking on it shows the tools that the current project or all layers at the same time.

Below the buttons of the layers the following informations about the active layer are shown:

img

  • the color of the background of the information panel is the color of the type of the layer,

  • after "NAME:" you can read the name of the layer,

  • length of the layer in "FRAMES", by clicking on it you can change the length of the layer in frames - be cautious as if you set it to a lower value than it was, then the extra frames will be lost,

  • length of the layer in "SEC" (seconds), by clicking on it you can change the length of the layer in seconds - be cautious as if you set it to a lower value than it was, then the extra frames will be lost,

  • the speed of the layer in "FPS" (frame per second), this cannot be changed currently.

Context menu

Clicking on the active layer's button will show a context menu showing several buttons that affect the current layer. Similarly, clicking on the master menu button will show a context menu showing several buttons that affect all the layers.

You can also right-click on any layer's button (even if it is not the active layer) or on the master menu button to access quickly its context menu without making it the active layer.

The context menu has the following buttons depending on the context:

img Master menu:

  • img - save the current project into a multi-layer frg project file in the current folder of the Library
  • img - save what is visible currently (without the background color) into a png file in the current folder of the Library

img Static layer:

  • img - save the contents of the layer into a single-layer frg file in the current folder of the Library
  • ... - rename the layer
  • img - delete the layer

img/img/img Loop/finite/infinite layer:

  • img - save the contents of the layer into a single-layer frg file in the current folder of the Library
  • toimg - convert the layer to a loop layer
  • toimg - convert the layer to a finite layer
  • toimg - convert the layer to a infinite layer
  • ... - rename the layer
  • img - delete the layer
  • img - associate an audio file (in mp3 or wav format) with the current layer. The length of the layer is changed to fit the length of the audio and will be kept in sync with the audio. If the layer was an infinite layer then it is converted to a finite layer. If there was an another layer already associated with some audio file, then that association is removed, i.e., only one layer can be associated to an audio file at any time.

img Empty layer slot:

  • img - load the contents of the frg file currently selected in the Library. The contents of a single-layer frg file are loaded into this slot as a new layer, while the contents of a multi-layer frg project file are loaded onto all the layers, replacing the current project completely.
  • +img - add a new background layer to this layer slot
  • +img - add a new loop layer to this layer slot
  • +img - add a new finite layer to this layer slot
  • +img - add a new infinite layer to this layer slot

Change layer order: while the context menu is visible, one can move the current layer (or also empty slot) to the left or right to switch places with other layers. Note that the order of layers determines which one is drawn above another, the leftmost is drawn below all the other layers and the rightmost is drawn above all the other layers.

Animation tools

Each layer type has a (slightly different) collection of animation tools available in its layer menu. At any time the layer menu of the active layer is visible. When a layer is paused, its frame-by-frame animation tools also appear.

The buttons and switches that affect all the layers at the same time are collected in the master menu. You can also set various FX's (effects) in the master menu.

Layer menu

In the layer menu you have the following buttons and switches (not all of them apply to every type of layer):

  • img Erase layer button - clicking on it will erase the contents of the active layer. If it is an infinite layer than it will reset its length to 1 frame. If the active layer is a loop layer then right-clicking on this button will make the contents of the layer to gradually disappear, more specifically, the contents of each frame are not deleted immediately, instead they are deleted only when the frame becomes the current frame; it is advisable not to draw on this layer during this disappearing period.

  • img/img/img/img Fade switch - clicking on it will turn on/off the fading off of the frames of the tail that are farthest back from the current frame; right-clicking on it will turn on/off fading off of the frames that are ahead of the current frame. That is, either frames ahead of the current frame are not visible or some of them are visible gradually fading off.

  • img/img Show/hide layers switch - clicking on it will show/hide the contents of the active layer.

  • img/img Play/pause layer switch - clicking on it will play/pause the active layer.

  • img Rewind button - clicking on it will rewind instantly the active layer to its first frame.

  • img Tail length slider - this slider shows the length of the tail. By clicking on the slider you can set the tail length to any value. When the slider is set to value x then in addition to the current frame, x further frames are shown for a loop layer. These tail frames loop back to the last frame of the layer if necessary.
    Example: for a loop layer with 20 frames, the current frame is 6 and the tail length is 10 then the following 10+1 frames are visible: 6, 5, 4, 3, 2, 1, 20 ,19 ,18 ,17, 16.
    For a finite or infinite layer the tail frames do not loop back to the last frame, so if x is more than the index of the current frame then all the frames preceding the current frame are shown but nothing else.
    Example: for a finite layer with 20 frames, the current frame is 6 and the tail length is 10 then the following 6 frames are visible: 6, 5, 4, 3, 2, 1.
    Note that when the tail length is set to 0 than no frame of this layer is visible, not even the current frame. Also, when the tail length is set to the full length of the layer than all frames of the layer are shown together without being animated.

  • img/img Omit empty button - this button enables/disables omit empty mode, if it's enabled, then when counting the tail length, only the non-empty frames are counted.
    Example: if tail length is set to 1 and omit empty is switched on, then exactly one frame is always shown, perfect for frame-by-frame animation.

  • img Timeline slider - this slider shows the current frame of the layer. By clicking on the slider you can go to any frame of the layer.

  • img/img MIDI switch - clicking on it you can enable/disable controlling the layer with MIDI signs. You can create MIDI sign control rules in the Library. On the master menu the MIDI switch enables/disables controlling the FX resolution with MIDI signs.

Frame-by-frame animation tools

When a non-static layer is paused, additional buttons and switches appear which together form the frame-by-frame animation tools.

  • img Erase current frame button - clicking on it erases the contents of the current frame of the active layer.

  • img...img Set framejump value switch - clicking on it changes the current framejump value which affects the behavior of the buttons detailed below.

  • img Jump backward button - clicking on it will jump to a frame which is framejump earlier than the current frame. Right-clicking on this button will go to the previous non-empty frame.

  • img Jump forward button - clicking on it will jump to a frame which is framejump later than the current frame. Right-clicking on this button will go to the next non-empty frame.

Note that the jump backward and forward buttons loop around the beginning and the end of the layer when the active layer is a loop layer, but do not loop around otherwise.

  • img Set frame-by-frame anim mode button - clicking on it will turn on omit empty mode, set the length of the tail of the active layer to 1 and will turn off both type of fadings of the active layer. Clicking again or right-clicking on this button will turn on omit empty mode, set the length of the tail of the active layer to 2 and will turn on both type of fadings of the active layer. Practically, clicking on this button will set to show always exactly one frame, allowing frame-by-frame animation, while clicking again or right-clicking on it will show additionally one partially faded-out frame before and after this frame, achieving a classic onion-skinning effect.

Example: drawing a looping frame-by-frame animation

  1. Pause the active layer. Make it a loop layer with 120 frames if it is not yet such.

  2. Right-click the set frame-by-frame anim mode button, ideal for onion-skinning as with this setting while drawing you also see the previous and next drawing with some transparency.

  3. Set the [frameJump] number to 5 using the Set framejump value switch. With this setting we will create a frame-by-frame animation which has 60%5=12 drawings per second (assuming that the playback speed of the layer is 60 FPS).

  4. Draw the first frame, press jump forward button, draw the second frame, press again the jump forward button, etc. until you reach again the first frame. If you want it to make a good looking animated loop, keep in mind that the last drawing should also connect smoothly to the first drawing. The fading of the frames before and after the current one behaves like traditional onion-skinning, helping you to draw a smooth animated loop. You have to draw 120/5=24 drawings for a full loop.

    Alternately, you can draw the first frame, manually go to any further frame on the timeline, draw the second frame, etc. until you have finished your animation. It does not matter if your drawings are evenly spaced on the timeline or not. You can also add a drawing inbetween two already drawn ones at a later point by manually going there on the timeline.

  5. When all drawings are done, click on the set frame-by-frame anim mode button, this changes the length of the tail to 1, this way always exactly one drawing is visible.

  6. Unpause the layer and your animated loop is playing.

Master menu

Clicking on the img master menu button will show the buttons and switches that affect all layers. These are the following:

  • img Erase all layers button - clicking on it will erase the contents of all layers.

  • img/img Show/hide canvas switch - clicking on it will show/hide the canvas. You can change the canvas image in the Library.

  • img/img Show/hide all layers switch - clicking on it will show/hide the contents of all layers.

  • img/img Play/pause all layers switch - clicking on it will play/pause all layers.

  • img Rewind button - clicking on it will rewind instantly all layers to their first frame.

Note that the hide and pause states of the master switches override the respective states of the layers. That is, a layer is shown only if both the master shown/hide switch and its own show/hide switch are in both in play state. Similarly, a layer is playing only if both the master play/pause switch and its own play/pause switch are both in play state.

Effects (FX's)

In the master menu you can use various effects that alter the final composite of the canvas and the layers. You can change the active effect from the Library.

  • img/img FX on/off button - clicking on it will turn on/off the active effect.

  • FX resolution slider - this slider next to the FX on/off button changes the resolution of the active effect. The name of the active effect is also shown on the slider.

Library

Please see the Advanced features for further details.

Additional buttons

  • img/img GUI on/off switch - clicking on it will turn on/off all other GUI elements.

  • img Settings button - clicking on it will show the Settings Menu.

  • img/img Projection window on/off switch - clicking on it will switch on/off the projection window. Please see the Advanced features for further details.

  • img/img Spout output on/off switch - clicking on it will switch on/off spout output. Please see the Advanced features for further details.

Settings Menu

Clicking on the img Settings button or pressing the ESC button will show the Settings Menu. Pressing ESC again will get back to the drawing area. In the Settings Menu you can set some preferences about how Fragmenter behaves.