Blog der Heimetli Software AG

Graphik auf Canvas, realisiert mit JavaScript

von

Sieht gut aus und hat keinen tieferen Sinn.

Die Darstellung ist durch einen Spirograph inspiriert, aber anstatt nur einen Punkt zu zeichnen, wird eine Linie quer durch den kleineren Kreis gezogen.

Der Code für dieses Bild

const R   = 256 ;
const r   = R * 8 / 16 ;
const cx  = 276 ;
const cy  = 256 ;
const ctx = document.querySelector( "canvas" ).getContext( "2d" ) ;

function fy( alpha )
{
   return cy + Math.sin(alpha) * (R - r) - Math.sin(alpha*R/r) * r ;
}

function fx( alpha )
{
   return cx + Math.cos(alpha) * (R - r) + Math.cos(alpha*R/r) * r ;
}

function dy( alpha )
{
   return cy + Math.sin(alpha) * (R - r) + Math.sin(alpha*R/r) * r ;
}

function dx( alpha )
{
   return cx + Math.cos(alpha) * (R - r) - Math.cos(alpha*R/r) * r ;
}

ctx.fillColor = "black" ;
ctx.fillRect( 0, 0, 556, 511 ) ;

let alpha = 0 ;
while( alpha < 12 * Math.PI + 0.1 )
{
   ctx.beginPath() ;
   ctx.strokeStyle = `hsl(${Math.round(alpha/(2*Math.PI)*360)},100%,50%)` ;
   ctx.moveTo( fx(alpha), fy(alpha) ) ;
   ctx.lineTo( dx(alpha), dy(alpha) ) ;
   ctx.stroke() ;
   alpha += 0.10 ;
}