Tiling tool

From Inkscape Wiki
Jump to navigation Jump to search

Symmetry and Tile tool

The current tile interface is hard to use. The current proposal for Symmetry and Tiles tool seeks to expand upon its uses while proposing an interface that is easy to use. This proposal proposes 4 modes or sub-tools:

Tool Description
Symmetry This tool is destined for users who just want some basic symmetries. Use cases include pattern design and technical drawing.
Tiling This tool allows users to use the 17 wallpaper types.
Radial clones This is for radial designs, and uses polar coordinates.
Clone along path Clones are created along a path. This can be used to create a string of decorations, for repeating frill designs, for page borders etc.

General behaviour

Applying any Symmetry or Tile results in the following behaviour:

  • If the object isn't a group, a group is made out of the selected object. This allows the user to enter the group and add extra elements.
  • A corresponding guide is generated. This guide can be edited with the Tile and Symmetry tool. All guides can be resized or rotated, but further transformations depend on the guide type.
  • Copies are generated from the original object.
  • The original and its copies can be selected and grouped, and a new transformation can be applied to the group. This allows, for example, for a user to create a symmetrical pattern then use it as a tile.

Symmetry or tiling options

UI proposal for tiling toolbar

Symmetry or tiling type

Tool comparisons
Tool Available options Guides Notes
  • X Symmetry
  • Y Symmetry
  • Point Symmetry
Inkscape internally keeps track of an X-axis and a Y-axis, using their intersection for point symmetry. The X/Y axis group can be rotated.
  • Inkscape generates an X and Y axis, aligned by default to the bottom-right of the object's bounding box.
  • The 3 symmetry types can be simply toggled on and off. They can all be chosen at the same time.
Tiling All 17 tiling options available. Inkscape generates a guide specific to the transformation type upon application of the tiling. This guide remains editable on-canvas with the Symmetry and Tiling tool. Because the 17 tiling options use different guide shapes, tiling does not give an option to select existing guides on-canvas.
Radial Clones
  • None
  • Simple symmetry
  • Symmetry + rotate
Inkscape generates an angle guide that by defaut is centered on the object's center of rotation. The user can control both the center and the angle of the guide. Two default orientations are available.
  • By default, the Radial Clone type is "none." Just Select simple rotation or Symmetry + rotate to apply desired radial clone.
  • Rather than specify a base angle, the toolbar asks you to specify the number of times the sphere must be divided by (example: 60). The reasoning behind this is that it's more intuitive for most users, and avoids rounding problems.
  • You can enter a number of copies higher than the number of divisions (for example, when Dynamics are applied)
  • All advanced transformations are according to polar coordinates.
Clones Along Path
  • Fixed distance
  • Clone at each node along the path
A path must be selected when "Clones Along Path" is applied By default, the point at which the clones snap to the selected path is its rotation center. All advanced transformations use Normal/Tangential coordinates.

Break tiling

By default, all tiles generated are clones of the original. 3 actions are available to the generated clones:

  • Unclump: all generated clones are unlinked from the original. Subsequent transformations to the original no longer apply.
  • Combine: Union ('Ctrl' + '+') is applied to the object and all its generated tiles (note: this option may not be useful...).
  • Fuse paths: All end nodes located on guide points (see Guide Points for seamless tiling) are fused into a single node.
UI proposal to break tiling

Guide alignment

  • See also Transformation anchor.
  • Rather than serve as transformation anchors though, the guides get aligned to the corresponding corner (they're just to make alignment faster).
  • However, although the guide gets aligned after a command, it can still be freely moved and transformed.
  • Why no starting angle for Radial tiles? Well, save yourself a bit of trouble and make the starting pattern vertical.

Guide lock

  • Guide locked to object: the guide moves and scales with the object. For example, if a vase is made by applying a symmetry to half a vase, moving the original will also move the other half, so the whole vase is moved. In the same way, scaling a tile scales its guide. If an on-canvas axis or node was chosen to apply a transformation, a copy of the resulting two axis are created and move with the object.
  • Unlocked guide: the guide is absolute, so if the original gets moved, the copy will also be re-positioned according to the original guide position.
Guide locking behavior

Guide visibility

Guide visibility can be toggled on and off, so the user can edit the original object with other tools with the guide is still visible.

Guide editing

Guide transformations

Available transformations depend on the guide type:

  • All guides save symmetry axes can be resized. All guides can be rotated. Toggling occurs by clicking again as with the Transform tool.
  • The angle for the angle tool for radial clones can be edited on canvas, like for the Circle tool.
  • Skew is available for some tiling options using parallelogram guides.
  • Input of numerical values could be available by double clicking a guide corner?
UI Proposal for editing guides for tiling tool

Guide points for seamless tiling =

  • Double-clicking on the side of a guide creates a guide point for seamless tiling. Copies of this guide point are automatically created at the relevant location on all concerned sides of the guide.
  • These points can be moved around. All the other copies move as well.
  • Shift-drag on a guide point creates an angle guide, so users can better create smooth transitions.
  • When "Fuse paths" is applied, all end points snapped to guide points are fused, forming a single continuous path.
UI Proposal for Guide Points for Seamless Tiling

What's more, ctrl-clicking on a guide point creates a new guide point that forms a guide point pair with the first one.

  • When "Fuse paths" is applied, the segments between these two nodes gets deleted, and the resulting open nodes are joined with the corresponding nodes on the next tile.
  • Separating guide points and guide point pairs is necessary because Inkscape does a bad job of recognizing two separate lines as defining the borders of a single object.
UI Proposal for Guide Pairs for Seamless Tiling

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.
  • Clones 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.

UI Proposal for tiling tool dynamics


Think up an interface for Clone Along Path that allows a more advanced version of Pattern Along Path thanks to using guide points on a basic tile. The main issue is that all the tiles, including the original, gets deformed along the path, so editing the base tile must be done separately.