(Double click to clear)

Doily / Mandala / Doily / Snowflake

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;
	}
}