lambdaway :: sierpinsky

2 | list | login |load

| |

_h2 [[tree|?view=fractal_tree]] | [[fern]] | [[koch]] | sierpinsky {sup [[2|?view=sierpinsky2]]} | [[hilbert]] | [[dragon]]

{svg {@ width="580" height="580" style="box-shadow:0 0 8px #000;"}

{polyline  {@ points="{turtle 50 5 0 {sierp 1 570}}"  
               stroke="#ccc" fill="transparent" stroke-width="30"}}
 {polyline  {@ points="{turtle 50 5 0 {sierp 3 570}}"  
               stroke="#8ff" fill="transparent" stroke-width="20"}}
 {polyline  {@ points="{turtle 50 5 0 {sierp 5 570}}"  
               stroke="#f88" fill="transparent" stroke-width="5"}}

{polyline  {@ points="{turtle 50 5 0 {sierp 7 570}}"  
               stroke="#000" fill="transparent" stroke-width="1"}}
}

_h1 the sierpinsky curve |carpet {sup ([[1|?view=sierpinsky2]]|[[2|?view=sierpinsky3]]|[[3|?view=sierpinsky4]])}

_h2 1) define

{pre
'{def sierp
 {def sierp.r
  {lambda {:order :length :angle} 
   {if {= :order 0}
    then M:length                            // move :length
    else {sierp.r {- :order 1}               // recurse
                  {/ :length 2}
                  {- :angle}}
         T:angle                             // turn :angle
         {sierp.r {- :order 1}               // recurse
                  {/ :length 2} 
                  {+ :angle}}
         T:angle                             // turn :angle
         {sierp.r {- :order 1}               // recurse
                  {/ :length 2} 
                  {- :angle}}
 }}}
 {lambda {:order :length}
  {if {= {% :order 2} 0}                     // if :order is even
   then {sierp.r :order :length 60}          // recurse with 60°
   else T60                                  // else turn 60°
        {sierp.r :order :length -60}         // recurse with -60°
}}}
-> {def sierp
 {def sierp.r
  {lambda {:order :length :angle}
   {if {= :order 0}
    then M:length
    else {sierp.r {- :order 1} {/ :length 2} {- :angle}}
         T:angle
         {sierp.r {- :order 1} {/ :length 2} :angle}
         T:angle
         {sierp.r {- :order 1} {/ :length 2} {- :angle}}
 }}}
 {lambda {:order :length}
  {if {= {% :order 2} 0}
   then {sierp.r :order :length 60}
   else T60
        {sierp.r :order :length -60}
}}}
}

_h2 2) draw

_p Four curves drawn in 50ms on a PowerBookPro. using the {b turtle} promitive.

{pre
'{svg {@ width="580" height="580" style="box-shadow:0 0 8px #000;"}

{polyline  {@ points="{turtle 50 5 0 {sierp 1 570}}"  
               stroke="#ccc" fill="transparent" stroke-width="7"}}
 {polyline  {@ points="{turtle 50 5 0 {sierp 3 570}}"  
               stroke="#8ff" fill="transparent" stroke-width="5"}}
 {polyline  {@ points="{turtle 50 5 0 {sierp 5 570}}"  
               stroke="#f88" fill="transparent" stroke-width="3"}}
 {polyline  {@ points="{turtle 50 5 0 {sierp 7 570}}"  
               stroke="#000" fill="transparent" stroke-width="1"}}
}

}

_p This page contains active code computed and rendered in 50ms in my iPad Pro. To be compared with other codes in  [[rosettacode.org|http://rosettacode.org/wiki/Sierpinski_arrowhead_curve]].
_p See also the [[pascal]] triangle in which can be seen the sierpinsky's triangle.
_h2 3) a comment

_p « The geometry of the curve is separated from the details of screen rendering. They are joined by the “turtle” primitives, M and T, for move and turn. The geometry itself has been written as nested recursions that mirror the curve’s construction. The rosettacode examples stumble over this detail even in languages with this expressive power. Did the authors looking for this symmetry?

_p « The screen rendering itself deserves special attention. The turtle primitives emit content directly into the SVG primitive “polyline” rather than computing one place and drawing in another. Further the curve is drawn four times over in different colors and at different depths of recursion. The coarsest version is easy to miss as it has just three strokes. This reminds us of the simplicity of the construction when we take the time to see it. I might have animated the progression but the static diagram improves on this by allowing the viewer to gaze where they might as contemplating what I would have put in motion. (Other examples are animated.)

_p « I’ve cc’d Eric who is probably most familiar with SVG constructions in Observable Notebooks. Both Observable and Lambda Talk build on javascript and SVG but build in different ways. Lambda Talk constructs an evaluator that includes definitions that simply expand to DOM elements. Where as Observable provides a well engineered computation layer that floats above the DOM almost as if it doesn’t trust the DOM to be exactly what is needed.

_p {i Ward Cunningham | 2021/12/30}

_h2 3) un commentaire

_p " La géométrie de la courbe est séparée des détails du rendu à l'écran. Ils sont réunis par les primitives "tortue", M et T, pour déplacer et tourner. La géométrie elle-même a été écrite sous forme de récursions imbriquées qui reflètent la construction de la courbe. Les exemples de rosettacode trébuchent sur ce détail, même dans des langages ayant cette puissance d'expression. Les auteurs ont-ils cherché cette symétrie ?

_p Le rendu de l'écran lui-même mérite une attention particulière. Les primitives de la tortue émettent du contenu directement dans la primitive SVG "polyline" plutôt que de calculer à un endroit et de dessiner à un autre. De plus, la courbe est dessinée quatre fois dans différentes couleurs et à différentes profondeurs de récursion. La version la plus grossière est facile à manquer car elle ne comporte que trois traits. Cela nous rappelle la simplicité de la construction lorsque nous prenons le temps de la voir. J'aurais pu animer la progression, mais le diagramme statique améliore la situation en permettant au spectateur de regarder où il veut tout en contemplant ce que j'aurais mis en mouvement. (D'autres exemples sont animés).

_p J'ai envoyé une copie à Eric qui est probablement plus familier avec les constructions SVG dans Observable Notebooks. Observable et Lambda Talk s'appuient tous deux sur javascript et SVG, mais de manière différente. Lambda Talk construit un évaluateur qui inclut des définitions qui s'étendent simplement aux éléments DOM. Observable, quant à lui, fournit une couche de calcul bien conçue qui flotte au-dessus du DOM, presque comme s'il ne faisait pas confiance au DOM pour être exactement ce dont il a besoin.

_p {i Ward Cunningham | 2021/12/30}

_h2 Sierpinsky's hexagonal carpet

_p We compute a triangle
{pre
'{def sierps {sierp 7 290}}
-> {def sierps {sierp 7 290}}
}

_p and repeat it 6 times rotating 60°.

{pre
'{svg {@ width="580" height="580" style="box-shadow:0 0 8px #000;"}
     {g {@ transform="translate(290,290)"} 
 {S.map
  {lambda {:a}
   {g {@ transform="rotate({* :a 60})"}
    {polyline {@ points="{turtle 0 0 0 {sierps}}"  
                 stroke="#000" fill="transparent" stroke-width="1"}} }}
  {S.serie 0 5}}}
} 
}

{svg {@ width="580" height="580" style="box-shadow:0 0 8px #000;"}
     {g {@ transform="translate(290,290)"} 
 {S.map
  {lambda {:a}
    {g {@ transform="rotate({* :a 60})"}
       {polyline  {@ points="{turtle 0 0 0 {sierps}}"  
                     stroke="#000" fill="transparent" stroke-width="1"}} }}
  {S.serie 0 5}}}
}