Blog der Heimetli Software AG

Darstellung der Maurer-Rose

von

Hat keinen tieferen Sinn, sieht aber hübsch aus.

Das Script für die Darstellung

let p = 0 ;

class Point
{
   constructor( x, y )
   {
      this.x = x ;
      this.y = y ;
   }
}

const points = (function() {
    const POINTS = 360 ;
    const RADIUS = 140 ;
    const PETALS = 5 ;
    const result = [] ;

    let   angle  = 0 ;
    for( let i = 0; i <= POINTS; i++ )
    {
       const distance = RADIUS * Math.sin( PETALS * angle ) ;
       result.push( new Point(distance*Math.sin(angle),distance*Math.cos(angle)) ) ;
       angle +=  2 * Math.PI / POINTS ;
    }

    return result ;
})() ;

function drawLine()
{
   const svg = document.querySelector( "svg" ) ;

   if( svg.childElementCount < points.length + 1 )
   {
      const line = document.createElementNS( "http://www.w3.org/2000/svg", "line" ) ;
      line.setAttribute( "x1", points[p].x ) ;
      line.setAttribute( "y1", points[p].y ) ;
      p = (p + 103) % points.length ;
      line.setAttribute( "x2", points[p].x ) ;
      line.setAttribute( "y2", points[p].y ) ;
      line.setAttribute( "stroke", "url(#gradient" ) ;
       line.setAttribute( "stroke-width", "0.5" ) ;
       svg.appendChild( line ) ;
    }
}

drawLine() ;
setInterval( drawLine, 100 ) ;