Fragmenter User Manual
This work in progress manual explains how to use the latest (desktop) version of 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.
In Fragmenter you have 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.
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.
Left-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+left-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 left-click (sometimes simply called a click). For some GUI elements, a right-click (that is, a right mouse button click) triggers a different event. CTRL+left-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.
There is a color palette containing 9 color slots and there is a slot showing the background color . 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 will set the current pen color as the background color.
Clicking again on the current color slot will open the RGB color chooser 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 to finish changing the color of this slot.
Right-click the color tick to reset the color of this slot to the default color.
There is a color picker , left-click on it to activate color-picker mode. Left-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 left-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+left-click on the drawing area instead of left-clicking first on the color picker button.
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
simple opaque brush,
others with increasingly sparse texture
and finally some extra brushes.
There is a brush size slider 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 and variable thickness . 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.
Click on the undo button to undo the last stroke that you have drawn on the active layer.
Main symmetry center
With the symmetry centers visibility switch you can turn on/off (/) 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:
- no reflection
- horizontal reflection
- 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:
- no rotational symmetry
- 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+left-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+Left-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.
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:
Static layer - it has only a single frame and thus it cannot be animated. It is perfect to create background drawings.
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.
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.
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).
Empty layer slot - it is also possible to have no layer on a layer slot.
Master menu - left to the icons of the layers there is the button of the master menu, clicking on it shows the tools that affect all layers at the same time.
Below the buttons of the layers the following informations about the active layer are shown:
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.
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:
- - save the contents of all the layers into a multi-layer frg file in the current folder of the Library
- - save what is visible currently (without the background color) into a png file in the current folder of the Library
- - save the contents of the layer into a single-layer frg file in the current folder of the Library
- ... - rename the layer
- - - delete the layer
// Loop/finite/infinite layer:
- - save the contents of the layer into a single-layer frg file in the current folder of the Library
- ... - rename the layer
- to - convert the layer to a loop layer
- to - convert the layer to a finite layer
- to - convert the layer to a infinite layer
- ... - rename the layer
- — - delete the layer
- - 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.
Empty layer slot:
- - 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 file are loaded onto all the layers, replacing the current ones.
- + - add a new background layer to this layer slot
- + - add a new loop layer to this layer slot
- + - add a new finite layer to this layer slot
- + - add a new infinite layer to this layer slot
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.
In the layer menu you have the following buttons and switches (not all of them apply to every type of layer):
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.
/// Fade switch - left-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.
/ Show/hide layers switch - clicking on it will show/hide the contents of the active layer.
/ Play/pause layer switch - clicking on it will play/pause the active layer.
Rewind button - clicking on it will rewind instantly the active layer to its first frame.
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.
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.
/ 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.
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.
Erase current frame button - clicking on it erases the contents of the current frame of the active layer.
... Set framejump value switch - clicking on it changes the current framejump value which affects the behavior of the buttons detailed below.
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.
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.
- Set as tail length button - clicking on it will set the length of the tail of the active layer to the current framejump value and will turn off both type of fadings of the active layer. Right-clicking on this button will set the length of the tail of the active layer to twice of the current framejump value and will turn on both type of fadings of the active layer (this way achieving an onion-skinning effect).
Example: drawing a looping frame-by-frame animation
Pause the active layer. Make it a loop layer with 120 frames if it is not yet such.
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).
Right-click the set as tail length button , this will set the tail length to 5*2=10 and turn on both types of fades, ideal for onion-skinning as with this setting while drawing you also see the previous and next drawing with some transparency.
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 after the current one behaves like an onion skin of the drawings coming after the current one, helping you to draw a smooth animated loop.
When you are done (you have to draw 120/5=24 drawings for a full loop) left-click the set as tail length button, this changes the length of the tail to 5, this way always exactly one drawing is visible.
Unpause the layer and your animated loop is playing.
Clicking on the master menu button will show the buttons and switches that affect all layers. These are the following:
Erase all layers button - clicking on it will erase the contents of all layers.
/ Show/hide canvas switch - clicking on it will show/hide the canvas. You can change the canvas image in the Library.
/ Show/hide all layers switch - clicking on it will show/hide the contents of all layers.
/ Play/pause all layers switch - clicking on it will play/pause all layers.
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.
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.
/ 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.
Please see the Advanced features for further details.
/ GUI on/off button - clicking on it will turn on/off all other GUI elements. right-clicking on it will show the Settings Menu.
/ Projection window on/off button - clicking on it will switch on/off the projection window. Please see the Advanced features for further details.
/ Spout output on/off button - clicking on it will switch on/off spout output. Please see the Advanced features for further details.
Right-click on the / GUI on/off 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.