Skip to content

The Regular Polygon tool

1.0.0 · Output

The Regular Polygon tool is a tool build on the Shläfli symbol.

It can build both regular convex polygons and regular star polygons. They have a mathematical background:

  • p is the number of vertices. They are all distributed evenly on a circle.
  • For q = 1, you connect each point to the next one on the circle (clockwise or counterclockwise, it doesn't matter).
  • For q = 2, you skip the first one and connect to the 2nd.
  • For q = 3, you skip the first two and connect to the 3rd. And so on... as long as q < p/2.

Basic usage

The Regular Poly tool needs a center position, radius, number of sides, the number of sides to skip, and an optional angle offset to rotate the regular polygon to the desired state.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
- type: 'regpoly'           # tooltype is 'regpoly'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    radius: 50              # Radius of the "circle"
    side_count: 6           # The "p" value in the Schläfli symbol
    side_skip: 1            # The "q" value in the Schläfli symbol
    angle_offset: 0         # Value to rotate the regpoly
  styles:
    regpoly:
      stroke-width: 2       # width of stroke. 0 = no stroke.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
- type: 'regpoly'           # tooltype is 'regpoly'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    radius: 50              # Radius of the "circle"
    side_count: 6           # The "p" value in the Schläfli symbol
    side_skip: 1            # The "q" value in the Schläfli symbol
    angle_offset: 0         # Value to rotate the regpoly
  entity_index: 0           # connect to state of entity 0
  styles:
    regpoly:
      stroke-width: 2       # width of stroke. 0 = no stroke.

Styling

The Regular Polygon tool has support for the following forms of styling:

Method Support Description
classes Using SAK or User defined class definitions
styles Using inline SVG and CSS styles

The Regular Polygon tool is composed of a single object: "regpoly" and this is the selector for styling:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- type: 'regpoly'
  position:
    cx: 50
    cy: 50
    radius: 50              # Radius of the "circle"
    side_count: 6           # The "p" value in the Schläfli symbol
    side_skip: 1            # The "q" value in the Schläfli symbol
    angle_offset: 0         # Value to rotate the regpoly
  classes:
    regpoly:                # RegPoly selector
      <...>
  styles:
    regpoly:                # RegPoly selector
      <...>
Populair properties:

Property Does what? Example
fill Fill color fill: red sets fill to color red
stroke-width Stroke width stroke-width: 2em sets width to relative width of 2em
stroke Stroke color stroke: blue sets stroke to blue
opacity Opacity (stroke/fill) opacity: 0.7 sets the opacity of rect to 70%
fill-opacity Opacity for fill fill-opacity: 0.5 sets the fill opacity to 50%
stroke-opacity Opacity for stroke stroke-opacity: 0.5 sets the stroke opacity to 50%

Haptics

The tool supports haptic feedback through user_actions/ tap_action definition

Action Haptic Description
Click haptic Uses the haptic property defined in the user_actions definition of the tool. If not specified, a default of medium is used
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  tools:
    - type: icon
      position:
        cx: 10
        cy: 10
        align: center
        icon_size: 15
      entity_index: 0
      user_actions:
        tap_action:
          haptic: success
          actions:
            - action: more-info

Possible values for haptic feedback:

Haptic Description
success Indicates that a task or action has completed.
warning Indicates that a task or action has produced a warning of some kind.
failure Indicates that a task or action has failed.
light Provides a physical metaphor that complements the visual experience.
medium Provides a physical metaphor that complements the visual experience.
heavy Provides a physical metaphor that complements the visual experience.
selection Indicates that the selection is actively changing.

Animations

The RegPoly tool has support for the following forms of animations:

Method Support Description
colorstops List of state values to set the color
colorlists Using a colorlist definition
animations Operator state based animations with class/style styling

The use of animations require the tool to be connected to an entity

Examples

Below some examples with varying "p" (side count) and "q" (skip number of points).

The fill rule is 'evenodd' in the examples

---------------------------- ---------------------------- ---------------------------- ----------------------------
p: 3, q: 1 p: 5, q: 1 p: 5, q: 2 p: 6, q: 1
p: 6, q: 2 p: 7, q: 1 p: 7, q: 2 p: 7, q: 3
p: 8, q: 1 p: 8, q: 2 p: 8, q: 3 p: 9, q: 1
p: 9, q: 2 p: 9, q: 3 p: 9, q: 4 p: 10, q: 1
p: 10, q: 2 p: 10, q: 3 p: 10, q: 4 p: 11, q: 1
p: 11, q: 2 p: 11, q: 3 p: 11, q: 4 p: 11, q: 5
p: 12, q: 1 p: 12, q: 2 p: 12, q: 3 p: 12, q: 4
p: 12, q: 5 p: 13, q: 1 < p: 13, q: 2 p: 13, q: 3
p: 13, q: 4 p: 13, q: 5 p: 13, q: 6 p: 14, q: 1
p: 14, q: 2 p: 14, q: 3 p: 14, q: 4 p: 14, q: 5
p: 14, q: 6 p: 15, q: 1 p: 15, q: 2 p: 15, q: 3
p: 15, q: 4 p: 15, q: 5 p: 15, q: 6 p: 15, q: 7
p: 16, q: 1 p: 16, q: 2 p: 16, q: 3 p: 16, q: 4
p: 16, q: 5 p: 16, q: 6 p: 16, q: 7 p: 17, q: 1
p: 17, q: 2 p: 17, q: 4 p: 17, q: 5 p: 17, q: 6
p: 17, q: 7 p: 17, q: 8 I think you know... ...the drill by now 😄
Back to top