Just for the fun of it. Check out a slightly more sophisticated version of this experiment the
mandala experiment.
Here is the relevant part of the code:
function addPoint( pos )
{
var dx = pos.x - _centerX;
var dy = pos.y - _centerY;
// distance to center
pos.d = Math.sqrt( dx * dx + dy * dy ) >> 0;
// angle on circle
pos.a = Math.atan2( pos.y - _centerY, pos.x - _centerX );
_coords.push( pos );
}
The rendering part
function render()
{
//...
var m = _coords.length - 1;
var angle = 0;
var step = 360 / _slices;
var mirror = -1;
for( var j = 0; j < _slices; ++j )
{
//...
var rAng = angle * Math.PI / 180;
var rStp = step * Math.PI / 180;
for( var k = 0; k < m; ++k )
{
var p0 = _coords[ k ];
var p1 = _coords[ k + 1 ];
var ra0 = rAng + p0.a;
var ra1 = rAng + p1.a;
if( mirror > 0 )
{
ra0 = rAng + rStp - p0.a;
ra1 = rAng + rStp - p1.a;
}
var x0 = _centerX + p0.d * Math.cos( ra0 );
var y0 = _centerY + p0.d * Math.sin( ra0 );
var x1 = _centerX + p1.d * Math.cos( ra1 );
var y1 = _centerY + p1.d * Math.sin( ra1 );
_tempContext.quadraticCurveTo( x0, y0, x1, y1 );
}
//...
angle += step;
mirror *= -1;
}
}