Polar Simulation eines Elementes polar. Siehe den XHTML-Teil dieses Komponentendokumentes für Details.

Specify the polar

Only numbers without units are allowed, list items are to be separated with exactly ',' just for the PHP script. In general there is no good check for nonsense values, take care yourself!

Center (viewBox centered at 0):
cx (number):
cy (number):
Corner number, turns and offset, closed?:
n (integer >0):
turns (number):
offset (number):
z (0|1 (or integer)):
Radii:
r (list of number):

r1 (list of number):

r2 (list of number):
Radial change/shift per corner; dr:
dr (list of 3 numbers):
Angular deviations; fractions:
fractions (list of number):

f1 (list of number):

f2 (list of number):
Angular change/shift per corner; df:
df (list of 3 numbers):
Invertor:
i (integer):
ir (number):
Just to adjust:
fill (only valid values!)

stroke (only valid values!)

background-color (only valid values!)

stroke-width (number):
stroke-opacity (0-1):
stroke-miterlimit (number):

stroke-linejoin:
selected miter:
miter:
bevel:
round:
stroke-linecap:
selected round:
round:
butt:
square:
Painting:

polar Element

Describes a graphical element or a symmetry group in polar coordinates, in the following called polar. Simplest useful application is a regular polygon or in general to explore two dimensional discrete rotation groups. Another application is to create a hole inside a regular polygon. Due to the choice of attribute value semantics and the interpretation of not noted attributes, it is possible to create simple objects with only a few attributes or items in an attribute value. More complex objects can be defined using the complete set of attributes and attribute value semantics by advanced authors.

Examples:

<polar r="100" /> an equilateral triangle with a distance of 100 between the center at 0 and the corners.

<polar r="30,150,90" fractions="-0.5 0.2 0.3" /> simple triangle.

<polar r="100" cx="100" cy="50" /> or
<polar r="100" transform="translate(100 50)" />
an equilateral triangle with a distance of 100 between the center at (100,50) and the corners.

<polar r="100" n="5" /> a pentagon.

<polar r="100" n="5" turns="2" /> or
<polar r="100" n="5" turns="-3" /> or
<polar r="100" n="5" turns="3" /> or
<polar r="100" n="5" turns="-2" /> a pentagram or pentacle.

<polar r="100" n="4" offset="0.5" ir="300" /> a square hole in a square.

<polar r="100 50" n="12" /> a simple regular 'star'.

<polar r="100" n="6" turns="2" z="2" offset="0.25" fractions="0,0,0,0.5,0.5,0.5" /> Star of David.

<polar r="100,50,160,20,120,40,140,60" fractions="0,-0.5,0,-1,0,0.3,0,0.2" n="8" /> a simple irregular 'star'.

<polar r="100 -50" n="12" /> or
<polar r="100 50" n="12" turns="7" /> a more complex 'star' with intersections.

<polar r="100" r1="0" r2="0" n="5" turns="-3" /> cuspic/tapered pentagram like curve.

<polar r1="100,75" n="24" ir="120" i="3" /> base for the warning symbol 'laser' (needs an additional centered circle, a line to the top and a rotation of 90 degrees to be complete).

<polar r="100,40,90,70" r1="0" r2="0" n="20" turns="3" /> more complex cuspic/tapered curve, try other turns too.

<polar r="100,50,75,25,75,50" r1="2" r2="2" n="30" turns="17" /> simple regular 'star burst'.

<polar r="100,40,80,20,70,50,120,60,70,30,60,40" r1="1" r2="1" f1="0.4,0.6,0,0.2" f2="0.6,0.4,0,0.8" n="30" turns="17" z="5" /> irregular 'star burst'.

<polar r="0" r1="120" r2="80" n="11" turns="-3" f1="0.7" f2="0.3" /> simple symmetrical flower like curve.

<polar r="0" r1="120" r2="60" n="7" turns="2" f1="0" f2="0.6" dr="0, -6, 4" /> simple asymmetrical flower like curve.

<polar r="100,-100" n="8" r1="-120 120" r2="-80 80" /> more flower power...

<polar r="100,-100" n="14" turns="8" r1="-120 120" r2="-80 80" f1="0.65" f2="-0.2" /> more flower power...

<polar n="30" turns="6" r1="120,100,80,60,40,20" r2="80,70,60,50,40,30" f2="-1" in="150" ir="64" /> more flower power...

<polar r="100,50" n="16" turns="7" fractions="0.5 -0.5" f1="-0.25 0.25" f2="-0.75 0.75" /> a more complex symmetrical cubic curve.

<polar n="81" z="27" turns="23" r="100,-50,-25" f1="-1" f2="-4" /> a more complex regular group of cubic curves

<polar n="81" z="27" turns="25" r="100,-50,-25" r1="-100,-25,50" r2="50,-25,-100" f1="5" f2="-7" i="300" ir="100" /> ... mandala ...

<polar n="200" turns="-10" r="10" r1="10.6" r2="11.2" f1="0.3333" f2="0.6667" dr="1,1,1" z="0" /> Archimedian spiral approximation (guess, no calculation).

Technical details, attributes:

cx = "<coordinate>"
The x-axis coordinate of the center of the polar. If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes.

cy = "<coordinate>"
The y-axis coordinate of the center of the polar. If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes.

n = "<integer>"
The number of corners of the polar. For a negative or zero n the polar is not displayed. For n="1" the polar might degenerate to a point, for n="2" the polar might degenerate to a line with to trivial values for other attributes. If the attribute is not specified, the effect is as if a value of "3" is specified. If accidently not an integer is specified, ceil(n) is taken as value.

Animatable: yes, only discrete animation, not additive.

turns = "<number>"
The number of turns used to arrange the corners. For details see description below. If the attribute is not specified, the effect is as if a value of "1" were specified. Note that for turns="0" the polar degenerates to a line or a point. The sign determines the direction of progress from one corner to the next.

Animatable: yes, not additive or paced.

offset = "<number>"
Angular Offset for rendering. The offset turn relative to the x-axis of the current user coordinate system for the points. One unit of a number equals to a rotation of 360/n degrees. For details see description below. If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes, not additive or paced.

z = 0|1 or <integer>?
Path closed or not. 0 not closed, else closed. If the attribute is not specified, the effect is as if a value of "1" were specified. (If something different from 0 or 1 is specified, 1 is assumed for the 0|1 variant; currently the other variant is implemented, see below.)

Animatable: yes, only discrete, not additive or paced.

Discussion: The functionality of z can be extended to the number of separated path fragments (M/m commands), closed or open (z positive/negative). Implementation currently not completely tested and not further explained on this page. If n is not a multiple of abs(z)>0 currently the last values are repeated to fill up the lists.

r = "<list of number>"
List of radii for the related corners of the polar. Radii can be positive, negative or zero. If the number of items is larger than n, the last superfluous items are ignored. If the number of items is less than n, the list is repeated from the beginning. If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes, not additive or paced. If the number of list items is varied within the animation, the rule for ignoring and repeating list item applies for each animation value.

r1 = "<list of number>"
r2 = "<list of number>"
List of radii for the related control points of the polar. Radii can be positive, negative or zero. If the number of items is larger than n, the last superfluous items are ignored. If the number of items is less than n, the list is repeated from the beginning. If the attribute is not specified, the same radius list as from the attribute r is assumed.

Animatable: yes, not additive or paced. If the number of list items is varied within the animation, the rule for ignoring and repeating list item applies for each animation value.

dr = "<list of number>"
List for point to point deltas for the radius, first for points, second and third for control points. For details see below. If the number of items is larger than 3, the last superfluous items are ignored. If the attribute is not specified or less than three numbers are specified, the unspecified numbers are assumed to be zero.
This attribute might be useful to define (discrete) spiralic structures.

Animatable: yes, not additive or paced.

fractions = "<list of number>"
List of fractional turn deviations for the related corners of the polar. The fraction is taken relative to the angular position of the corner point of a regular polygon. The unit of fractions is turns/n (if n is not a positive number, the polar is not displayed). If the number of items is larger than n, the last superfluous items are ignored. If the number of items is less than n, the list is repeated from the beginning. If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes, not additive or paced. If the number of list items is varied within the animation, the rule for ignoring and repeating list item applies for each animation value.

f1 = "<list of number>"
f2 = "<list of number>"
List of fractional turn deviation for the related control points of the polar. The fraction is taken relative to the angular position to the corner point. The unit of fractions is turns/n (if n is not a positive number, the polar is not displayed). If the number of items is larger than n, the last superfluous items are ignored. If the number of items is less than n, the list is repeated from the beginning. If the attribute is not specified, the same fraction list as from the attribute fractions is assumed.

Animatable: yes, not additive or paced. If the number of list items is varied within the animation, the rule for ignoring and repeating list item applies for each animation value.

df = "<list of number>"
List for point to point deltas for the angle in turns/n, first for points, second and third for control points. For details see below. If the number of items is larger than 3, the last superfluous items are ignored. If the attribute is not specified or less than three numbers are specified, the unspecified numbers are assumed to be 1.

Animatable: yes, not additive or paced.

i = "<number>"
The number of corners of an additional regular polygon (called invertor). This is intended to be able to create a hole within a shape. For an i smaller than 3 this path fragment is not displayed. If the attribute is not specified, the effect is as if a value of "4" is specified. If accidently not an integer is specified, ceil(i) is taken as value.

Animatable: yes, only discrete animation, not additive.

ir = "<number>"
Radius for the additional invertor. The radius can be positive, negative or zero. If the attribute is not specified, the effect is that this additional path fragment invertor is not displayed.
Especially if i is larger than 2 and the absolute value of ir is about 2 times larger than the largest value of the r list, the polar is completely inside this invertor, this means, depending on the fill-rule and the directions of the polar and the invertor the polar can create holes in the invertor.

Animatable: yes, not additive or paced.

How to generate path data for the polar?

First the lists for r and fractions are completed related to the rules for ignoring and repeating list items.

The result are lists r(j), r1(j), r2(j) with j from 0 to n-1 and lists fractions(j), f1(j), f2(j), with j from 0 to n-1. dr0,dr1,dr2 are the list items of dr, df0, df1,df2 are the list items of df.

Note, that the formulas below can be simplified to straight lines (L instead of C with the following cx/y), if none of f1, f2, r1, r2, dr1, dr2, df1, df2 is specified.

x(j) and y(j) coordinates for each corner j are determined as follows 

 Angles:
 o0 = offset*2*Pi/n * turns
 a(j)  = o0 + (j*df0+fractions(j))*2*Pi/n *turns
 b(j)  = o0 + (j*df1+f1(j))*2*Pi/n *turns
 c(j)  = o0 + (j*df2+f2(j))*2*Pi/n *turns
 
 Radii: (list items of dr are noted as dr0,dr1,dr2)
 ra(j)=r(j)+j*dr0
 rb(j)=r1(j)+j*dr1
 rc(j)=r2(j)+j*dr2
 
 Points:
 x(j) = cx + ra(j)*cos(a(j))
 y(j) = cy + ra(j)*sin(a(j))
 cx1(j) = cx + rb(j)*cos(b(j))
 cy1(j) = cy + rb(j)*sin(b(j))
 cx2(j) = cx + rc(j)*cos(c(j))
 cy2(j) = cy + rc(j)*sin(c(j))

Determination of an equivalent path d attribute: 

for j=0 to n-1
 
 if (z) {
  if(j==0) {
   path ="M x(j) y(j) C cx1(j) cy1(j) cx2(j) cy2(j) "
  } else { 
   path .="x(j) y(j) cx1(j) cy1(j) cx2(j) cy2(j) "
  }
 } else {
  if ((j==0) AND (n>1)){
   path ="M x(j) y(j) C cx1(j) cy1(j) cx2(j) cy2(j) "
  } else if (j==0) {
   path ="M x(j) y(j)"
  } else if (j <(n-1)) {
   path .="x(j) y(j) cx1(j) cy1(j) cx2(j) cy2(j) "
  } else {
   path .="x(j) y(j) "
  }
 }
   
endfor
 
 if !z
   pd = path
 else
   pd = path . "x(0) y(0)Z"
 endif

Path for the additional path fragment polygon invertor: 

 
 a  = j*2*Pi/i
 x(j) = cx + ir*cos(Pi/i - a)
 y(j) = cy + ir*sin(Pi/i - a)
 
 invertor="M x(0) y(0) L"
  for j=1 to i-1
   invertor .="x(j) y(j) "
 endfor
 invertor .="x(0) y(0)Z"

if the invertor is not displayed (ir unspecified or i smaller than 3): value of attribute d = pd else d .= invertor

More typical simple use cases:

a) simple regular polygon, konvex

turns="1"
z="1"
fractions="1"

cy, cy some useful values
r exactly one useful value, for example 100
n some useful value larger than 2

b) simple symmetric polygon, konkav, 'star'

turns="1"
z="1"
fractions="1"

cy, cy some useful values
r exactly two different values with the same sign
n some useful even value larger than 2

c) symmetric polygon, complex 'star' with intersections

turns="1"
z="1"
fractions="1"

cy, cy some useful values
r exactly two different values with different signs
n some useful even value larger than 2

d) regular polygon, possibly with intersections, another kind of 'star'

z="1"
fractions="1"

cy, cy, n some useful values
r exactly one value

n some number larger than 4
turns an integer without a common factor with n
(turns can be always choosen not bigger than n without any loss of figure types).

e) symmetric polygon, more complex with good combination of n and turns

z="1" fractions="1"

cy, cy, n some useful values
r: k values

n = k * j with j larger than 2,
turns an integer without a common factor with n
(turns can be always choosen not bigger than n without any loss of figure types).