Difference between revisions of "Tiling tool"

From Inkscape Wiki
Jump to navigation Jump to search
(Yet another complete re-design)
Line 1: Line 1:
== Tiling guide and dialogue ==
+
== Tiling guide and dialogue ==  
 
+
The current tiling interface is hard to use. The current Tiling Tool proposal attempts to resolve part of that issue through the use of on-canvas guides called “Tiles.” This feature also expands the tiling to radial tiling and line tiling (currently known as Pattern Along Path).  
The current tiling interface is hard to use. The current proposal attempts to solve that by dividing the problem into two parts:
+
{| class="wikitable"  
# Tiling guides (tool): this creates a guide object, which helps the tile creation process and sends coordinates for tiling.
 
# Tiling dialogue: where you apply the tiling. In fact, users can add one of 3 options: Pattern Along Path, Radial Tiling, Wallpaper Tiling.  
 
 
 
{| class="wikitable"
 
 
|+  
 
|+  
 
! scope="col" width="180"| Type
 
! scope="col" width="180"| Type
! scope="col" width="500" | Description
+
! scope="col" width="700" | Description
 
|-
 
|-
 
! Wallpaper tiling
 
! Wallpaper tiling
| This tool allows users to use the 17 wallpaper types.
+
| Allows users to use the 17 wallpaper types.
 
|-
 
|-
! Radial tilings
+
! Radial tiling
| This is for radial designs, and uses radial coordinates.
+
|  
 +
* This is for radial designs, and allows both angular clones and radial clones.
 +
* For angular clones, users can choose between simple rotation or symmetry + rotation.
 +
* For radial clones, users can choose between same direction and alternating directions.
 
|-
 
|-
! Tiling along path
+
! Path tiling
| Clones are created along a path. This can be used to create a string of decorations, for repeating frill designs, for page borders etc.
+
|  
|}
+
* Clones are generated along a path. This can be used to create a string of decorations, for repeating frill designs, for page borders etc.
 +
* Users can choose from all 7 Frieze groups.
 +
|}  
 +
The tile creation process:
 +
# Create a base pattern.
 +
# From the tiling mode, add a “Tile.”
 +
#* Edit the tile as needed. Double-clicking a tile enters a tile edit mode. Double-click elsewhere to exit.
 +
#* Make additional changes to the base pattern as needed.
 +
# Select a base pattern and a tile. Switch to tiling tool again.
 +
#* Before selecting the base pattern and tile, copy a target to render over if needed.
 +
#* Choose tiling options.
 +
# Click render.
  
The tile creation process is quite simple:
+
== Terminology ==
# Copy a base tile and a guide (optional) to clipboard.
 
# Select a target to apply the tiling to (you can also just choose the original base tile)
 
# Open the tiling dialogue ("Shift + Ctrl + C" perhaps, as C stands for clones) and add a tiling type: Pattern along path, Radial Tiling, Wallpaper Tiling
 
# Choose options and apply.
 
  
This proposal also includes an interface that lets you define seamless tiles with edge-tile scenarios using a single base tile.
+
* '''Tile:''' A tile is defined here a guide used to mark the boundaries of the base tiling, as well as define the tiling type. It defines the “unit” of the tiling. For example, it is a rectangle for a “P1: Simple translation” tiling. Tiles can be moved, rotated or scaled. In tile edit mode, the type of tile can be modified through the use of handles or from a drop-down list. When rendering a tiling, Inkscape automatically detects the type of tile being used to select the tiling type.
 +
* '''Base pattern:''' Defined here as the pattern that needs to be repeated.
 +
* '''Tiling tool:''' This tool. Used to render tilings.
 +
* '''Render mode:''' The main mode of the tiling tool. From here you can create a new tile, and if you have a tile and based pattern selected, you can “render” the appropriate tiling.
 +
* '''Tile edit mode:''' Double-clicking on a tile enters the tile edit mode. Double-clicking elsewhere leaves it. In tile edit mode, the toolbar changes to one appropriate for that tiling operation (wallpaper, radial or line tiling). Additional features proposed:
 +
** '''Guides:''' In tiling mode, the user can add additional guides (points or lines) to help design their pattern. These additional guides are just visual references and don’t perform additional actions.
 +
** '''Render frame:''' A render frame shows an outline of frames to render. Users can add or delete frames with the mouse. The whole frame can also be moved, rotated and resized.
 +
* '''Tiling dialogue:''' A dialogue with additional options, behaving like an LPE dialogue. Users can also see the stacking of tilings from here.
  
[[File:Tiling_interface_examples.png|Examples of the possibles outputs of the proposed tiling mechanism]]
+
== Implementation ==
  
In case anyone asks why the title is "tiling tool": this is due to a previous version that attempted to stuff even the tiling functions into the toolbar. Let's just say stuff didn't fit....
+
This proposal contains a lot of features, but it is also very modular, so features can be added separately.
 +
* The base version of this tool would be a version only for wallpaper tiling, with only simple rectangular tile from which Inkscape will take coordinates. The base version could be a mere front-end to the old dialogue, with the difference being that the rectangular tile will be used to calculate coordinates.
 +
* The different types of tiles and the Tile Edit Mode can be added separately. Users can first choose from a drop-down. Handles can also be programmed separately.
 +
* In tile edit mode, additional "guides" (guide points etc.) can also be implemented separately.
 +
* "Render frame" feature can also be implemented separately.
 +
* All tiling modes can be implemented separately (clip, fuse and fuse cut). Note: the Fuse Cut operation requires the ability to perform Boolean operations (specifically “cut”) on a group of objects:
 +
** [https://bugs.launchpad.net/inkscape/+bug/166302 Bug #166302: Cut Path looses some segments ]
 +
** [https://bugs.launchpad.net/inkscape/+bug/171379 Bug #171379: Boolean Operations on Groups ]
 +
** [https://bugs.launchpad.net/inkscape/+bug/701819 Bug #701819: Copy/Cut a Part of a Grouped Object ] (scenario of above)
 +
** [https://bugs.launchpad.net/inkscape/+bug/408551 Bug #408551: Cut Path with a grouped object does nothing ]
 +
* Dynamics drop-down and presets for dynamics can be implemented separately. The dialogue for dynamics can also be re-arranged independently.
 +
* Most “target” options can be implemented separately.
 +
* The above describes the tiling tool for just wallpaper tiling. All features can be expanded to radial tiling and line tiling separately.  
  
== The components ==
+
== Tiling tool: Render mode ==  
  
This current proposal is a combination of several separate features that can be programmed separately:
+
The toolbar looks like this:
  
# '''Guide management'''. See the existing proposal here: [https://blueprints.launchpad.net/inkscape/+spec/guides-improvement Guide improvement and management Blueprint]. I will assume that in fact, guides are a type of objects that can be:
+
[[File:Tiling_Tool_Render_Mode.png|GUI proposal for the Render mode of the Tiling tool]]
#* Grouped with an object (the base tile in fact)
 
#* Moved and transformed along with said object (within certain constraints)
 
# '''Tiling guides''': This allows you to add a type of guide specific for a tiling type (a wallpaper transformation, a radial transformation...):
 
#* A pop-up will help you choose the type of tiling with visual references
 
#* Just like any other guide object, they don't have any filters attached. Their only purposes are to:
 
#*# Help you position your base tile elements and
 
#*# Communicate certain boundary information to the tiling tool that'd be too painful to input manually
 
# '''Guide points for seamless connection''' (extra feature on tiling guides): for a wallpaper tile for example, adding a guide point on one side will generate counterparts on all other sides to help you place nodes for seamless transition. This requires the guides themselves to be a bit more complicated though: rather than just objects, they'd have to specify to which other sides they link to and in what direction.
 
# '''Tiling dialogue''': Here's where you apply a tiling, basically. I chose the dialogue format because tiling is something you may want to edit, but at the same time, you wouldn't want to edit it often enough to justify a separate tool (besides the options wouldn't fit).
 
#* Extra feature: This could connect to a more general "Add effects" dialogue for stacking effects.
 
# '''Cut excess''': this feature is actually a simple Cut operation. For "interior" tiles, Inkscape cuts along certain guide lines and deletes the extra. That's it. This will require some fixes to the cut operation and implementation of boolean operations to groups, though:
 
#* [https://bugs.launchpad.net/inkscape/+bug/166302 Bug #166302: Cut Path looses some segments ]
 
#* [https://bugs.launchpad.net/inkscape/+bug/171379 Bug #171379: Boolean Operations on Groups ]
 
#* [https://bugs.launchpad.net/inkscape/+bug/701819 Bug #701819: Copy/Cut a Part of a Grouped Object ] (scenario of above)
 
#* [https://bugs.launchpad.net/inkscape/+bug/408551 Bug #408551: Cut Path with a grouped object does nothing ]
 
# '''Fuse paths''': A new mode which is basically just a "select all nodes / join" operation. Combined with "cut exterior" and careful design, this allows you to create seamless tiles while retaining edge scenarios.
 
# '''Tile stacking''': You can stack multiple tiling types on top of one another.
 
# '''Improved interface for dynamics''' : See later. Also has presets.
 
# '''Pattern management''': I don't know how .svg specifies patterns, but if wallpaper groups are allowed, the user has the option to save the tiling as a pattern or apply it directly as a target  pattern fill (like... a character's t-shirt)
 
# '''Line pattern management''' : In this feature, Inkscape saves the line pattern properties much like it would for patterns. There could be a dock where you choose all the line patterns you've saved.
 
 
 
Hopefully the above description divides the proposal into more manageable parts. What's more, the different tiling types (wallpaper, radial and tiling along path) can be implemented separately.
 
 
 
== The tiling guide tool ==
 
 
 
=== Guide types ===
 
 
 
When you want to add a new guide type, you click a button that opens a floating window with a list of guides and a visual preview (especially for those confusing wallpaper transformations). We could use the previews created by Thorsten Wilms for Inkscape: [http://thorwil.wordpress.com/2010/08/30/inkscape-tiled-clones/ Inkscape Tiled Clone previews]
 
 
 
The guides fall into the following groups:
 
 
 
{| class="wikitable"
 
|+
 
! scope="col" width="180"| Type
 
! scope="col" width="500" | Description
 
|-
 
! scope="row" | Wallpaper tiling
 
| These guides corresponds to the different wallpaper categories
 
|-
 
! scope="row" | Radial tiling
 
| These are to create radial patterns. They're basically an arc segment with an implicit direction.
 
|-
 
! scope="row" | Tiling along Path
 
| This is defined by a central axis, an attach point and 2 tile bounds. The central axis represents the path to which the tile will attach, basically a visual normal offset. The tile attaches to a specific node (say, the first node of the path) from the attach point, basically a visual tangential offset. The two bounds decide where the tile cuts off save for edge scenarios.
 
|}
 
 
 
[[File:Tiling_Guide_Toolbar.png|Toolbar UI proposal for tiling guides]]
 
 
<br clear="all"/>
 
<br clear="all"/>
  
The direction matters for a tiling guide: it will decide the direction in which the tiling occurs.
 
  
Note: when applying a type of tiling, you do not necessarily have to choose a guide of that type (though Inkscape may still constrain to certain types). You can do a P2 transformation with a P1 guide, for example. However, Inkscape can't guarantee the results in that case.
+
== Tiling modes ==
  
=== Guide editing ===
+
[[File:Tiling_Tool_modes.png|Render modes for the tiling tool proposal]]
 +
<br clear="all"/>
 +
There are 4 modes in the current proposal:
 +
* Plain: this is a normal tiling
 +
* Clip: through clipping, only the part within the tile is shown. This is to avoid overlapping.
 +
* Fuse: a “join node” operation is then conducted on all the nodes in the output. If the user designed the tiles to be seamless, then the lines should join up to create a seamless output.
 +
* Fuse cut: this is, in fact, a “cut” and “delete” operation followed by a “join nodes” operation. Inkscape will cut along certain lines and delete parts for “inner” tiles. This last mode allows the user to create seamless tiles with “edge” scenarios from a single base pattern:
  
Guides will actually behave a lot like normal objects. You can scale them and rotate them, duplicate them and even group them with existing objects. They will be managed separately as already proposed in [https://blueprints.launchpad.net/inkscape/+spec/guides-improvement Guide improvement and management Blueprint].
+
== More explanations of the "fuse cut" mode ==
  
Options in the toolbar will depend on the type of guide. Some of the code at least can be taken from existing tools (rectangle etc). You can also potentially change the type of the guide (?).
+
[[File:Tiling_cut_excess.png|Explanation of "Fuse cut" feature for tiling proposal]]
 +
<br clear="all"/>
  
This can be a component of a more generalized "guide" tool which also has categories for other types of guides: composition, perspective, etc.
+
[[File:Tiling_interface_examples.png|More examples of the possible outputs for the “Fuse Cut” mode]]
 +
<br clear="all"/>
  
Note: The same "Create Guide" floating dialogue can be accessed both from the toolbar of the tile guide tool and from the tiling dialogue:
+
== Dynamics ==
* When creating a seamless tile, the user doesn't necessary want to apply a tiling, just create a design.
 
* On the other hand, it should be easy for those creating tiles to find where to make guides. Once a guide is created, double-clicking the guide opens up the guide editing options (so directs you to the tool, basically).
 
  
=== Seamless guide points ===
+
[[File:Tiling_Tool_Dynamics.png|GUI and presets for Dynamics presets for Tiling Tool proposal]]
 +
<br clear="all"/>
 +
Simple dynamics presets could be accessible from the tiling tool. A separate “Dynamics” panel corresponding to the current tiling operation pops up when choosing the Edit option. Major differences are:
 +
* Vertical listing
 +
* Checkbox next to every transformation type, so users can easily remove all of them while retaining some values.
 +
* Radial Clones use Polar coordinates.
 +
* Tiling along Path use orthogonal coordinates (normal and orthogonal).
 +
* Users can save and use presets. This includes a "No dynamics" option.
  
When a guide point is created on one side of a guide, counterparts are automatically created on all other sides of the basic guide. All changes to the original will be reflected onto the new tile.
+
== Target ==
  
What's more, you can click and drag this guide to create a guide segment. By snapping a node on a guide point and snapping its handle to the end of the guide segment, and by repeating the operation with the node's counterpart, the user can create smooth transitions from one tile to the next.
+
[[File:Tiling_Tool_Targets.png|Possible "target" types for tiling tool proposal]]
 +
<br clear="all"/>
 +
"Target" determines where you render your tiling.  
  
See this [http://www.cgl.uwaterloo.ca/~csk/software/penrose/ javascript program] for an approximate idea of how it'd behave.
+
For wallpaper tiling:
 
+
* By numbers: A pop-up asks you to input the number of tiles to make (example: 3 x 5), or the size of a rectangular area to render over
Note: programming-wise, the guide points don't actually do anything, they're just visual references. When Inkscape creates a "Fuse path" tiling, it just joins the nearest nodes. This means you can introduce slight dynamics and still have lines link up, though Inkscape can't guarantee the results in this case.
+
* Render frame: See guide description. After adding a render frame, Inkscape will render tiles according to that frame.
 
+
* Over copied: If you have a copied object, Inkscape will render over the copy.
=== Tiling dialogue button ===
+
* Border to copy: easy page borders? Makes a border.
 
+
* Clip to copied: Same as above, except clipped to the target. Use for clothes etc.
A button in the tile guide tool opens up the Tiling dialogue, which can also be opened on its own (Ctrl+Shift+C perhaps? C for Clones?).
+
* Pattern to copy: (if allowed by .svg standards) The tiling is converted to a pattern and applied to the copied object. This pattern can be manually adjusted with the Pattern edit tool.
 +
* New pattern: (if allowed by .svg standards) A pop-asks asks you to name and save the new pattern for later use.  
 +
For radial tiling:
 +
* By number: A pop-up asks you to input the number of radial and angular copies. You can choose to input by angle and by radial distance instead.
 +
* Render frame: see render frame description.
 +
* No "to copied" option, because I think people usually want to define a radial tile just where the base tile is, but I could be wrong.  
 +
For Tiling along path:
 +
* On selected Path. Note: this can be a closed path. A pop-up allows you to choose additional options and values.
 +
* As selected path's line pattern: takes the selected path and makes the Tiling along path its new pattern.
 +
* As new line pattern: if clone patterns can somehow be saved somewhere.
 +
Alternatively, the "target" field could be excluded from the toolbar, and appear as options in a pop-up when clicking "Render."
  
== The tiling dialogue ==
 
  
[[File:Tiling_dialogue_proposal.png|thumb|left|700px|UI Proposal for tiling dialogues]]
+
== Add tile ==
<br clear="all"/>
 
  
=== Add tiling type ===
+
This adds a tile to the canvas: wallpaper, radial or line. See Tile edit mode for more.
  
Work sequence:
+
== Options ==
# Copy a base tile and optionally a guide
+
Opens a Tiling dialogue. From here you can see what options have been applied to an existing tiling, change them and toggle tile stacking.  
# Select a target (optional, if no target is selected then "Tile's current location" is selected, and "fill" options are unavailable)
 
# Add a tiling type to it: Tiling along Path, Radial or Wallpaper tiling.
 
#* For Rotate, simple rotate and symmetry + rotate are then available. Symmetry + rotate first creates a symmetry using the guide's first rotation axis, creates a new base tile of double the angle of the original, and applies the radial tiling accordingly.
 
#* For Wallpapers, all 17 wallpaper groups are then available.
 
# Apply
 
  
You'll note the "Help" tab. The help tab will have text along the following lines: "To create a tile, copy a tiling and a guide and apply the desired operation. You can find more in-depth explanations of the tilings here: (page created specially for this purpose)"
+
[to-redo]
  
=== Guides ===
+
== Tile edit mode ==  
  
Guides are optional. If none is selected then Inkscape uses the base tile's bounding box.
+
== Tile types ==
  
 
{| class="wikitable"  
 
{| class="wikitable"  
|+ Tool comparisons
+
|+  
! scope="col" width="180"| Guide
+
! scope="col" width="180"| Type
! scope="col" width="500" | Default behaviour
+
! scope="col" width="500" | Description
 
|-
 
|-
! scope="row" | None selected
+
! scope="row" | Wallpaper tiling
| Inkscape uses the object's bounds
+
| These guides corresponds to the different wallpaper categories
 
|-
 
|-
! scope="row" | One guide selected
+
! scope="row" | Radial tiling
| Inkscape uses the one guide selected
+
| These are to create radial patterns. They're basically arc segments with a  direction.
|-
+
|-  
! scope="row" | Multiple guides selected
+
! scope="row" | Tiling along Path
| Choose the right one from the drop-down box that's there for this purpose
+
| This is defined by a central axis, an attach point and 2 tile bounds. The central axis represents the path to which the tile will attach, basically a visual normal offset. The tile attaches to a specific node (say, the first node of the path) from the attach point, basically a visual tangential offset. The two bounds decide where the tile cuts off save for edge scenarios.
|}
+
|}
 
 
=== Mode ===
 
 
 
One of 3 modes are available:
 
* Create group of copies
 
* Create group of clones
 
* Fuse path
 
 
 
Fuse path selects all the nodes in all the tiles and makes a "join" operation. If the user chose to make seamless tiles beforehand, the result would be seamlessly joined tiles.
 
 
 
=== Target ===
 
 
 
"Target" determines where you render your tiling.
 
  
For wallpaper tiling:
+
To enter Tile Edit mode, double-click on a tile. Exit by double-clicking elsewhere. The tile can be moved, resized and rotated using just the Transform (F1) tool, just like how rectangles and ellipses can be edited outside of their respective tools.
* Tile's current location: render tiling where the base tile is.
 
* Over selected object: Covers an area, a rectangle for example. But can be anything.
 
* Inside selected object: Since a base tile has edges that can make the final result bigger than the selected area, this option forces the whole result to be no bigger than the desired area.
 
* Border around selected: option to easily make page borders?
 
* As pattern to selected object: if svg somehow allows it, the pattern becomes the selected object's fill pattern.
 
* As new pattern: a name pops up, asking you the name of the new pattern.
 
  
For radial tiling:
+
[[File:Tiling_Tool_Tile_Edit_Mode.png|GUI proposal for the tile Edit mode for the Tiling Tool]]
* I think people usually want to define a radial tile just where the base tile is, but I could be wrong.
 
 
 
For Tiling along path: (a separate path Must be selected before applying)
 
* On selected Path. Note: this can be a closed path.
 
* As selected path's line pattern: takes the selected path and makes the Tiling along path its new pattern.
 
* As new line pattern: if clone patterns can somehow be saved somewhere.
 
 
 
What's more, for Tiling along path, you can choose from several "start" options:
 
* Path start: the first node of the path.
 
* Path end: the last node of the path.
 
* Selected node
 
 
 
The orientation of the guide matters, so if you want to change tile directions, you can flip the guide. All tiling options also have a "both directions" option. In the case of Pattern along Path, for example, you can "fan out" from a selected node, and in the case of Wallpaper tiling, your tiles can shrink as they get further away from the center.
 
 
 
=== Cut excess for interior tiles option ===
 
 
 
This is in fact a simple cut operation followed by a deletion of "excess" for "inner" tiles:
 
 
 
[[File:Tiling_cut_excess.png|Explanation of "cut excess" feature for tiling proposal]]
 
 
<br clear="all"/>
 
<br clear="all"/>
  
When combined with guides for the creation of seamless tiles, you can easily obtain seamlessly joined tiles.
+
Advanced users can then change the type of the base tile (example: from P1 to P2) in tile edit mode through the use of handles or drop-downs. These handles are not visible nor editable outside the tile edit mode (to avoid getting in the way).  
  
This option is available to all tiling types.
+
(Veronica made a nice list of tiles for wallpapers and corresponding output previews, but the link died….)
  
=== Tile stacking ===
+
== Guide points and other guides ==
  
You can easily stack different tilings!
+
These features are there to help you design your tile pattern. Specifically, they're there to help design seamless tiles.
 +
* Guide points: When a guide point is created on one side of a guide, counterparts are automatically created on all other sides of the basic guide. All changes to the original will be reflected onto counterpart.
 +
* Guide segment: clicking and dragging on a guide point creates a guide segment, which also shows on all of the guide point's counterparts. The idea is to place a node on a guide point, snap its handle to the end of the segment, then repeat with the guide point's counterparts. When a "fuse" operation is applied, the result will be a perfectly smooth transition from one tile to the next.
 +
See this [http://www.cgl.uwaterloo.ca/~csk/software/penrose/ javascript program] for an approximate idea of how it'd behave.
 +
Note: programming-wise, the guide points don't actually do anything, they're just visual references. When Inkscape creates a "Fuse path" tiling, it just joins the nearest nodes. This means you can introduce slight dynamics and still have lines link up, though Inkscape can't guarantee the results in this case.
 +
Depending on the guide type, other types of guides are available (parallel lines, arcs etc.)
 +
== Render frame ==
 +
[[File:Tiling_Tool_Render_Frame.png|Render frame feature for the tiling tool proposal]] <br clear="all"/>
  
[[File:Tiling stacking.png|Explanation of tile stacking feature for my tiling proposal]]
+
A render frame is a tiling outline allowing the user to manually choose which frames to render. This is made up of a "central" tile and additional tiles (so when dynamics are applied, they start with the central tile). By default the frame is rendered over the original tile, but is a separate object that can be moved around, rotated and resized.
 +
== Tile stacking ==
 +
You can easily stack different tilings!
 +
[[File:Tiling stacking.png|Explanation of tile stacking feature for my tiling proposal]] <br clear="all"/>
  
 
Inkscape will likely have an Effects stacking mechanism in the future. Whatever it is, tiling would also fit right into it.
 
Inkscape will likely have an Effects stacking mechanism in the future. Whatever it is, tiling would also fit right into it.
 
=== Advanced transformation options ===
 
 
The "Dynamics" button opens up a separate dialogue with transformation options corresponding to the current tiling interface. Major differences are:
 
* Vertical listing
 
* Checkbox next to every transformation type, so users can easily remove all of them while retaining some values.
 
* Radial Clones use Polar coordinates.
 
* Tiling along Path use orthogonal coordinates (normal and orthogonal).
 
* Users can save and use presets. This includes a "No dynamics" option.
 
Originally I pondered whether presets should be located at the "Advanced" level or at the top level (i.e. presets include tiling type). But I reason that dynamics such as fading and color hues for example work about the same no matter what tiling type you're using.
 
 
[[File:Tiling_advanced.png|thumb|left|700px|UI Proposal for tiling tool dynamics]]
 
<br clear="all"/>
 

Revision as of 11:15, 27 March 2012

Tiling guide and dialogue

The current tiling interface is hard to use. The current Tiling Tool proposal attempts to resolve part of that issue through the use of on-canvas guides called “Tiles.” This feature also expands the tiling to radial tiling and line tiling (currently known as Pattern Along Path).

Type Description
Wallpaper tiling Allows users to use the 17 wallpaper types.
Radial tiling
  • This is for radial designs, and allows both angular clones and radial clones.
  • For angular clones, users can choose between simple rotation or symmetry + rotation.
  • For radial clones, users can choose between same direction and alternating directions.
Path tiling
  • Clones are generated along a path. This can be used to create a string of decorations, for repeating frill designs, for page borders etc.
  • Users can choose from all 7 Frieze groups.

The tile creation process:

  1. Create a base pattern.
  2. From the tiling mode, add a “Tile.”
    • Edit the tile as needed. Double-clicking a tile enters a tile edit mode. Double-click elsewhere to exit.
    • Make additional changes to the base pattern as needed.
  3. Select a base pattern and a tile. Switch to tiling tool again.
    • Before selecting the base pattern and tile, copy a target to render over if needed.
    • Choose tiling options.
  4. Click render.

Terminology

  • Tile: A tile is defined here a guide used to mark the boundaries of the base tiling, as well as define the tiling type. It defines the “unit” of the tiling. For example, it is a rectangle for a “P1: Simple translation” tiling. Tiles can be moved, rotated or scaled. In tile edit mode, the type of tile can be modified through the use of handles or from a drop-down list. When rendering a tiling, Inkscape automatically detects the type of tile being used to select the tiling type.
  • Base pattern: Defined here as the pattern that needs to be repeated.
  • Tiling tool: This tool. Used to render tilings.
  • Render mode: The main mode of the tiling tool. From here you can create a new tile, and if you have a tile and based pattern selected, you can “render” the appropriate tiling.
  • Tile edit mode: Double-clicking on a tile enters the tile edit mode. Double-clicking elsewhere leaves it. In tile edit mode, the toolbar changes to one appropriate for that tiling operation (wallpaper, radial or line tiling). Additional features proposed:
    • Guides: In tiling mode, the user can add additional guides (points or lines) to help design their pattern. These additional guides are just visual references and don’t perform additional actions.
    • Render frame: A render frame shows an outline of frames to render. Users can add or delete frames with the mouse. The whole frame can also be moved, rotated and resized.
  • Tiling dialogue: A dialogue with additional options, behaving like an LPE dialogue. Users can also see the stacking of tilings from here.

Implementation

This proposal contains a lot of features, but it is also very modular, so features can be added separately.

  • The base version of this tool would be a version only for wallpaper tiling, with only simple rectangular tile from which Inkscape will take coordinates. The base version could be a mere front-end to the old dialogue, with the difference being that the rectangular tile will be used to calculate coordinates.
  • The different types of tiles and the Tile Edit Mode can be added separately. Users can first choose from a drop-down. Handles can also be programmed separately.
  • In tile edit mode, additional "guides" (guide points etc.) can also be implemented separately.
  • "Render frame" feature can also be implemented separately.
  • All tiling modes can be implemented separately (clip, fuse and fuse cut). Note: the Fuse Cut operation requires the ability to perform Boolean operations (specifically “cut”) on a group of objects:
  • Dynamics drop-down and presets for dynamics can be implemented separately. The dialogue for dynamics can also be re-arranged independently.
  • Most “target” options can be implemented separately.
  • The above describes the tiling tool for just wallpaper tiling. All features can be expanded to radial tiling and line tiling separately.

Tiling tool: Render mode

The toolbar looks like this:

GUI proposal for the Render mode of the Tiling tool


Tiling modes

Render modes for the tiling tool proposal
There are 4 modes in the current proposal:

  • Plain: this is a normal tiling
  • Clip: through clipping, only the part within the tile is shown. This is to avoid overlapping.
  • Fuse: a “join node” operation is then conducted on all the nodes in the output. If the user designed the tiles to be seamless, then the lines should join up to create a seamless output.
  • Fuse cut: this is, in fact, a “cut” and “delete” operation followed by a “join nodes” operation. Inkscape will cut along certain lines and delete parts for “inner” tiles. This last mode allows the user to create seamless tiles with “edge” scenarios from a single base pattern:

More explanations of the "fuse cut" mode

Explanation of "Fuse cut" feature for tiling proposal

More examples of the possible outputs for the “Fuse Cut” mode

Dynamics

GUI and presets for Dynamics presets for Tiling Tool proposal
Simple dynamics presets could be accessible from the tiling tool. A separate “Dynamics” panel corresponding to the current tiling operation pops up when choosing the Edit option. Major differences are:

  • Vertical listing
  • Checkbox next to every transformation type, so users can easily remove all of them while retaining some values.
  • Radial Clones use Polar coordinates.
  • Tiling along Path use orthogonal coordinates (normal and orthogonal).
  • Users can save and use presets. This includes a "No dynamics" option.

Target

Possible "target" types for tiling tool proposal
"Target" determines where you render your tiling.

For wallpaper tiling:

  • By numbers: A pop-up asks you to input the number of tiles to make (example: 3 x 5), or the size of a rectangular area to render over
  • Render frame: See guide description. After adding a render frame, Inkscape will render tiles according to that frame.
  • Over copied: If you have a copied object, Inkscape will render over the copy.
  • Border to copy: easy page borders? Makes a border.
  • Clip to copied: Same as above, except clipped to the target. Use for clothes etc.
  • Pattern to copy: (if allowed by .svg standards) The tiling is converted to a pattern and applied to the copied object. This pattern can be manually adjusted with the Pattern edit tool.
  • New pattern: (if allowed by .svg standards) A pop-asks asks you to name and save the new pattern for later use.

For radial tiling:

  • By number: A pop-up asks you to input the number of radial and angular copies. You can choose to input by angle and by radial distance instead.
  • Render frame: see render frame description.
  • No "to copied" option, because I think people usually want to define a radial tile just where the base tile is, but I could be wrong.

For Tiling along path:

  • On selected Path. Note: this can be a closed path. A pop-up allows you to choose additional options and values.
  • As selected path's line pattern: takes the selected path and makes the Tiling along path its new pattern.
  • As new line pattern: if clone patterns can somehow be saved somewhere.

Alternatively, the "target" field could be excluded from the toolbar, and appear as options in a pop-up when clicking "Render."


Add tile

This adds a tile to the canvas: wallpaper, radial or line. See Tile edit mode for more.

Options

Opens a Tiling dialogue. From here you can see what options have been applied to an existing tiling, change them and toggle tile stacking.

[to-redo]

Tile edit mode

Tile types

Type Description
Wallpaper tiling These guides corresponds to the different wallpaper categories
Radial tiling These are to create radial patterns. They're basically arc segments with a direction.
Tiling along Path This is defined by a central axis, an attach point and 2 tile bounds. The central axis represents the path to which the tile will attach, basically a visual normal offset. The tile attaches to a specific node (say, the first node of the path) from the attach point, basically a visual tangential offset. The two bounds decide where the tile cuts off save for edge scenarios.

To enter Tile Edit mode, double-click on a tile. Exit by double-clicking elsewhere. The tile can be moved, resized and rotated using just the Transform (F1) tool, just like how rectangles and ellipses can be edited outside of their respective tools.

GUI proposal for the tile Edit mode for the Tiling Tool

Advanced users can then change the type of the base tile (example: from P1 to P2) in tile edit mode through the use of handles or drop-downs. These handles are not visible nor editable outside the tile edit mode (to avoid getting in the way).

(Veronica made a nice list of tiles for wallpapers and corresponding output previews, but the link died….)

Guide points and other guides

These features are there to help you design your tile pattern. Specifically, they're there to help design seamless tiles.

  • Guide points: When a guide point is created on one side of a guide, counterparts are automatically created on all other sides of the basic guide. All changes to the original will be reflected onto counterpart.
  • Guide segment: clicking and dragging on a guide point creates a guide segment, which also shows on all of the guide point's counterparts. The idea is to place a node on a guide point, snap its handle to the end of the segment, then repeat with the guide point's counterparts. When a "fuse" operation is applied, the result will be a perfectly smooth transition from one tile to the next.

See this javascript program for an approximate idea of how it'd behave. Note: programming-wise, the guide points don't actually do anything, they're just visual references. When Inkscape creates a "Fuse path" tiling, it just joins the nearest nodes. This means you can introduce slight dynamics and still have lines link up, though Inkscape can't guarantee the results in this case. Depending on the guide type, other types of guides are available (parallel lines, arcs etc.)

Render frame

Render frame feature for the tiling tool proposal

A render frame is a tiling outline allowing the user to manually choose which frames to render. This is made up of a "central" tile and additional tiles (so when dynamics are applied, they start with the central tile). By default the frame is rendered over the original tile, but is a separate object that can be moved around, rotated and resized.

Tile stacking

You can easily stack different tilings! Explanation of tile stacking feature for my tiling proposal

Inkscape will likely have an Effects stacking mechanism in the future. Whatever it is, tiling would also fit right into it.